@lobehub/ui 5.51.2 → 5.52.0

package/es/EmojiPicker/AvatarUploader.mjs

@@ -3,23 +3,29 @@ import FlexBasic_default from "../Flex/FlexBasic.mjs";
 import Center from "../Flex/Center.mjs";
 import Icon from "../Icon/Icon.mjs";
 import Text from "../Text/Text.mjs";
-import Button$1 from "../Button/Button.mjs";
-import Tag$1 from "../Tag/Tag.mjs";
+import Button from "../base-ui/Button/Button.mjs";
+import UploadDragger from "../base-ui/Upload/UploadDragger.mjs";
+import Tag from "../base-ui/Tag/Tag.mjs";
 import { useTranslation } from "../i18n/useTranslation.mjs";
 import emojiPicker_default from "../i18n/resources/en/emojiPicker.mjs";
+import { ToastHost, toast } from "../base-ui/Toast/imperative.mjs";
 import { memo, useCallback, useRef, useState } from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
-import { Upload, message } from "antd";
 import { cssVar } from "antd-style";
 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 ACCEPTED_IMAGE_TYPES = /* @__PURE__ */ new Set([
+	"image/jpeg",
+	"image/png",
+	"image/gif",
+	"image/webp"
+]);
+const readAsDataURL = (file, onLoad) => {
 	const reader = new FileReader();
 	reader.readAsDataURL(file);
 	reader.addEventListener("load", () => {
-		onUploadImage(String(reader.result));
+		onLoad(String(reader.result));
 	});
 };
 const AvatarUploader = memo(({ shape, onChange, texts, compressSize = 256, onUpload }) => {
@@ -29,14 +35,12 @@ const AvatarUploader = memo(({ shape, onChange, texts, compressSize = 256, onUpl
 	const fileTypeErrorText = texts?.fileTypeError ?? t("emojiPicker.fileTypeError");
 	const draggerDescText = texts?.draggerDesc ?? t("emojiPicker.draggerDesc");
 	const uploadBtnText = texts?.uploadBtn ?? t("emojiPicker.uploadBtn");
-	const beforeUpload = useCallback((file) => {
-		if (!(file.type === "image/jpeg" || file.type === "image/png" || file.type === "image/gif" || file.type === "image/webp")) {
-			message.error(fileTypeErrorText);
+	const handleFiles = useCallback(([file]) => {
+		if (!ACCEPTED_IMAGE_TYPES.has(file.type)) {
+			toast.error(fileTypeErrorText);
 			return;
 		}
-		return createUploadImageHandler((avatar) => {
-			setPreviewImage(avatar);
-		})(file);
+		readAsDataURL(file, setPreviewImage);
 	}, [fileTypeErrorText]);
 	const handleUpload = () => {
 		if (!editor.current) return;
@@ -51,69 +55,70 @@ const AvatarUploader = memo(({ shape, onChange, texts, compressSize = 256, onUpl
 		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, {
-				gap: 16,
-				height: compressSize,
-				width: compressSize,
-				children: [
-					/* @__PURE__ */ jsx(Icon, {
-						color: cssVar.colorTextDescription,
-						icon: ImageUpIcon,
-						size: 48
-					}),
-					/* @__PURE__ */ jsx(Text, {
-						color: cssVar.colorTextSecondary,
-						children: draggerDescText
-					}),
-					/* @__PURE__ */ jsxs(Center, {
-						horizontal: true,
-						gap: 4,
-						children: [
-							/* @__PURE__ */ jsx(Tag$1, { children: "JPG" }),
-							/* @__PURE__ */ jsx(Tag$1, { children: "PNG" }),
-							/* @__PURE__ */ jsx(Tag$1, { children: "GIF" }),
-							/* @__PURE__ */ jsx(Tag$1, { children: "WEBP" })
-						]
-					})
-				]
-			})
-		}), previewImage && /* @__PURE__ */ jsxs(Center, {
-			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, {
-				horizontal: true,
+		children: [
+			!previewImage && /* @__PURE__ */ jsx(UploadDragger, {
+				maxCount: 1,
+				onFiles: handleFiles,
+				children: /* @__PURE__ */ jsxs(Center, {
+					gap: 16,
+					height: compressSize,
+					width: compressSize,
+					children: [
+						/* @__PURE__ */ jsx(Icon, {
+							color: cssVar.colorTextDescription,
+							icon: ImageUpIcon,
+							size: 48
+						}),
+						/* @__PURE__ */ jsx(Text, {
+							color: cssVar.colorTextSecondary,
+							children: draggerDescText
+						}),
+						/* @__PURE__ */ jsxs(Center, {
+							horizontal: true,
+							gap: 4,
+							children: [
+								/* @__PURE__ */ jsx(Tag, { children: "JPG" }),
+								/* @__PURE__ */ jsx(Tag, { children: "PNG" }),
+								/* @__PURE__ */ jsx(Tag, { children: "GIF" }),
+								/* @__PURE__ */ jsx(Tag, { children: "WEBP" })
+							]
+						})
+					]
+				})
+			}),
+			previewImage && /* @__PURE__ */ jsxs(Center, {
 				gap: 8,
 				style: { position: "relative" },
 				width: "100%",
-				children: [/* @__PURE__ */ jsx(Button$1, {
-					icon: ChevronLeftIcon,
-					style: { flex: "none" },
-					onClick: () => setPreviewImage("")
-				}), /* @__PURE__ */ jsx(Button$1, {
-					style: {
-						flex: 1,
-						fontWeight: 500
-					},
-					type: "primary",
-					onClick: handleUpload,
-					children: uploadBtnText
+				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, {
+					horizontal: true,
+					gap: 8,
+					style: { position: "relative" },
+					width: "100%",
+					children: [/* @__PURE__ */ jsx(Button, {
+						icon: ChevronLeftIcon,
+						style: { flex: "none" },
+						onClick: () => setPreviewImage("")
+					}), /* @__PURE__ */ jsx(Button, {
+						style: {
+							flex: 1,
+							fontWeight: 500
+						},
+						type: "primary",
+						onClick: handleUpload,
+						children: uploadBtnText
+					})]
 				})]
-			})]
-		})]
+			}),
+			/* @__PURE__ */ jsx(ToastHost, {})
+		]
 	});
 });
 AvatarUploader.displayName = "AvatarUploader";

package/es/EmojiPicker/AvatarUploader.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"AvatarUploader.mjs","names":["emojiPickerMessages","Flexbox","Tag","Button"],"sources":["../../src/EmojiPicker/AvatarUploader.tsx"],"sourcesContent":["'use client';\n\nimport { type GetProp, message, Upload, type UploadProps } from 'antd';\nimport { cssVar } 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 emojiPickerMessages from '@/i18n/resources/en/emojiPicker';\nimport { useTranslation } from '@/i18n/useTranslation';\nimport Icon from '@/Icon';\nimport Tag from '@/Tag';\nimport Text from '@/Text';\n\nimport { type 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 { t } = useTranslation(emojiPickerMessages);\n\n    const fileTypeErrorText = texts?.fileTypeError ?? t('emojiPicker.fileTypeError');\n    const draggerDescText = texts?.draggerDesc ?? t('emojiPicker.draggerDesc');\n    const uploadBtnText = texts?.uploadBtn ?? t('emojiPicker.uploadBtn');\n\n    const beforeUpload = useCallback(\n      (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(fileTypeErrorText);\n          return;\n        }\n        return createUploadImageHandler((avatar) => {\n          setPreviewImage(avatar);\n        })(file);\n      },\n      [fileTypeErrorText],\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={cssVar.colorTextDescription} icon={ImageUpIcon} size={48} />\n              <Text color={cssVar.colorTextSecondary}>{draggerDescText}</Text>\n              <Center horizontal gap={4}>\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 horizontal gap={8} style={{ position: 'relative' }} width={'100%'}>\n              <Button\n                icon={ChevronLeftIcon}\n                style={{ flex: 'none' }}\n                onClick={() => setPreviewImage('')}\n              />\n              <Button style={{ flex: 1, fontWeight: 500 }} type={'primary'} onClick={handleUpload}>\n                {uploadBtnText}\n              </Button>\n            </Flexbox>\n          </Center>\n        )}\n      </Flexbox>\n    );\n  },\n);\n\nAvatarUploader.displayName = 'AvatarUploader';\n\nexport default AvatarUploader;\n"],"mappings":"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"}
+{"version":3,"file":"AvatarUploader.mjs","names":["emojiPickerMessages","Flexbox"],"sources":["../../src/EmojiPicker/AvatarUploader.tsx"],"sourcesContent":["'use client';\n\nimport { cssVar } 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 '@/base-ui/Button';\nimport Tag from '@/base-ui/Tag';\nimport { toast, ToastHost } from '@/base-ui/Toast';\nimport { UploadDragger } from '@/base-ui/Upload';\nimport { Center, Flexbox } from '@/Flex';\nimport emojiPickerMessages from '@/i18n/resources/en/emojiPicker';\nimport { useTranslation } from '@/i18n/useTranslation';\nimport Icon from '@/Icon';\nimport Text from '@/Text';\n\nimport { type AvatarUploaderProps } from './type';\n\nconst ACCEPTED_IMAGE_TYPES = new Set(['image/jpeg', 'image/png', 'image/gif', 'image/webp']);\n\nconst readAsDataURL = (file: File, onLoad: (dataUrl: string) => void) => {\n  const reader = new FileReader();\n  reader.readAsDataURL(file);\n  reader.addEventListener('load', () => {\n    onLoad(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 { t } = useTranslation(emojiPickerMessages);\n\n    const fileTypeErrorText = texts?.fileTypeError ?? t('emojiPicker.fileTypeError');\n    const draggerDescText = texts?.draggerDesc ?? t('emojiPicker.draggerDesc');\n    const uploadBtnText = texts?.uploadBtn ?? t('emojiPicker.uploadBtn');\n\n    const handleFiles = useCallback(\n      ([file]: File[]) => {\n        if (!ACCEPTED_IMAGE_TYPES.has(file.type)) {\n          toast.error(fileTypeErrorText);\n          return;\n        }\n        readAsDataURL(file, setPreviewImage);\n      },\n      [fileTypeErrorText],\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          <UploadDragger maxCount={1} onFiles={handleFiles}>\n            <Center gap={16} height={compressSize} width={compressSize}>\n              <Icon color={cssVar.colorTextDescription} icon={ImageUpIcon} size={48} />\n              <Text color={cssVar.colorTextSecondary}>{draggerDescText}</Text>\n              <Center horizontal gap={4}>\n                <Tag>JPG</Tag>\n                <Tag>PNG</Tag>\n                <Tag>GIF</Tag>\n                <Tag>WEBP</Tag>\n              </Center>\n            </Center>\n          </UploadDragger>\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 horizontal gap={8} style={{ position: 'relative' }} width={'100%'}>\n              <Button\n                icon={ChevronLeftIcon}\n                style={{ flex: 'none' }}\n                onClick={() => setPreviewImage('')}\n              />\n              <Button style={{ flex: 1, fontWeight: 500 }} type={'primary'} onClick={handleUpload}>\n                {uploadBtnText}\n              </Button>\n            </Flexbox>\n          </Center>\n        )}\n        <ToastHost />\n      </Flexbox>\n    );\n  },\n);\n\nAvatarUploader.displayName = 'AvatarUploader';\n\nexport default AvatarUploader;\n"],"mappings":";;;;;;;;;;;;;;;;;AAmBA,MAAM,uCAAuB,IAAI,IAAI;CAAC;CAAc;CAAa;CAAa;AAAY,CAAC;AAE3F,MAAM,iBAAiB,MAAY,WAAsC;CACvE,MAAM,SAAS,IAAI,WAAW;CAC9B,OAAO,cAAc,IAAI;CACzB,OAAO,iBAAiB,cAAc;EACpC,OAAO,OAAO,OAAO,MAAM,CAAC;CAC9B,CAAC;AACH;AAEA,MAAM,iBAAiB,MACpB,EAAE,OAAO,UAAU,OAAO,eAAe,KAAK,eAAe;CAC5D,MAAM,SAAS,OAAY,IAAI;CAC/B,MAAM,CAAC,cAAc,mBAAmB,SAAS,EAAE;CACnD,MAAM,EAAE,MAAM,eAAeA,mBAAmB;CAEhD,MAAM,oBAAoB,OAAO,iBAAiB,EAAE,2BAA2B;CAC/E,MAAM,kBAAkB,OAAO,eAAe,EAAE,yBAAyB;CACzE,MAAM,gBAAgB,OAAO,aAAa,EAAE,uBAAuB;CAEnE,MAAM,cAAc,aACjB,CAAC,UAAkB;EAClB,IAAI,CAAC,qBAAqB,IAAI,KAAK,IAAI,GAAG;GACxC,MAAM,MAAM,iBAAiB;GAC7B;EACF;EACA,cAAc,MAAM,eAAe;CACrC,GACA,CAAC,iBAAiB,CACpB;CAEA,MAAM,qBAAqB;EACzB,IAAI,CAAC,OAAO,SAAS;EACrB,MAAM,eAAe,OAAO,QAAQ,uBAAuB;EAE3D,SADgB,aAAa,UACd,CAAC;EAEhB,IAAI,CAAC,UAAU;EAGf,aAAa,QACV,SAAS;GACR,IAAI,MAEF,SAAS,IADQ,KAAK,CAAC,IAAI,GAAG,eAAe,EAAE,MAAM,aAAa,CACtD,CAAC;EAEjB,GACA,cACA,GACF;CACF;CAEA,OACE,qBAACC,mBAAD;EAAS,SAAS;EAAI,OAAO,EAAE,UAAU,WAAW;EAAG,OAAO;EAA9D,UAAA;GACG,CAAC,gBACA,oBAAC,eAAD;IAAe,UAAU;IAAG,SAAS;IACnC,UAAA,qBAAC,QAAD;KAAQ,KAAK;KAAI,QAAQ;KAAc,OAAO;KAA9C,UAAA;MACE,oBAAC,MAAD;OAAM,OAAO,OAAO;OAAsB,MAAM;OAAa,MAAM;MAAK,CAAA;MACxE,oBAAC,MAAD;OAAM,OAAO,OAAO;OAAqB,UAAA;MAAsB,CAAA;MAC/D,qBAAC,QAAD;OAAQ,YAAA;OAAW,KAAK;OAAxB,UAAA;QACE,oBAAC,KAAD,EAAA,UAAK,MAAQ,CAAA;QACb,oBAAC,KAAD,EAAA,UAAK,MAAQ,CAAA;QACb,oBAAC,KAAD,EAAA,UAAK,MAAQ,CAAA;QACb,oBAAC,KAAD,EAAA,UAAK,OAAS,CAAA;OACR;;KACF;;GACK,CAAA;GAEhB,gBACC,qBAAC,QAAD;IAAQ,KAAK;IAAG,OAAO,EAAE,UAAU,WAAW;IAAG,OAAO;IAAxD,UAAA,CACE,oBAAC,cAAD;KACE,QAAQ;KACR,cAAc,UAAU,WAAW,KAAA,IAAY,eAAe;KAC9D,QAAQ;KACR,OAAO;KACP,KAAK;KACL,OAAO;IACR,CAAA,GAED,qBAACA,mBAAD;KAAS,YAAA;KAAW,KAAK;KAAG,OAAO,EAAE,UAAU,WAAW;KAAG,OAAO;KAApE,UAAA,CACE,oBAAC,QAAD;MACE,MAAM;MACN,OAAO,EAAE,MAAM,OAAO;MACtB,eAAe,gBAAgB,EAAE;KAClC,CAAA,GACD,oBAAC,QAAD;MAAQ,OAAO;OAAE,MAAM;OAAG,YAAY;MAAI;MAAG,MAAM;MAAW,SAAS;MACpE,UAAA;KACK,CAAA,CACD;IACH,CAAA,CAAA;;GAEV,oBAAC,WAAD,CAAY,CAAA;EACL;;AAEb,CACF;AAEA,eAAe,cAAc"}

package/es/EmojiPicker/EmojiPicker.mjs

@@ -3,11 +3,11 @@ import FlexBasic_default from "../Flex/FlexBasic.mjs";
 import Icon from "../Icon/Icon.mjs";
 import { Tooltip } from "../base-ui/Tooltip/Tooltip.mjs";
 import ActionIcon from "../base-ui/ActionIcon/ActionIcon.mjs";
-import Avatar from "../Avatar/index.mjs";
 import { useTranslation } from "../i18n/useTranslation.mjs";
-import emojiPicker_default from "../i18n/resources/en/emojiPicker.mjs";
 import Popover from "../base-ui/Popover/Popover.mjs";
-import Tabs from "../Tabs/Tabs.mjs";
+import Avatar from "../base-ui/Avatar/index.mjs";
+import Tabs from "../base-ui/Tabs/Tabs.mjs";
+import emojiPicker_default from "../i18n/resources/en/emojiPicker.mjs";
 import AvatarUploader from "./AvatarUploader.mjs";
 import { styles } from "./style.mjs";
 import { memo, useMemo, useRef, useState } from "react";
@@ -18,7 +18,8 @@ import { SmileIcon, TrashIcon, UploadIcon } from "lucide-react";
 import chroma from "chroma-js";
 import data from "@emoji-mart/data";
 import Picker from "@emoji-mart/react";
-import { getLobeIconCDN, toc } from "@lobehub/icons";
+import { getLobeIconCDN } from "@lobehub/icons/es/features/getLobeIconCDN/index.js";
+import { toc } from "@lobehub/icons/es/toc.js";
 import useSWR from "swr";
 //#region src/EmojiPicker/EmojiPicker.tsx
 const DEFAULT_AVATAR = "🤖";
@@ -127,10 +128,15 @@ const EmojiPicker = memo(({ value, defaultAvatar = DEFAULT_AVATAR, onChange, loc
 				justify: "space-between",
 				paddingInline: 10,
 				children: [/* @__PURE__ */ jsx(Tabs, {
-					compact: true,
 					activeKey: tab,
 					items,
-					size: "small",
+					variant: "square",
+					classNames: {
+						indicator: styles.tabsIndicator,
+						list: styles.tabsList,
+						root: styles.tabsRoot,
+						tab: styles.tab
+					},
 					onChange: (key) => setTab(key)
 				}), allowDelete && /* @__PURE__ */ jsx(ActionIcon, {
 					icon: TrashIcon,

package/es/EmojiPicker/EmojiPicker.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"EmojiPicker.mjs","names":["emojiPickerMessages","Flexbox"],"sources":["../../src/EmojiPicker/EmojiPicker.tsx"],"sourcesContent":["'use client';\n\nimport data from '@emoji-mart/data';\nimport Picker from '@emoji-mart/react';\nimport { getLobeIconCDN, toc } from '@lobehub/icons';\nimport { cx, useTheme } from 'antd-style';\nimport chroma from 'chroma-js';\nimport { SmileIcon, TrashIcon, UploadIcon } from 'lucide-react';\nimport { memo, useMemo, useRef, useState } from 'react';\nimport useSWR from 'swr';\nimport useMergeState from 'use-merge-value';\n\nimport Avatar from '@/Avatar';\nimport ActionIcon from '@/base-ui/ActionIcon';\nimport { Flexbox } from '@/Flex';\nimport emojiPickerMessages from '@/i18n/resources/en/emojiPicker';\nimport { useTranslation } from '@/i18n/useTranslation';\nimport Icon from '@/Icon';\nimport Popover from '@/Popover';\nimport Tabs, { type TabsProps } from '@/Tabs';\nimport Tooltip from '@/Tooltip';\n\nimport AvatarUploader from './AvatarUploader';\nimport { styles } 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    allowModelAvatar,\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    contentProps,\n    ...rest\n  }) => {\n    const ref = useRef<HTMLDivElement>(null);\n    const { t } = useTranslation(emojiPickerMessages);\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 theme = useTheme();\n    const pickerCssVariables = useMemo<Record<string, string>>(\n      () => ({\n        '--emoji-picker-rgb-accent': chroma(theme.colorPrimary).rgb().join(', '),\n        '--emoji-picker-rgb-background': chroma(theme.colorBgElevated).rgb().join(', '),\n      }),\n      [theme.colorPrimary, theme.colorBgElevated],\n    );\n\n    const { data: i18n } = useSWR(\n      locale,\n      async () =>\n        await import(/* @vite-ignore */ `@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    // Generate model avatars from @lobehub/icons when allowModelAvatar is enabled\n    const mergedCustomEmojis = useMemo(() => {\n      if (!allowModelAvatar) return customEmojis;\n\n      const modelIcons = toc.filter((item) => item.group !== 'application');\n\n      const modelEmojisCategory = {\n        id: 'models',\n        name: 'Models / Providers',\n        emojis: modelIcons.map((item) => ({\n          id: item.id.toLowerCase(),\n          name: item.title,\n          keywords: [item.title, item.id, item.fullTitle],\n          skins: [{ src: getLobeIconCDN(item.id, { format: 'avatar', cdn: 'aliyun' }) }],\n        })),\n      };\n\n      return customEmojis ? [modelEmojisCategory, ...customEmojis] : [modelEmojisCategory];\n    }, [allowModelAvatar, customEmojis]);\n\n    const emojiText = texts?.emoji ?? t('emojiPicker.emoji');\n    const uploadText = texts?.upload ?? t('emojiPicker.upload');\n    const deleteText = texts?.delete ?? t('emojiPicker.delete');\n\n    const hideEmojiTab = typeof allowUpload === 'object' && allowUpload?.enableEmoji === false;\n\n    const items: TabsProps['items'] = [\n      !hideEmojiTab && {\n        key: 'emoji',\n        label: (\n          <Tooltip title={emojiText}>\n            <Icon icon={SmileIcon} size={{ size: 20, strokeWidth: 2.5 }} />\n          </Tooltip>\n        ),\n      },\n      allowUpload && {\n        key: 'upload',\n        label: (\n          <Tooltip title={uploadText}>\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={{\n          minWidth: 310,\n          paddingTop: showTabs ? 4 : 0,\n          ...pickerCssVariables,\n          ...popupStyle,\n        }}\n        {...contentProps}\n      >\n        {showTabs && (\n          <Flexbox\n            horizontal\n            align={'center'}\n            className={styles.tabs}\n            justify={'space-between'}\n            paddingInline={10}\n          >\n            <Tabs\n              compact\n              activeKey={tab}\n              items={items}\n              size={'small'}\n              onChange={(key) => setTab(key as any)}\n            />\n            {allowDelete && (\n              <ActionIcon\n                icon={TrashIcon}\n                title={deleteText}\n                size={{\n                  blockSize: 32,\n                  size: 18,\n                }}\n                onClick={() => {\n                  handleAvatarChange(defaultAvatar);\n                  onDelete?.();\n                }}\n              />\n            )}\n          </Flexbox>\n        )}\n        {tab === 'emoji' && (\n          <Picker\n            custom={mergedCustomEmojis}\n            data={data}\n            i18n={i18n}\n            icons={'outline'}\n            locale={locale.split('-')[0]}\n            navPosition={showTabs ? 'bottom' : 'top'}\n            previewPosition={'none'}\n            skinTonePosition={'none'}\n            theme={theme.isDarkMode ? 'dark' : 'light'}\n            onEmojiSelect={(e: any) => handleAvatarChange(e.src || e.native)}\n          />\n        )}\n        {tab === 'upload' && (\n          <AvatarUploader\n            compressSize={compressSize}\n            shape={shape}\n            texts={texts}\n            onChange={handleAvatarChange}\n            onUpload={onUpload}\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        className={cx(styles.popover)}\n        content={content}\n        defaultOpen={defaultOpen}\n        open={visible}\n        placement={'bottom'}\n        trigger={'click'}\n        classNames={{\n          content: styles.popover,\n          root: styles.positioner,\n        }}\n        onOpenChange={(v) => {\n          if (loading) return;\n          setVisible(v);\n        }}\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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"}
+{"version":3,"file":"EmojiPicker.mjs","names":["emojiPickerMessages","Flexbox"],"sources":["../../src/EmojiPicker/EmojiPicker.tsx"],"sourcesContent":["'use client';\n\nimport data from '@emoji-mart/data';\nimport Picker from '@emoji-mart/react';\nimport { getLobeIconCDN } from '@lobehub/icons/es/features/getLobeIconCDN';\nimport { toc } from '@lobehub/icons/es/toc';\nimport { cx, useTheme } from 'antd-style';\nimport chroma from 'chroma-js';\nimport { SmileIcon, TrashIcon, UploadIcon } from 'lucide-react';\nimport { memo, useMemo, useRef, useState } from 'react';\nimport useSWR from 'swr';\nimport useMergeState from 'use-merge-value';\n\nimport ActionIcon from '@/base-ui/ActionIcon';\nimport Avatar from '@/base-ui/Avatar';\nimport Tabs, { type TabsProps } from '@/base-ui/Tabs';\nimport { Flexbox } from '@/Flex';\nimport emojiPickerMessages from '@/i18n/resources/en/emojiPicker';\nimport { useTranslation } from '@/i18n/useTranslation';\nimport Icon from '@/Icon';\nimport Popover from '@/Popover';\nimport Tooltip from '@/Tooltip';\n\nimport AvatarUploader from './AvatarUploader';\nimport { styles } 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    allowModelAvatar,\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    contentProps,\n    ...rest\n  }) => {\n    const ref = useRef<HTMLDivElement>(null);\n    const { t } = useTranslation(emojiPickerMessages);\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 theme = useTheme();\n    const pickerCssVariables = useMemo<Record<string, string>>(\n      () => ({\n        '--emoji-picker-rgb-accent': chroma(theme.colorPrimary).rgb().join(', '),\n        '--emoji-picker-rgb-background': chroma(theme.colorBgElevated).rgb().join(', '),\n      }),\n      [theme.colorPrimary, theme.colorBgElevated],\n    );\n\n    const { data: i18n } = useSWR(\n      locale,\n      async () =>\n        await import(/* @vite-ignore */ `@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    // Generate model avatars from @lobehub/icons when allowModelAvatar is enabled\n    const mergedCustomEmojis = useMemo(() => {\n      if (!allowModelAvatar) return customEmojis;\n\n      const modelIcons = toc.filter((item) => item.group !== 'application');\n\n      const modelEmojisCategory = {\n        id: 'models',\n        name: 'Models / Providers',\n        emojis: modelIcons.map((item) => ({\n          id: item.id.toLowerCase(),\n          name: item.title,\n          keywords: [item.title, item.id, item.fullTitle],\n          skins: [{ src: getLobeIconCDN(item.id, { format: 'avatar', cdn: 'aliyun' }) }],\n        })),\n      };\n\n      return customEmojis ? [modelEmojisCategory, ...customEmojis] : [modelEmojisCategory];\n    }, [allowModelAvatar, customEmojis]);\n\n    const emojiText = texts?.emoji ?? t('emojiPicker.emoji');\n    const uploadText = texts?.upload ?? t('emojiPicker.upload');\n    const deleteText = texts?.delete ?? t('emojiPicker.delete');\n\n    const hideEmojiTab = typeof allowUpload === 'object' && allowUpload?.enableEmoji === false;\n\n    const items: TabsProps['items'] = [\n      !hideEmojiTab && {\n        key: 'emoji',\n        label: (\n          <Tooltip title={emojiText}>\n            <Icon icon={SmileIcon} size={{ size: 20, strokeWidth: 2.5 }} />\n          </Tooltip>\n        ),\n      },\n      allowUpload && {\n        key: 'upload',\n        label: (\n          <Tooltip title={uploadText}>\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={{\n          minWidth: 310,\n          paddingTop: showTabs ? 4 : 0,\n          ...pickerCssVariables,\n          ...popupStyle,\n        }}\n        {...contentProps}\n      >\n        {showTabs && (\n          <Flexbox\n            horizontal\n            align={'center'}\n            className={styles.tabs}\n            justify={'space-between'}\n            paddingInline={10}\n          >\n            <Tabs\n              activeKey={tab}\n              items={items}\n              variant={'square'}\n              classNames={{\n                indicator: styles.tabsIndicator,\n                list: styles.tabsList,\n                root: styles.tabsRoot,\n                tab: styles.tab,\n              }}\n              onChange={(key) => setTab(key as any)}\n            />\n            {allowDelete && (\n              <ActionIcon\n                icon={TrashIcon}\n                title={deleteText}\n                size={{\n                  blockSize: 32,\n                  size: 18,\n                }}\n                onClick={() => {\n                  handleAvatarChange(defaultAvatar);\n                  onDelete?.();\n                }}\n              />\n            )}\n          </Flexbox>\n        )}\n        {tab === 'emoji' && (\n          <Picker\n            custom={mergedCustomEmojis}\n            data={data}\n            i18n={i18n}\n            icons={'outline'}\n            locale={locale.split('-')[0]}\n            navPosition={showTabs ? 'bottom' : 'top'}\n            previewPosition={'none'}\n            skinTonePosition={'none'}\n            theme={theme.isDarkMode ? 'dark' : 'light'}\n            onEmojiSelect={(e: any) => handleAvatarChange(e.src || e.native)}\n          />\n        )}\n        {tab === 'upload' && (\n          <AvatarUploader\n            compressSize={compressSize}\n            shape={shape}\n            texts={texts}\n            onChange={handleAvatarChange}\n            onUpload={onUpload}\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        className={cx(styles.popover)}\n        content={content}\n        defaultOpen={defaultOpen}\n        open={visible}\n        placement={'bottom'}\n        trigger={'click'}\n        classNames={{\n          content: styles.popover,\n          root: styles.positioner,\n        }}\n        onOpenChange={(v) => {\n          if (loading) return;\n          setVisible(v);\n        }}\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":";;;;;;;;;;;;;;;;;;;;;;;;AA2BA,MAAM,iBAAiB;AAEvB,MAAM,cAAc,MACjB,EACC,OACA,gBAAgB,gBAChB,UACA,SAAS,SACT,aACA,aACA,kBACA,OACA,UACA,eAAe,KACf,cACA,WACA,SACA,UACA,aAAa,CAAC,GACd,gBACA,YACA,cACA,MACA,cAAc,OACd,cACA,YACA,OACA,cACA,GAAG,WACC;CACJ,MAAM,MAAM,OAAuB,IAAI;CACvC,MAAM,EAAE,MAAM,eAAeA,mBAAmB;CAChD,MAAM,CAAC,SAAS,cAAc,cAAc,aAAa;EACvD,cAAc;EACd,UAAU;EACV,OAAO;CACT,CAAC;CACD,MAAM,CAAC,KAAK,UAAU,SAA6B,OAAO;CAE1D,MAAM,QAAQ,SAAS;CACvB,MAAM,qBAAqB,eAClB;EACL,6BAA6B,OAAO,MAAM,YAAY,CAAC,CAAC,IAAI,CAAC,CAAC,KAAK,IAAI;EACvE,iCAAiC,OAAO,MAAM,eAAe,CAAC,CAAC,IAAI,CAAC,CAAC,KAAK,IAAI;CAChF,IACA,CAAC,MAAM,cAAc,MAAM,eAAe,CAC5C;CAEA,MAAM,EAAE,MAAM,SAAS,OACrB,QACA,YACE,MAAM;;EAA0B,yBAAyB,OAAO,MAAM,GAAG,CAAC,CAAC,GAAG;GAChF;EAAE,mBAAmB;EAAO,mBAAmB;CAAM,CACvD;CAEA,MAAM,CAAC,KAAK,UAAU,cAAc,eAAe;EACjD,cAAc;EACd;EACA;CACF,CAAC;CAED,MAAM,sBAAsB,UAAkB;EAC5C,OAAO,KAAK;EACZ,WAAW,KAAK;CAClB;CAGA,MAAM,qBAAqB,cAAc;EACvC,IAAI,CAAC,kBAAkB,OAAO;EAI9B,MAAM,sBAAsB;GAC1B,IAAI;GACJ,MAAM;GACN,QALiB,IAAI,QAAQ,SAAS,KAAK,UAAU,aAKpC,CAAC,CAAC,KAAK,UAAU;IAChC,IAAI,KAAK,GAAG,YAAY;IACxB,MAAM,KAAK;IACX,UAAU;KAAC,KAAK;KAAO,KAAK;KAAI,KAAK;IAAS;IAC9C,OAAO,CAAC,EAAE,KAAK,eAAe,KAAK,IAAI;KAAE,QAAQ;KAAU,KAAK;IAAS,CAAC,EAAE,CAAC;GAC/E,EAAE;EACJ;EAEA,OAAO,eAAe,CAAC,qBAAqB,GAAG,YAAY,IAAI,CAAC,mBAAmB;CACrF,GAAG,CAAC,kBAAkB,YAAY,CAAC;CAEnC,MAAM,YAAY,OAAO,SAAS,EAAE,mBAAmB;CACvD,MAAM,aAAa,OAAO,UAAU,EAAE,oBAAoB;CAC1D,MAAM,aAAa,OAAO,UAAU,EAAE,oBAAoB;CAI1D,MAAM,QAA4B;EAChC,EAHmB,OAAO,gBAAgB,YAAY,aAAa,gBAAgB,UAGlE;GACf,KAAK;GACL,OACE,oBAAC,SAAD;IAAS,OAAO;IACd,UAAA,oBAAC,MAAD;KAAM,MAAM;KAAW,MAAM;MAAE,MAAM;MAAI,aAAa;KAAI;IAAI,CAAA;GACvD,CAAA;EAEb;EACA,eAAe;GACb,KAAK;GACL,OACE,oBAAC,SAAD;IAAS,OAAO;IACd,UAAA,oBAAC,MAAD;KAAM,MAAM;KAAY,MAAM;MAAE,MAAM;MAAI,aAAa;KAAI;IAAI,CAAA;GACxD,CAAA;EAEb;EACA,GAAG,WAAW,KAAK,SAAS;GAAE,KAAK,IAAI;GAAO,OAAO,IAAI;EAAM,EAAE;CACnE,CAAC,CAAC,OAAO,OAAO;CAEhB,MAAM,WAAW,eAAgB,SAAS,MAAM,SAAS;CAEzD,MAAM,UACJ,qBAACC,mBAAD;EACE,WAAW,GAAG,OAAO,QAAQ,cAAc;EACtC;EACL,OAAO;GACL,UAAU;GACV,YAAY,WAAW,IAAI;GAC3B,GAAG;GACH,GAAG;EACL;EACA,GAAI;EATN,UAAA;GAWG,YACC,qBAACA,mBAAD;IACE,YAAA;IACA,OAAO;IACP,WAAW,OAAO;IAClB,SAAS;IACT,eAAe;IALjB,UAAA,CAOE,oBAAC,MAAD;KACE,WAAW;KACJ;KACP,SAAS;KACT,YAAY;MACV,WAAW,OAAO;MAClB,MAAM,OAAO;MACb,MAAM,OAAO;MACb,KAAK,OAAO;KACd;KACA,WAAW,QAAQ,OAAO,GAAU;IACrC,CAAA,GACA,eACC,oBAAC,YAAD;KACE,MAAM;KACN,OAAO;KACP,MAAM;MACJ,WAAW;MACX,MAAM;KACR;KACA,eAAe;MACb,mBAAmB,aAAa;MAChC,WAAW;KACb;IACD,CAAA,CAEI;;GAEV,QAAQ,WACP,oBAAC,QAAD;IACE,QAAQ;IACF;IACA;IACN,OAAO;IACP,QAAQ,OAAO,MAAM,GAAG,CAAC,CAAC;IAC1B,aAAa,WAAW,WAAW;IACnC,iBAAiB;IACjB,kBAAkB;IAClB,OAAO,MAAM,aAAa,SAAS;IACnC,gBAAgB,MAAW,mBAAmB,EAAE,OAAO,EAAE,MAAM;GAChE,CAAA;GAEF,QAAQ,YACP,oBAAC,gBAAD;IACgB;IACP;IACA;IACP,UAAU;IACA;GACX,CAAA;GAEF,WAAW,KACT,SACC,QAAQ,KAAK,SACX,oBAACA,mBAAD;IAA0B,SAAS;IAChC,UAAA,KAAK,OAAO,kBAAkB;GACxB,GAFK,KAAK,KAEV,CAEf;EACO;;CAGX,OACE,oBAAC,SAAD;EACE,WAAW,GAAG,OAAO,OAAO;EACnB;EACI;EACb,MAAM;EACN,WAAW;EACX,SAAS;EACT,YAAY;GACV,SAAS,OAAO;GAChB,MAAM,OAAO;EACf;EACA,eAAe,MAAM;GACnB,IAAI,SAAS;GACb,WAAW,CAAC;EACd;EACA,GAAI;EAEH,UAAA,eACC,aAAa,GAAG,IAEhB,oBAAC,QAAD;GACE,QAAQ;GACR,WAAW,GAAG,OAAO,MAAM,SAAS;GAC3B;GACF;GACP,GAAI;EACL,CAAA;CAEI,CAAA;AAEb,CACF;AAEA,YAAY,cAAc"}

package/es/EmojiPicker/style.mjs

@@ -26,17 +26,40 @@ const styles = createStaticStyles(({ css, cssVar }) => ({
       background: ${cssVar.colorFillSecondary};
     }
   `,
-	tabs: css`
-    border-block-end: 1px solid ${cssVar.colorBorderSecondary};
-
-    .ant-tabs-tab {
-      display: flex;
-      align-items: center;
-      justify-content: center;
-
+	tab: css`
+    && {
       width: 32px;
       height: 32px;
-      padding: 0 !important;
+      padding: 0;
+      border-radius: ${cssVar.borderRadius};
+
+      transition: background-color 100ms ease-out;
+    }
+
+    &&:hover:not([data-disabled]) {
+      background: ${cssVar.colorFillTertiary};
+    }
+  `,
+	tabs: css`
+    border-block-end: 1px solid ${cssVar.colorBorderSecondary};
+  `,
+	tabsIndicator: css`
+    && {
+      height: 3px;
+      border-start-start-radius: 3px;
+      border-start-end-radius: 3px;
+    }
+  `,
+	tabsList: css`
+    && {
+      gap: 8px;
+      padding: 4px;
+      box-shadow: none;
+    }
+  `,
+	tabsRoot: css`
+    && {
+      width: auto;
     }
   `
 }));

package/es/EmojiPicker/style.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"style.mjs","names":[],"sources":["../../src/EmojiPicker/style.ts"],"sourcesContent":["import { createStaticStyles } from 'antd-style';\n\nexport const styles = createStaticStyles(({ css, cssVar }) => ({\n  picker: css`\n    position: relative;\n\n    em-emoji-picker {\n      --rgb-accent: var(--emoji-picker-rgb-accent, 0, 0, 0);\n      --shadow: none;\n      --rgb-background: var(--emoji-picker-rgb-background, 255, 255, 255);\n      --border-radius: 0;\n    }\n  `,\n  popover: css`\n    overflow: hidden;\n    padding: 0;\n  `,\n  positioner: css`\n    width: fit-content !important;\n  `,\n  root: css`\n    position: relative;\n    transition: background 150ms ${cssVar.motionEaseOut};\n\n    &:hover {\n      background: ${cssVar.colorFillSecondary};\n    }\n  `,\n  tabs: css`\n    border-block-end: 1px solid ${cssVar.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":";;AAEA,MAAa,SAAS,oBAAoB,EAAE,KAAK,cAAc;CAC7D,QAAQ,GAAG;;;;;;;;;;CAUX,SAAS,GAAG;;;;CAIZ,YAAY,GAAG;;;CAGf,MAAM,GAAG;;mCAEwB,OAAO,cAAc;;;oBAGpC,OAAO,mBAAmB;;;CAG5C,MAAM,GAAG;kCACuB,OAAO,qBAAqB;;;;;;;;;;;;AAY9D,EAAE"}
+{"version":3,"file":"style.mjs","names":[],"sources":["../../src/EmojiPicker/style.ts"],"sourcesContent":["import { createStaticStyles } from 'antd-style';\n\nexport const styles = createStaticStyles(({ css, cssVar }) => ({\n  picker: css`\n    position: relative;\n\n    em-emoji-picker {\n      --rgb-accent: var(--emoji-picker-rgb-accent, 0, 0, 0);\n      --shadow: none;\n      --rgb-background: var(--emoji-picker-rgb-background, 255, 255, 255);\n      --border-radius: 0;\n    }\n  `,\n  popover: css`\n    overflow: hidden;\n    padding: 0;\n  `,\n  positioner: css`\n    width: fit-content !important;\n  `,\n  root: css`\n    position: relative;\n    transition: background 150ms ${cssVar.motionEaseOut};\n\n    &:hover {\n      background: ${cssVar.colorFillSecondary};\n    }\n  `,\n  tab: css`\n    && {\n      width: 32px;\n      height: 32px;\n      padding: 0;\n      border-radius: ${cssVar.borderRadius};\n\n      transition: background-color 100ms ease-out;\n    }\n\n    &&:hover:not([data-disabled]) {\n      background: ${cssVar.colorFillTertiary};\n    }\n  `,\n  tabs: css`\n    border-block-end: 1px solid ${cssVar.colorBorderSecondary};\n  `,\n  tabsIndicator: css`\n    && {\n      height: 3px;\n      border-start-start-radius: 3px;\n      border-start-end-radius: 3px;\n    }\n  `,\n  tabsList: css`\n    && {\n      gap: 8px;\n      padding: 4px;\n      box-shadow: none;\n    }\n  `,\n  tabsRoot: css`\n    && {\n      width: auto;\n    }\n  `,\n}));\n"],"mappings":";;AAEA,MAAa,SAAS,oBAAoB,EAAE,KAAK,cAAc;CAC7D,QAAQ,GAAG;;;;;;;;;;CAUX,SAAS,GAAG;;;;CAIZ,YAAY,GAAG;;;CAGf,MAAM,GAAG;;mCAEwB,OAAO,cAAc;;;oBAGpC,OAAO,mBAAmB;;;CAG5C,KAAK,GAAG;;;;;uBAKa,OAAO,aAAa;;;;;;oBAMvB,OAAO,kBAAkB;;;CAG3C,MAAM,GAAG;kCACuB,OAAO,qBAAqB;;CAE5D,eAAe,GAAG;;;;;;;CAOlB,UAAU,GAAG;;;;;;;CAOb,UAAU,GAAG;;;;;AAKf,EAAE"}

package/es/EmojiPicker/type.d.mts

@@ -1,5 +1,6 @@
 import { FlexboxProps } from "../Flex/type.mjs";
-import { AvatarProps } from "../Avatar/type.mjs";
+import { AvatarProps } from "../base-ui/Avatar/type.mjs";
+import "../base-ui/Avatar/index.mjs";
 import { PopoverProps } from "../base-ui/Popover/type.mjs";
 import "../Popover/index.mjs";
 import { CSSProperties, ReactNode } from "react";

package/es/Form/Form.mjs

@@ -6,9 +6,9 @@ import { FormProvider } from "./components/FormProvider.mjs";
 import FormFlatGroup from "./components/FormFlatGroup.mjs";
 import { memo, useCallback, useState } from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
-import { Form } from "antd";
 import { cx, useResponsive } from "antd-style";
 import { isUndefined } from "es-toolkit/compat";
+import { Form } from "antd";
 //#region src/Form/Form.tsx
 const Form$1 = memo(({ className, itemMinWidth, footer, form, items = [], children, itemsType = "group", itemVariant, variant = "borderless", classNames, styles: customStyles, gap, style, collapsible, defaultActiveKey, initialValues, activeKey, onCollapse, onFinish, ref, layout, ...rest }) => {
 	const { mobile } = useResponsive();

package/es/Form/components/FormDivider.mjs

@@ -1,7 +1,7 @@
 "use client";
 import { jsx } from "react/jsx-runtime";
-import { Divider } from "antd";
 import { createStaticStyles, cx } from "antd-style";
+import { Divider } from "antd";
 //#region src/Form/components/FormDivider.tsx
 const styles = createStaticStyles(({ css }) => {
 	return { root: css`

package/es/Form/components/FormItem.mjs

@@ -4,8 +4,8 @@ import FormDivider from "./FormDivider.mjs";
 import FormTitle from "./FormTitle.mjs";
 import { memo, useMemo } from "react";
 import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
-import { Form } from "antd";
 import { cx } from "antd-style";
+import { Form } from "antd";
 //#region src/Form/components/FormItem.tsx
 const { Item } = Form;
 const FormItem = memo(({ desc, tag, minWidth, avatar, className, label, children, divider, layout, variant, ...rest }) => {

package/es/Form/components/FormSubmitFooter.mjs

@@ -10,9 +10,9 @@ import { useFormContext } from "./FormProvider.mjs";
 import { merge, removeUndefined } from "./merge.mjs";
 import { memo, useEffect, useMemo, useState } from "react";
 import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
-import { Form } from "antd";
 import { cssVar, cx } from "antd-style";
 import { InfoIcon } from "lucide-react";
+import { Form } from "antd";
 import isEqual from "fast-deep-equal";
 //#region src/Form/components/FormSubmitFooter.tsx
 const FormSubmitFooter = memo(({ enableReset = true, buttonProps, float, onReset, saveButtonProps, resetButtonProps, enableUnsavedWarning, children, texts, className, ...rest }) => {

package/es/Form/components/FormTitle.mjs

@@ -1,7 +1,7 @@
 "use client";
 import FlexBasic_default from "../../Flex/FlexBasic.mjs";
-import Tag from "../../Tag/Tag.mjs";
 import { titleStyles } from "../style.mjs";
+import Tag from "../../Tag/Tag.mjs";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { cx } from "antd-style";
 //#region src/Form/components/FormTitle.tsx

package/es/GroupAvatar/GroupAvatar.mjs

@@ -1,6 +1,6 @@
 "use client";
 import Block from "../Block/Block.mjs";
-import Avatar from "../Avatar/index.mjs";
+import Avatar from "../base-ui/Avatar/index.mjs";
 import Grid from "../Grid/Grid.mjs";
 import { variants } from "./style.mjs";
 import { useMemo } from "react";

package/es/GroupAvatar/GroupAvatar.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"GroupAvatar.mjs","names":[],"sources":["../../src/GroupAvatar/GroupAvatar.tsx"],"sourcesContent":["'use client';\n\nimport { cx } from 'antd-style';\nimport { type FC, useMemo } from 'react';\n\nimport Avatar from '@/Avatar';\nimport Block from '@/Block';\nimport Grid from '@/Grid';\n\nimport { variants } from './style';\nimport type { GroupAvatarProps } from './type';\n\nconst GroupAvatar: FC<GroupAvatarProps> = ({\n  className,\n  style,\n  avatars = [],\n  size = 32,\n  grid = 2,\n  cornerShape = 'square',\n  avatarShape = 'square',\n  ...rest\n}) => {\n  const calcSize = useMemo(() => {\n    const length = avatars.length;\n    const isAutoGrid = grid === 'auto';\n    const gridSize = isAutoGrid ? (length > 4 ? 3 : 2) : grid;\n    const isCircle = cornerShape === 'circle';\n    const avatarSize = Math.floor((size / gridSize) * (isCircle ? 0.65 : 0.75));\n    const gapSize = Math.floor((size - avatarSize * gridSize) / (isCircle ? 6 : 4));\n\n    return {\n      avatarSize,\n      gapSize,\n      gridSize,\n      gridWidth: avatarSize * gridSize + gapSize,\n      maxItemWidth: avatarSize - 1,\n    };\n  }, [avatars, grid, size, cornerShape]);\n\n  const calcAvatars = useMemo(\n    () => avatars?.slice(0, calcSize.gridSize * calcSize.gridSize),\n    [avatars, calcSize.gridSize],\n  );\n\n  const isSingle = calcAvatars?.length === 1;\n\n  return (\n    <Block\n      align={'center'}\n      className={cx(variants({ cornerShape }), className)}\n      height={size}\n      justify={'center'}\n      style={style}\n      width={size}\n      {...rest}\n    >\n      <Grid\n        gap={calcSize.gapSize}\n        maxItemWidth={0}\n        rows={calcSize.gridSize}\n        width={calcSize.gridWidth}\n      >\n        {calcAvatars.map((item, index) => {\n          if (typeof item === 'string')\n            return (\n              <Avatar\n                avatar={item}\n                key={index}\n                shape={avatarShape}\n                size={isSingle ? size * 0.8 : calcSize.avatarSize}\n              />\n            );\n          return (\n            <Avatar\n              key={index}\n              {...item}\n              shape={avatarShape}\n              size={isSingle ? size * 0.8 : calcSize.avatarSize}\n            />\n          );\n        })}\n      </Grid>\n    </Block>\n  );\n};\n\nexport default GroupAvatar;\n"],"mappings":";;;;;;;;;AAYA,MAAM,eAAqC,EACzC,WACA,OACA,UAAU,CAAC,GACX,OAAO,IACP,OAAO,GACP,cAAc,UACd,cAAc,UACd,GAAG,WACC;CACJ,MAAM,WAAW,cAAc;EAC7B,MAAM,SAAS,QAAQ;EAEvB,MAAM,WADa,SAAS,SACG,SAAS,IAAI,IAAI,IAAK;EACrD,MAAM,WAAW,gBAAgB;EACjC,MAAM,aAAa,KAAK,MAAO,OAAO,YAAa,WAAW,MAAO,IAAK;EAC1E,MAAM,UAAU,KAAK,OAAO,OAAO,aAAa,aAAa,WAAW,IAAI,EAAE;EAE9E,OAAO;GACL;GACA;GACA;GACA,WAAW,aAAa,WAAW;GACnC,cAAc,aAAa;EAC7B;CACF,GAAG;EAAC;EAAS;EAAM;EAAM;CAAW,CAAC;CAErC,MAAM,cAAc,cACZ,SAAS,MAAM,GAAG,SAAS,WAAW,SAAS,QAAQ,GAC7D,CAAC,SAAS,SAAS,QAAQ,CAC7B;CAEA,MAAM,WAAW,aAAa,WAAW;CAEzC,OACE,oBAAC,OAAD;EACE,OAAO;EACP,WAAW,GAAG,SAAS,EAAE,YAAY,CAAC,GAAG,SAAS;EAClD,QAAQ;EACR,SAAS;EACF;EACP,OAAO;EACP,GAAI;EAEJ,UAAA,oBAAC,MAAD;GACE,KAAK,SAAS;GACd,cAAc;GACd,MAAM,SAAS;GACf,OAAO,SAAS;GAEf,UAAA,YAAY,KAAK,MAAM,UAAU;IAChC,IAAI,OAAO,SAAS,UAClB,OACE,oBAAC,QAAD;KACE,QAAQ;KAER,OAAO;KACP,MAAM,WAAW,OAAO,KAAM,SAAS;IACxC,GAHM,KAGN;IAEL,OACE,oBAAC,QAAD;KAEE,GAAI;KACJ,OAAO;KACP,MAAM,WAAW,OAAO,KAAM,SAAS;IACxC,GAJM,KAIN;GAEL,CAAC;EACG,CAAA;CACD,CAAA;AAEX"}
+{"version":3,"file":"GroupAvatar.mjs","names":[],"sources":["../../src/GroupAvatar/GroupAvatar.tsx"],"sourcesContent":["'use client';\n\nimport { cx } from 'antd-style';\nimport { type FC, useMemo } from 'react';\n\nimport Avatar from '@/base-ui/Avatar';\nimport Block from '@/Block';\nimport Grid from '@/Grid';\n\nimport { variants } from './style';\nimport type { GroupAvatarProps } from './type';\n\nconst GroupAvatar: FC<GroupAvatarProps> = ({\n  className,\n  style,\n  avatars = [],\n  size = 32,\n  grid = 2,\n  cornerShape = 'square',\n  avatarShape = 'square',\n  ...rest\n}) => {\n  const calcSize = useMemo(() => {\n    const length = avatars.length;\n    const isAutoGrid = grid === 'auto';\n    const gridSize = isAutoGrid ? (length > 4 ? 3 : 2) : grid;\n    const isCircle = cornerShape === 'circle';\n    const avatarSize = Math.floor((size / gridSize) * (isCircle ? 0.65 : 0.75));\n    const gapSize = Math.floor((size - avatarSize * gridSize) / (isCircle ? 6 : 4));\n\n    return {\n      avatarSize,\n      gapSize,\n      gridSize,\n      gridWidth: avatarSize * gridSize + gapSize,\n      maxItemWidth: avatarSize - 1,\n    };\n  }, [avatars, grid, size, cornerShape]);\n\n  const calcAvatars = useMemo(\n    () => avatars?.slice(0, calcSize.gridSize * calcSize.gridSize),\n    [avatars, calcSize.gridSize],\n  );\n\n  const isSingle = calcAvatars?.length === 1;\n\n  return (\n    <Block\n      align={'center'}\n      className={cx(variants({ cornerShape }), className)}\n      height={size}\n      justify={'center'}\n      style={style}\n      width={size}\n      {...rest}\n    >\n      <Grid\n        gap={calcSize.gapSize}\n        maxItemWidth={0}\n        rows={calcSize.gridSize}\n        width={calcSize.gridWidth}\n      >\n        {calcAvatars.map((item, index) => {\n          if (typeof item === 'string')\n            return (\n              <Avatar\n                avatar={item}\n                key={index}\n                shape={avatarShape}\n                size={isSingle ? size * 0.8 : calcSize.avatarSize}\n              />\n            );\n          return (\n            <Avatar\n              key={index}\n              {...item}\n              shape={avatarShape}\n              size={isSingle ? size * 0.8 : calcSize.avatarSize}\n            />\n          );\n        })}\n      </Grid>\n    </Block>\n  );\n};\n\nexport default GroupAvatar;\n"],"mappings":";;;;;;;;;AAYA,MAAM,eAAqC,EACzC,WACA,OACA,UAAU,CAAC,GACX,OAAO,IACP,OAAO,GACP,cAAc,UACd,cAAc,UACd,GAAG,WACC;CACJ,MAAM,WAAW,cAAc;EAC7B,MAAM,SAAS,QAAQ;EAEvB,MAAM,WADa,SAAS,SACG,SAAS,IAAI,IAAI,IAAK;EACrD,MAAM,WAAW,gBAAgB;EACjC,MAAM,aAAa,KAAK,MAAO,OAAO,YAAa,WAAW,MAAO,IAAK;EAC1E,MAAM,UAAU,KAAK,OAAO,OAAO,aAAa,aAAa,WAAW,IAAI,EAAE;EAE9E,OAAO;GACL;GACA;GACA;GACA,WAAW,aAAa,WAAW;GACnC,cAAc,aAAa;EAC7B;CACF,GAAG;EAAC;EAAS;EAAM;EAAM;CAAW,CAAC;CAErC,MAAM,cAAc,cACZ,SAAS,MAAM,GAAG,SAAS,WAAW,SAAS,QAAQ,GAC7D,CAAC,SAAS,SAAS,QAAQ,CAC7B;CAEA,MAAM,WAAW,aAAa,WAAW;CAEzC,OACE,oBAAC,OAAD;EACE,OAAO;EACP,WAAW,GAAG,SAAS,EAAE,YAAY,CAAC,GAAG,SAAS;EAClD,QAAQ;EACR,SAAS;EACF;EACP,OAAO;EACP,GAAI;EAEJ,UAAA,oBAAC,MAAD;GACE,KAAK,SAAS;GACd,cAAc;GACd,MAAM,SAAS;GACf,OAAO,SAAS;GAEf,UAAA,YAAY,KAAK,MAAM,UAAU;IAChC,IAAI,OAAO,SAAS,UAClB,OACE,oBAAC,QAAD;KACE,QAAQ;KAER,OAAO;KACP,MAAM,WAAW,OAAO,KAAM,SAAS;IACxC,GAHM,KAGN;IAEL,OACE,oBAAC,QAAD;KAEE,GAAI;KACJ,OAAO;KACP,MAAM,WAAW,OAAO,KAAM,SAAS;IACxC,GAJM,KAIN;GAEL,CAAC;EACG,CAAA;CACD,CAAA;AAEX"}

package/es/GroupAvatar/type.d.mts

@@ -1,5 +1,6 @@
 import { BlockProps } from "../Block/type.mjs";
-import { AvatarProps } from "../Avatar/type.mjs";
+import { AvatarProps } from "../base-ui/Avatar/type.mjs";
+import "../base-ui/Avatar/index.mjs";
 import { SMOOTH_CORNER_MASKS } from "../utils/smoothCorners.mjs";
 import { Ref } from "react";
 //#region src/GroupAvatar/type.d.ts

package/es/Highlighter/Highlighter.mjs

@@ -1,6 +1,6 @@
 "use client";
 import FlexBasic_default from "../Flex/FlexBasic.mjs";
-import Tag from "../Tag/Tag.mjs";
+import Tag from "../base-ui/Tag/Tag.mjs";
 import { getCodeLanguageDisplayName } from "./const.mjs";
 import SyntaxHighlighter from "./SyntaxHighlighter/index.mjs";
 import CopyButton from "../CopyButton/CopyButton.mjs";

package/es/Highlighter/Highlighter.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"Highlighter.mjs","names":["FullFeatured","Flexbox"],"sources":["../../src/Highlighter/Highlighter.tsx"],"sourcesContent":["'use client';\n\nimport { cx } from 'antd-style';\nimport { memo, useCallback, useEffect, useMemo, useRef, useState } from 'react';\n\nimport CopyButton from '@/CopyButton';\nimport { Flexbox } from '@/Flex';\nimport { getCodeLanguageDisplayName } from '@/Highlighter/const';\nimport Tag from '@/Tag';\n\nimport FullFeatured from './FullFeatured';\nimport { styles, variants } from './style';\nimport SyntaxHighlighter from './SyntaxHighlighter';\nimport { type HighlighterProps } from './type';\n\nexport const Highlighter = memo<HighlighterProps>(\n  ({\n    animated,\n    fullFeatured,\n    actionIconSize,\n    children,\n    language = 'markdown',\n    className,\n    classNames,\n    styles: customStyles,\n    copyable = true,\n    showLanguage = true,\n    variant = 'filled',\n    shadow,\n    wrap,\n    bodyRender,\n    actionsRender,\n    enableTransformer,\n    theme,\n    icon,\n    fileName,\n    allowChangeLanguage,\n    defaultExpand = true,\n    ...rest\n  }) => {\n    const [lang, setLang] = useState(language);\n\n    // Safely handle children with boundary check\n    const tirmedChildren = useMemo(() => {\n      if (children === null || children === undefined) return '';\n      if (typeof children !== 'string') {\n        console.warn('Highlighter: children should be a string, received:', typeof children);\n        return String(children);\n      }\n      return children.trim();\n    }, [children]);\n\n    const copyContentRef = useRef(tirmedChildren);\n\n    useEffect(() => {\n      copyContentRef.current = tirmedChildren;\n    }, [tirmedChildren]);\n\n    const getCopyContent = useCallback(() => copyContentRef.current, []);\n\n    const originalActions = useMemo(() => {\n      if (!copyable) return null;\n      return (\n        <CopyButton\n          glass\n          content={getCopyContent}\n          size={actionIconSize || { blockSize: 28, size: 16 }}\n        />\n      );\n    }, [actionIconSize, copyable, getCopyContent]);\n\n    const actions = useMemo(() => {\n      if (!actionsRender) return originalActions;\n      return actionsRender({\n        actionIconSize,\n        content: tirmedChildren,\n        getContent: getCopyContent,\n        language: lang,\n        originalNode: originalActions,\n      });\n    }, [actionIconSize, actionsRender, getCopyContent, lang, originalActions, tirmedChildren]);\n\n    const originalBody = useMemo(\n      () => (\n        <SyntaxHighlighter\n          animated={animated}\n          className={classNames?.content}\n          enableTransformer={enableTransformer}\n          language={lang?.toLowerCase()}\n          theme={theme}\n          variant={variant}\n          style={{\n            height: '100%',\n            ...customStyles?.content,\n          }}\n        >\n          {tirmedChildren}\n        </SyntaxHighlighter>\n      ),\n      [\n        animated,\n        enableTransformer,\n        lang,\n        theme,\n        tirmedChildren,\n        variant,\n        customStyles?.content,\n        customStyles?.content,\n      ],\n    );\n\n    const displayName = useMemo(() => {\n      if (fileName) return fileName;\n      return getCodeLanguageDisplayName(language);\n    }, [fileName, language]);\n\n    const body = useMemo(() => {\n      if (!bodyRender) return originalBody;\n      return bodyRender({ content: tirmedChildren, language: lang, originalNode: originalBody });\n    }, [bodyRender, lang, originalBody, tirmedChildren]);\n\n    if (fullFeatured)\n      return (\n        <FullFeatured\n          actionsRender={actionsRender}\n          allowChangeLanguage={allowChangeLanguage}\n          className={className}\n          classNames={classNames}\n          content={tirmedChildren}\n          copyable={copyable}\n          defaultExpand={defaultExpand}\n          fileName={fileName}\n          icon={icon}\n          language={language}\n          setLanguage={setLang}\n          shadow={shadow}\n          showLanguage={showLanguage}\n          styles={customStyles}\n          variant={variant}\n          wrap={wrap}\n          {...rest}\n        >\n          {body}\n        </FullFeatured>\n      );\n\n    return (\n      <Flexbox\n        className={cx(variants({ shadow, variant, wrap }), className)}\n        data-code-type=\"highlighter\"\n        {...rest}\n      >\n        <Flexbox horizontal align={'center'} className={styles.actions} flex={'none'} gap={4}>\n          {actions}\n        </Flexbox>\n        {showLanguage && language && <Tag className={styles.lang}>{displayName}</Tag>}\n        {body}\n      </Flexbox>\n    );\n  },\n);\n\nHighlighter.displayName = 'Highlighter';\n\nexport default Highlighter;\n"],"mappings":";;;;;;;;;;;;AAeA,MAAa,cAAc,MACxB,EACC,UACA,cACA,gBACA,UACA,WAAW,YACX,WACA,YACA,QAAQ,cACR,WAAW,MACX,eAAe,MACf,UAAU,UACV,QACA,MACA,YACA,eACA,mBACA,OACA,MACA,UACA,qBACA,gBAAgB,MAChB,GAAG,WACC;CACJ,MAAM,CAAC,MAAM,WAAW,SAAS,QAAQ;CAGzC,MAAM,iBAAiB,cAAc;EACnC,IAAI,aAAa,QAAQ,aAAa,KAAA,GAAW,OAAO;EACxD,IAAI,OAAO,aAAa,UAAU;GAChC,QAAQ,KAAK,uDAAuD,OAAO,QAAQ;GACnF,OAAO,OAAO,QAAQ;EACxB;EACA,OAAO,SAAS,KAAK;CACvB,GAAG,CAAC,QAAQ,CAAC;CAEb,MAAM,iBAAiB,OAAO,cAAc;CAE5C,gBAAgB;EACd,eAAe,UAAU;CAC3B,GAAG,CAAC,cAAc,CAAC;CAEnB,MAAM,iBAAiB,kBAAkB,eAAe,SAAS,CAAC,CAAC;CAEnE,MAAM,kBAAkB,cAAc;EACpC,IAAI,CAAC,UAAU,OAAO;EACtB,OACE,oBAAC,YAAD;GACE,OAAA;GACA,SAAS;GACT,MAAM,kBAAkB;IAAE,WAAW;IAAI,MAAM;GAAG;EACnD,CAAA;CAEL,GAAG;EAAC;EAAgB;EAAU;CAAc,CAAC;CAE7C,MAAM,UAAU,cAAc;EAC5B,IAAI,CAAC,eAAe,OAAO;EAC3B,OAAO,cAAc;GACnB;GACA,SAAS;GACT,YAAY;GACZ,UAAU;GACV,cAAc;EAChB,CAAC;CACH,GAAG;EAAC;EAAgB;EAAe;EAAgB;EAAM;EAAiB;CAAc,CAAC;CAEzF,MAAM,eAAe,cAEjB,oBAAC,mBAAD;EACY;EACV,WAAW,YAAY;EACJ;EACnB,UAAU,MAAM,YAAY;EACrB;EACE;EACT,OAAO;GACL,QAAQ;GACR,GAAG,cAAc;EACnB;EAEC,UAAA;CACgB,CAAA,GAErB;EACE;EACA;EACA;EACA;EACA;EACA;EACA,cAAc;EACd,cAAc;CAChB,CACF;CAEA,MAAM,cAAc,cAAc;EAChC,IAAI,UAAU,OAAO;EACrB,OAAO,2BAA2B,QAAQ;CAC5C,GAAG,CAAC,UAAU,QAAQ,CAAC;CAEvB,MAAM,OAAO,cAAc;EACzB,IAAI,CAAC,YAAY,OAAO;EACxB,OAAO,WAAW;GAAE,SAAS;GAAgB,UAAU;GAAM,cAAc;EAAa,CAAC;CAC3F,GAAG;EAAC;EAAY;EAAM;EAAc;CAAc,CAAC;CAEnD,IAAI,cACF,OACE,oBAACA,yBAAD;EACiB;EACM;EACV;EACC;EACZ,SAAS;EACC;EACK;EACL;EACJ;EACI;EACV,aAAa;EACL;EACM;EACd,QAAQ;EACC;EACH;EACN,GAAI;EAEH,UAAA;CACW,CAAA;CAGlB,OACE,qBAACC,mBAAD;EACE,WAAW,GAAG,SAAS;GAAE;GAAQ;GAAS;EAAK,CAAC,GAAG,SAAS;EAC5D,kBAAe;EACf,GAAI;EAHN,UAAA;GAKE,oBAACA,mBAAD;IAAS,YAAA;IAAW,OAAO;IAAU,WAAW,OAAO;IAAS,MAAM;IAAQ,KAAK;IAChF,UAAA;GACM,CAAA;GACR,gBAAgB,YAAY,oBAAC,KAAD;IAAK,WAAW,OAAO;IAAO,UAAA;GAAiB,CAAA;GAC3E;EACM;;AAEb,CACF;AAEA,YAAY,cAAc"}
+{"version":3,"file":"Highlighter.mjs","names":["FullFeatured","Flexbox"],"sources":["../../src/Highlighter/Highlighter.tsx"],"sourcesContent":["'use client';\n\nimport { cx } from 'antd-style';\nimport { memo, useCallback, useEffect, useMemo, useRef, useState } from 'react';\n\nimport Tag from '@/base-ui/Tag';\nimport CopyButton from '@/CopyButton';\nimport { Flexbox } from '@/Flex';\nimport { getCodeLanguageDisplayName } from '@/Highlighter/const';\n\nimport FullFeatured from './FullFeatured';\nimport { styles, variants } from './style';\nimport SyntaxHighlighter from './SyntaxHighlighter';\nimport { type HighlighterProps } from './type';\n\nexport const Highlighter = memo<HighlighterProps>(\n  ({\n    animated,\n    fullFeatured,\n    actionIconSize,\n    children,\n    language = 'markdown',\n    className,\n    classNames,\n    styles: customStyles,\n    copyable = true,\n    showLanguage = true,\n    variant = 'filled',\n    shadow,\n    wrap,\n    bodyRender,\n    actionsRender,\n    enableTransformer,\n    theme,\n    icon,\n    fileName,\n    allowChangeLanguage,\n    defaultExpand = true,\n    ...rest\n  }) => {\n    const [lang, setLang] = useState(language);\n\n    // Safely handle children with boundary check\n    const tirmedChildren = useMemo(() => {\n      if (children === null || children === undefined) return '';\n      if (typeof children !== 'string') {\n        console.warn('Highlighter: children should be a string, received:', typeof children);\n        return String(children);\n      }\n      return children.trim();\n    }, [children]);\n\n    const copyContentRef = useRef(tirmedChildren);\n\n    useEffect(() => {\n      copyContentRef.current = tirmedChildren;\n    }, [tirmedChildren]);\n\n    const getCopyContent = useCallback(() => copyContentRef.current, []);\n\n    const originalActions = useMemo(() => {\n      if (!copyable) return null;\n      return (\n        <CopyButton\n          glass\n          content={getCopyContent}\n          size={actionIconSize || { blockSize: 28, size: 16 }}\n        />\n      );\n    }, [actionIconSize, copyable, getCopyContent]);\n\n    const actions = useMemo(() => {\n      if (!actionsRender) return originalActions;\n      return actionsRender({\n        actionIconSize,\n        content: tirmedChildren,\n        getContent: getCopyContent,\n        language: lang,\n        originalNode: originalActions,\n      });\n    }, [actionIconSize, actionsRender, getCopyContent, lang, originalActions, tirmedChildren]);\n\n    const originalBody = useMemo(\n      () => (\n        <SyntaxHighlighter\n          animated={animated}\n          className={classNames?.content}\n          enableTransformer={enableTransformer}\n          language={lang?.toLowerCase()}\n          theme={theme}\n          variant={variant}\n          style={{\n            height: '100%',\n            ...customStyles?.content,\n          }}\n        >\n          {tirmedChildren}\n        </SyntaxHighlighter>\n      ),\n      [\n        animated,\n        enableTransformer,\n        lang,\n        theme,\n        tirmedChildren,\n        variant,\n        customStyles?.content,\n        customStyles?.content,\n      ],\n    );\n\n    const displayName = useMemo(() => {\n      if (fileName) return fileName;\n      return getCodeLanguageDisplayName(language);\n    }, [fileName, language]);\n\n    const body = useMemo(() => {\n      if (!bodyRender) return originalBody;\n      return bodyRender({ content: tirmedChildren, language: lang, originalNode: originalBody });\n    }, [bodyRender, lang, originalBody, tirmedChildren]);\n\n    if (fullFeatured)\n      return (\n        <FullFeatured\n          actionsRender={actionsRender}\n          allowChangeLanguage={allowChangeLanguage}\n          className={className}\n          classNames={classNames}\n          content={tirmedChildren}\n          copyable={copyable}\n          defaultExpand={defaultExpand}\n          fileName={fileName}\n          icon={icon}\n          language={language}\n          setLanguage={setLang}\n          shadow={shadow}\n          showLanguage={showLanguage}\n          styles={customStyles}\n          variant={variant}\n          wrap={wrap}\n          {...rest}\n        >\n          {body}\n        </FullFeatured>\n      );\n\n    return (\n      <Flexbox\n        className={cx(variants({ shadow, variant, wrap }), className)}\n        data-code-type=\"highlighter\"\n        {...rest}\n      >\n        <Flexbox horizontal align={'center'} className={styles.actions} flex={'none'} gap={4}>\n          {actions}\n        </Flexbox>\n        {showLanguage && language && <Tag className={styles.lang}>{displayName}</Tag>}\n        {body}\n      </Flexbox>\n    );\n  },\n);\n\nHighlighter.displayName = 'Highlighter';\n\nexport default Highlighter;\n"],"mappings":";;;;;;;;;;;;AAeA,MAAa,cAAc,MACxB,EACC,UACA,cACA,gBACA,UACA,WAAW,YACX,WACA,YACA,QAAQ,cACR,WAAW,MACX,eAAe,MACf,UAAU,UACV,QACA,MACA,YACA,eACA,mBACA,OACA,MACA,UACA,qBACA,gBAAgB,MAChB,GAAG,WACC;CACJ,MAAM,CAAC,MAAM,WAAW,SAAS,QAAQ;CAGzC,MAAM,iBAAiB,cAAc;EACnC,IAAI,aAAa,QAAQ,aAAa,KAAA,GAAW,OAAO;EACxD,IAAI,OAAO,aAAa,UAAU;GAChC,QAAQ,KAAK,uDAAuD,OAAO,QAAQ;GACnF,OAAO,OAAO,QAAQ;EACxB;EACA,OAAO,SAAS,KAAK;CACvB,GAAG,CAAC,QAAQ,CAAC;CAEb,MAAM,iBAAiB,OAAO,cAAc;CAE5C,gBAAgB;EACd,eAAe,UAAU;CAC3B,GAAG,CAAC,cAAc,CAAC;CAEnB,MAAM,iBAAiB,kBAAkB,eAAe,SAAS,CAAC,CAAC;CAEnE,MAAM,kBAAkB,cAAc;EACpC,IAAI,CAAC,UAAU,OAAO;EACtB,OACE,oBAAC,YAAD;GACE,OAAA;GACA,SAAS;GACT,MAAM,kBAAkB;IAAE,WAAW;IAAI,MAAM;GAAG;EACnD,CAAA;CAEL,GAAG;EAAC;EAAgB;EAAU;CAAc,CAAC;CAE7C,MAAM,UAAU,cAAc;EAC5B,IAAI,CAAC,eAAe,OAAO;EAC3B,OAAO,cAAc;GACnB;GACA,SAAS;GACT,YAAY;GACZ,UAAU;GACV,cAAc;EAChB,CAAC;CACH,GAAG;EAAC;EAAgB;EAAe;EAAgB;EAAM;EAAiB;CAAc,CAAC;CAEzF,MAAM,eAAe,cAEjB,oBAAC,mBAAD;EACY;EACV,WAAW,YAAY;EACJ;EACnB,UAAU,MAAM,YAAY;EACrB;EACE;EACT,OAAO;GACL,QAAQ;GACR,GAAG,cAAc;EACnB;EAEC,UAAA;CACgB,CAAA,GAErB;EACE;EACA;EACA;EACA;EACA;EACA;EACA,cAAc;EACd,cAAc;CAChB,CACF;CAEA,MAAM,cAAc,cAAc;EAChC,IAAI,UAAU,OAAO;EACrB,OAAO,2BAA2B,QAAQ;CAC5C,GAAG,CAAC,UAAU,QAAQ,CAAC;CAEvB,MAAM,OAAO,cAAc;EACzB,IAAI,CAAC,YAAY,OAAO;EACxB,OAAO,WAAW;GAAE,SAAS;GAAgB,UAAU;GAAM,cAAc;EAAa,CAAC;CAC3F,GAAG;EAAC;EAAY;EAAM;EAAc;CAAc,CAAC;CAEnD,IAAI,cACF,OACE,oBAACA,yBAAD;EACiB;EACM;EACV;EACC;EACZ,SAAS;EACC;EACK;EACL;EACJ;EACI;EACV,aAAa;EACL;EACM;EACd,QAAQ;EACC;EACH;EACN,GAAI;EAEH,UAAA;CACW,CAAA;CAGlB,OACE,qBAACC,mBAAD;EACE,WAAW,GAAG,SAAS;GAAE;GAAQ;GAAS;EAAK,CAAC,GAAG,SAAS;EAC5D,kBAAe;EACf,GAAI;EAHN,UAAA;GAKE,oBAACA,mBAAD;IAAS,YAAA;IAAW,OAAO;IAAU,WAAW,OAAO;IAAS,MAAM;IAAQ,KAAK;IAChF,UAAA;GACM,CAAA;GACR,gBAAgB,YAAY,oBAAC,KAAD;IAAK,WAAW,OAAO;IAAO,UAAA;GAAiB,CAAA;GAC3E;EACM;;AAEb,CACF;AAEA,YAAY,cAAc"}

package/es/Highlighter/LangSelect.mjs

@@ -2,15 +2,14 @@
 import FlexBasic_default from "../Flex/FlexBasic.mjs";
 import Text from "../Text/Text.mjs";
 import { stopPropagation } from "../utils/dom.mjs";
+import Select from "../base-ui/Select/Select.mjs";
 import MaterialFileTypeIcon from "../MaterialFileTypeIcon/MaterialFileTypeIcon.mjs";
 import { memo, useMemo } from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
-import { Select } from "antd";
 import { bundledLanguagesInfo } from "shiki";
 //#region src/Highlighter/LangSelect.tsx
-const LangSelect = memo(({ ...rest }) => {
+const LangSelect = memo(({ style, ...rest }) => {
 	const options = useMemo(() => [{
-		aliases: ["text", "txt"],
 		label: /* @__PURE__ */ jsxs(FlexBasic_default, {
 			horizontal: true,
 			align: "center",
@@ -27,9 +26,9 @@ const LangSelect = memo(({ ...rest }) => {
 				children: "Plaintext"
 			})]
 		}),
+		title: "Plaintext,plaintext,*.text,*.txt",
 		value: "plaintext"
 	}, ...bundledLanguagesInfo.map((item) => ({
-		aliases: item.aliases,
 		label: /* @__PURE__ */ jsxs(FlexBasic_default, {
 			horizontal: true,
 			align: "center",
@@ -46,22 +45,33 @@ const LangSelect = memo(({ ...rest }) => {
 				children: item.name
 			})]
 		}),
-		title: (item.aliases || [item.id]).filter(Boolean).map((item) => `*.${item}`).join(","),
+		title: [
+			item.name,
+			item.id,
+			...(item.aliases || []).map((alias) => `*.${alias}`)
+		].join(","),
 		value: item.id
 	}))], []);
-	return /* @__PURE__ */ jsx(Select, {
-		showSearch: true,
-		className: "language-title",
-		options,
-		size: "small",
-		suffixIcon: false,
-		variant: "borderless",
+	return /* @__PURE__ */ jsx("div", {
 		style: {
 			maxWidth: 240,
 			width: "100%"
 		},
 		onClick: stopPropagation,
-		...rest
+		children: /* @__PURE__ */ jsx(Select, {
+			showSearch: true,
+			virtual: true,
+			className: "language-title",
+			options,
+			size: "small",
+			style: {
+				width: "100%",
+				...style
+			},
+			suffixIcon: null,
+			variant: "borderless",
+			...rest
+		})
 	});
 });
 //#endregion