@lobehub/ui 5.57.2 → 6.0.0-beta.1

package/es/EditorSlashMenu/atoms.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"atoms.mjs","names":["styles","menuStyles"],"sources":["../../src/EditorSlashMenu/atoms.tsx"],"sourcesContent":["'use client';\n\nimport { Autocomplete } from '@base-ui/react/autocomplete';\nimport { cx } from 'antd-style';\nimport type React from 'react';\n\nimport { styles as menuStyles } from '@/base-ui/DropdownMenu/sharedStyle';\nimport { useAppElement } from '@/ThemeProvider';\n\nimport { styles } from './style';\n\nconst mergeStateClassName = <TState,>(\n  base: string,\n  className: string | ((state: TState) => string | undefined) | undefined,\n) => {\n  if (typeof className === 'function') return (state: TState) => cx(base, className(state));\n  return cx(base, className);\n};\n\nexport const EditorSlashMenuRoot = Autocomplete.Root;\nexport const EditorSlashMenuList = ({\n  ref,\n  className,\n  ...rest\n}: React.ComponentProps<typeof Autocomplete.List> & {\n  ref?: React.RefObject<HTMLDivElement | null>;\n}) => {\n  return (\n    <Autocomplete.List\n      {...rest}\n      className={mergeStateClassName(cx(styles.list), className as any) as any}\n      ref={ref}\n    />\n  );\n};\nEditorSlashMenuList.displayName = 'EditorSlashMenuList';\n\nexport type EditorSlashMenuPortalProps = React.ComponentProps<typeof Autocomplete.Portal> & {\n  /**\n   * When `container` is not provided, it uses a shared container created by `usePortalContainer`.\n   */\n  container?: HTMLElement | null;\n};\n\nexport const EditorSlashMenuPortal = ({ container, ...rest }: EditorSlashMenuPortalProps) => {\n  const appElement = useAppElement();\n  return <Autocomplete.Portal container={container ?? appElement ?? undefined} {...rest} />;\n};\nEditorSlashMenuPortal.displayName = 'EditorSlashMenuPortal';\n\nexport type EditorSlashMenuPositionerProps = React.ComponentProps<typeof Autocomplete.Positioner>;\n\nexport const EditorSlashMenuPositioner = ({\n  className,\n  align,\n  positionMethod,\n  side,\n  sideOffset,\n  ...rest\n}: EditorSlashMenuPositionerProps) => {\n  return (\n    <Autocomplete.Positioner\n      {...rest}\n      align={align ?? 'start'}\n      className={mergeStateClassName(menuStyles.positioner, className as any) as any}\n      positionMethod={positionMethod ?? 'fixed'}\n      side={side ?? 'bottom'}\n      sideOffset={sideOffset ?? 6}\n    />\n  );\n};\nEditorSlashMenuPositioner.displayName = 'EditorSlashMenuPositioner';\n\nexport type EditorSlashMenuPopupProps = React.ComponentProps<typeof Autocomplete.Popup>;\n\nexport const EditorSlashMenuPopup = ({\n  className,\n  initialFocus = false,\n  ...rest\n}: EditorSlashMenuPopupProps) => {\n  return (\n    <Autocomplete.Popup\n      {...rest}\n      className={mergeStateClassName(menuStyles.popup, className as any) as any}\n      initialFocus={initialFocus}\n    />\n  );\n};\nEditorSlashMenuPopup.displayName = 'EditorSlashMenuPopup';\n\nexport type EditorSlashMenuItemProps = React.ComponentProps<typeof Autocomplete.Item> & {\n  danger?: boolean;\n};\n\nexport const EditorSlashMenuItem = ({ className, danger, ...rest }: EditorSlashMenuItemProps) => {\n  return (\n    <Autocomplete.Item\n      {...rest}\n      className={(state) =>\n        cx(\n          menuStyles.item,\n          danger && menuStyles.danger,\n          typeof className === 'function' ? className(state) : className,\n        )\n      }\n    />\n  );\n};\nEditorSlashMenuItem.displayName = 'EditorSlashMenuItem';\n\nexport type EditorSlashMenuGroupProps = React.ComponentProps<typeof Autocomplete.Group>;\nexport const EditorSlashMenuGroup = Autocomplete.Group;\n\nexport type EditorSlashMenuGroupLabelProps = React.ComponentProps<typeof Autocomplete.GroupLabel>;\n\nexport const EditorSlashMenuGroupLabel = ({\n  className,\n  ...rest\n}: EditorSlashMenuGroupLabelProps) => {\n  return (\n    <Autocomplete.GroupLabel\n      {...rest}\n      className={(state) =>\n        cx(menuStyles.groupLabel, typeof className === 'function' ? className(state) : className)\n      }\n    />\n  );\n};\nEditorSlashMenuGroupLabel.displayName = 'EditorSlashMenuGroupLabel';\n\nexport type EditorSlashMenuEmptyProps = React.ComponentProps<typeof Autocomplete.Empty>;\n\nexport const EditorSlashMenuEmpty = ({ className, ...rest }: EditorSlashMenuEmptyProps) => {\n  return (\n    <Autocomplete.Empty\n      {...rest}\n      className={(state) =>\n        cx(\n          menuStyles.item,\n          menuStyles.empty,\n          typeof className === 'function' ? className(state) : className,\n        )\n      }\n    />\n  );\n};\nEditorSlashMenuEmpty.displayName = 'EditorSlashMenuEmpty';\n\nexport type EditorSlashMenuItemContentProps = React.HTMLAttributes<HTMLDivElement>;\nexport const EditorSlashMenuItemContent = ({\n  className,\n  ...rest\n}: EditorSlashMenuItemContentProps) => {\n  return <div {...rest} className={cx(menuStyles.itemContent, className)} />;\n};\nEditorSlashMenuItemContent.displayName = 'EditorSlashMenuItemContent';\n\nexport type EditorSlashMenuItemIconProps = React.HTMLAttributes<HTMLSpanElement>;\nexport const EditorSlashMenuItemIcon = ({ className, ...rest }: EditorSlashMenuItemIconProps) => {\n  return <span {...rest} className={cx(menuStyles.icon, className)} />;\n};\nEditorSlashMenuItemIcon.displayName = 'EditorSlashMenuItemIcon';\n\nexport type EditorSlashMenuItemLabelProps = React.HTMLAttributes<HTMLSpanElement>;\nexport const EditorSlashMenuItemLabel = ({ className, ...rest }: EditorSlashMenuItemLabelProps) => {\n  return <span {...rest} className={cx(menuStyles.label, className)} />;\n};\nEditorSlashMenuItemLabel.displayName = 'EditorSlashMenuItemLabel';\n\nexport type EditorSlashMenuItemExtraProps = React.HTMLAttributes<HTMLSpanElement>;\nexport const EditorSlashMenuItemExtra = ({ className, ...rest }: EditorSlashMenuItemExtraProps) => {\n  return <span {...rest} className={cx(menuStyles.extra, className)} />;\n};\nEditorSlashMenuItemExtra.displayName = 'EditorSlashMenuItemExtra';\n\nexport type EditorSlashMenuHiddenInputProps = React.ComponentProps<typeof Autocomplete.Input>;\nexport const EditorSlashMenuHiddenInput = ({\n  className,\n  ...rest\n}: EditorSlashMenuHiddenInputProps) => {\n  return (\n    <Autocomplete.Input\n      {...rest}\n      className={mergeStateClassName(cx(styles.hiddenInput), className as any) as any}\n    />\n  );\n};\nEditorSlashMenuHiddenInput.displayName = 'EditorSlashMenuHiddenInput';\n"],"mappings":"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"}
+{"version":3,"file":"atoms.mjs","names":[],"sources":["../../src/EditorSlashMenu/atoms.tsx"],"sourcesContent":["'use client';\n\nimport { Autocomplete } from '@base-ui/react/autocomplete';\nimport * as stylex from '@stylexjs/stylex';\nimport clsx from 'clsx';\nimport type React from 'react';\n\nimport { useAppElement } from '@/ConfigProvider';\nimport { menuClassNames, menuStyles } from '@/DropdownMenu/sharedStyle';\nimport { type styleProps } from '@/styles/stylex/props';\n\nimport { styles } from './style';\n\nconst mergeStateClassName = <TState,>(\n  base: string,\n  className: string | ((state: TState) => string | undefined) | undefined,\n) => {\n  if (typeof className === 'function') return (state: TState) => clsx(base, className(state));\n  return clsx(base, className);\n};\n\nconst sx = (styles: Parameters<typeof styleProps>[0]) => stylex.props(styles).className ?? '';\n\nexport const EditorSlashMenuRoot = Autocomplete.Root;\nexport const EditorSlashMenuList = ({\n  ref,\n  className,\n  ...rest\n}: React.ComponentProps<typeof Autocomplete.List> & {\n  ref?: React.RefObject<HTMLDivElement | null>;\n}) => {\n  return (\n    <Autocomplete.List\n      {...rest}\n      className={mergeStateClassName(sx(styles.list), className as any) as any}\n      ref={ref}\n    />\n  );\n};\nEditorSlashMenuList.displayName = 'EditorSlashMenuList';\n\nexport type EditorSlashMenuPortalProps = React.ComponentProps<typeof Autocomplete.Portal> & {\n  /**\n   * When `container` is not provided, it uses a shared container created by `usePortalContainer`.\n   */\n  container?: HTMLElement | null;\n};\n\nexport const EditorSlashMenuPortal = ({ container, ...rest }: EditorSlashMenuPortalProps) => {\n  const appElement = useAppElement();\n  return <Autocomplete.Portal container={container ?? appElement ?? undefined} {...rest} />;\n};\nEditorSlashMenuPortal.displayName = 'EditorSlashMenuPortal';\n\nexport type EditorSlashMenuPositionerProps = React.ComponentProps<typeof Autocomplete.Positioner>;\n\nexport const EditorSlashMenuPositioner = ({\n  className,\n  align,\n  positionMethod,\n  side,\n  sideOffset,\n  ...rest\n}: EditorSlashMenuPositionerProps) => {\n  return (\n    <Autocomplete.Positioner\n      {...rest}\n      align={align ?? 'start'}\n      positionMethod={positionMethod ?? 'fixed'}\n      side={side ?? 'bottom'}\n      sideOffset={sideOffset ?? 6}\n      className={\n        mergeStateClassName(\n          clsx(sx(menuStyles.positioner), menuClassNames.positioner),\n          className as any,\n        ) as any\n      }\n    />\n  );\n};\nEditorSlashMenuPositioner.displayName = 'EditorSlashMenuPositioner';\n\nexport type EditorSlashMenuPopupProps = React.ComponentProps<typeof Autocomplete.Popup>;\n\nexport const EditorSlashMenuPopup = ({\n  className,\n  initialFocus = false,\n  ...rest\n}: EditorSlashMenuPopupProps) => {\n  return (\n    <Autocomplete.Popup\n      {...rest}\n      initialFocus={initialFocus}\n      className={\n        mergeStateClassName(\n          clsx(sx(menuStyles.popup), menuClassNames.popup),\n          className as any,\n        ) as any\n      }\n    />\n  );\n};\nEditorSlashMenuPopup.displayName = 'EditorSlashMenuPopup';\n\nexport type EditorSlashMenuItemProps = React.ComponentProps<typeof Autocomplete.Item> & {\n  danger?: boolean;\n};\n\nexport const EditorSlashMenuItem = ({ className, danger, ...rest }: EditorSlashMenuItemProps) => {\n  return (\n    <Autocomplete.Item\n      {...rest}\n      className={(state) =>\n        clsx(\n          sx([menuStyles.item, danger && menuStyles.danger]),\n          typeof className === 'function' ? className(state) : className,\n        )\n      }\n    />\n  );\n};\nEditorSlashMenuItem.displayName = 'EditorSlashMenuItem';\n\nexport type EditorSlashMenuGroupProps = React.ComponentProps<typeof Autocomplete.Group>;\nexport const EditorSlashMenuGroup = Autocomplete.Group;\n\nexport type EditorSlashMenuGroupLabelProps = React.ComponentProps<typeof Autocomplete.GroupLabel>;\n\nexport const EditorSlashMenuGroupLabel = ({\n  className,\n  ...rest\n}: EditorSlashMenuGroupLabelProps) => {\n  return (\n    <Autocomplete.GroupLabel\n      {...rest}\n      className={(state) =>\n        clsx(\n          sx(menuStyles.groupLabel),\n          typeof className === 'function' ? className(state) : className,\n        )\n      }\n    />\n  );\n};\nEditorSlashMenuGroupLabel.displayName = 'EditorSlashMenuGroupLabel';\n\nexport type EditorSlashMenuEmptyProps = React.ComponentProps<typeof Autocomplete.Empty>;\n\nexport const EditorSlashMenuEmpty = ({ className, ...rest }: EditorSlashMenuEmptyProps) => {\n  return (\n    <Autocomplete.Empty\n      {...rest}\n      className={(state) =>\n        clsx(\n          sx([menuStyles.item, menuStyles.empty]),\n          typeof className === 'function' ? className(state) : className,\n        )\n      }\n    />\n  );\n};\nEditorSlashMenuEmpty.displayName = 'EditorSlashMenuEmpty';\n\nexport type EditorSlashMenuItemContentProps = React.HTMLAttributes<HTMLDivElement>;\nexport const EditorSlashMenuItemContent = ({\n  className,\n  ...rest\n}: EditorSlashMenuItemContentProps) => {\n  return <div {...rest} className={clsx(sx(menuStyles.itemContent), className)} />;\n};\nEditorSlashMenuItemContent.displayName = 'EditorSlashMenuItemContent';\n\nexport type EditorSlashMenuItemIconProps = React.HTMLAttributes<HTMLSpanElement>;\nexport const EditorSlashMenuItemIcon = ({ className, ...rest }: EditorSlashMenuItemIconProps) => {\n  return <span {...rest} className={clsx(sx(menuStyles.icon), menuClassNames.icon, className)} />;\n};\nEditorSlashMenuItemIcon.displayName = 'EditorSlashMenuItemIcon';\n\nexport type EditorSlashMenuItemLabelProps = React.HTMLAttributes<HTMLSpanElement>;\nexport const EditorSlashMenuItemLabel = ({ className, ...rest }: EditorSlashMenuItemLabelProps) => {\n  return <span {...rest} className={clsx(sx(menuStyles.label), menuClassNames.label, className)} />;\n};\nEditorSlashMenuItemLabel.displayName = 'EditorSlashMenuItemLabel';\n\nexport type EditorSlashMenuItemExtraProps = React.HTMLAttributes<HTMLSpanElement>;\nexport const EditorSlashMenuItemExtra = ({ className, ...rest }: EditorSlashMenuItemExtraProps) => {\n  return <span {...rest} className={clsx(sx(menuStyles.extra), className)} />;\n};\nEditorSlashMenuItemExtra.displayName = 'EditorSlashMenuItemExtra';\n\nexport type EditorSlashMenuHiddenInputProps = React.ComponentProps<typeof Autocomplete.Input>;\nexport const EditorSlashMenuHiddenInput = ({\n  className,\n  ...rest\n}: EditorSlashMenuHiddenInputProps) => {\n  return (\n    <Autocomplete.Input\n      {...rest}\n      className={mergeStateClassName(sx(styles.hiddenInput), className as any) as any}\n    />\n  );\n};\nEditorSlashMenuHiddenInput.displayName = 'EditorSlashMenuHiddenInput';\n"],"mappings":"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"}

package/es/EditorSlashMenu/style.mjs

@@ -1,27 +1,25 @@
-"use client";
-import { createStaticStyles } from "antd-style";
 //#region src/EditorSlashMenu/style.ts
-const styles = createStaticStyles(({ css }) => ({
-	hiddenInput: css`
-    position: absolute;
-
-    overflow: hidden;
-
-    width: 1px;
-    height: 1px;
-    margin: -1px;
-    padding: 0;
-    border: 0;
-
-    white-space: nowrap;
-
-    clip: rect(0, 0, 0, 0);
-  `,
-	list: css`
-    overflow: auto;
-    max-height: 320px;
-  `
-}));
+const styles = {
+	hiddenInput: {
+		kogj98: "lbkdpibf",
+		kmVPX3: "lb1717udv",
+		kVAM5u: "lb181nr7w",
+		ksu8eU: "lbng3xce",
+		kMzoRj: "lbc342km",
+		kVQacm: "lbb3r6kr",
+		kMcinP: "lbzpqnlu",
+		kVAEAm: "lb10l6tqk",
+		khDVqt: "lbuxw1ft",
+		kZKoxP: "lbjm9jq1",
+		kzqmXN: "lb1i1rx1s",
+		$$css: true
+	},
+	list: {
+		kVQacm: "lbysyzu8",
+		kskxy: "lb1sslpiy",
+		$$css: true
+	}
+};
 //#endregion
 export { styles };
 

package/es/EditorSlashMenu/style.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"style.mjs","names":[],"sources":["../../src/EditorSlashMenu/style.ts"],"sourcesContent":["'use client';\n\nimport { createStaticStyles } from 'antd-style';\n\nexport const styles = createStaticStyles(({ css }) => ({\n  // Optional hidden input for keyboard navigation (opt-in).\n  hiddenInput: css`\n    position: absolute;\n\n    overflow: hidden;\n\n    width: 1px;\n    height: 1px;\n    margin: -1px;\n    padding: 0;\n    border: 0;\n\n    white-space: nowrap;\n\n    clip: rect(0, 0, 0, 0);\n  `,\n  list: css`\n    overflow: auto;\n    max-height: 320px;\n  `,\n}));\n"],"mappings":";;;AAIA,MAAa,SAAS,oBAAoB,EAAE,WAAW;CAErD,aAAa,GAAG;;;;;;;;;;;;;;;CAehB,MAAM,GAAG;;;;AAIX,EAAE"}
+{"version":3,"file":"style.mjs","names":[],"sources":["../../src/EditorSlashMenu/style.ts"],"sourcesContent":["import * as stylex from '@stylexjs/stylex';\n\nexport const styles = stylex.create({\n  hiddenInput: {\n    margin: -1,\n    padding: 0,\n    borderColor: 'currentcolor',\n    borderStyle: 'none',\n    borderWidth: 0,\n    overflow: 'hidden',\n    clip: 'rect(0, 0, 0, 0)',\n    position: 'absolute',\n    whiteSpace: 'nowrap',\n    height: 1,\n    width: 1,\n  },\n  list: {\n    overflow: 'auto',\n    maxHeight: 320,\n  },\n});\n"],"mappings":";AACA,MAAa,SAAS;CACpB,aAAa;EACX,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,OAAO;CACT;CACA,MAAM;EACJ,QAAQ;EACR,OAAO;EACP,OAAO;CACT;AACF"}

package/es/EditorSlashMenu/type.d.mts

@@ -1,8 +1,8 @@
 import React from "react";
 import { AutocompleteRootChangeEventDetails } from "@base-ui/react/autocomplete";
 //#region src/EditorSlashMenu/type.d.ts
-type EditorSlashMenuItemValue = string;
-type EditorSlashMenuOption = {
+export type EditorSlashMenuItemValue = string;
+export type EditorSlashMenuOption = {
   /** Render danger style (red) */
   danger?: boolean;
   /** Whether the item is disabled */
@@ -18,19 +18,18 @@ type EditorSlashMenuOption = {
   /** Unique id of the command */
   value: EditorSlashMenuItemValue;
 };
-type EditorSlashMenuGroup = {
+export type EditorSlashMenuGroup = {
   items: EditorSlashMenuOption[];
   /** Optional group title */
   label?: string;
 };
-type EditorSlashMenuItems = Array<EditorSlashMenuOption | EditorSlashMenuGroup>;
-type EditorSlashMenuOnOpenChange = (open: boolean, details: AutocompleteRootChangeEventDetails) => void;
-type EditorSlashMenuOnValueChange = (value: string, details: AutocompleteRootChangeEventDetails) => void;
-type EditorSlashMenuOnSelect = (item: EditorSlashMenuOption, details: AutocompleteRootChangeEventDetails) => void;
-type EditorSlashMenuValueToString = (item: EditorSlashMenuOption) => string;
-type EditorSlashMenuRenderItem = (item: EditorSlashMenuOption) => React.ReactNode;
-type EditorSlashMenuRenderGroupLabel = (label: string) => React.ReactNode;
-type EditorSlashMenuPlacement = 'top' | 'bottom';
+export type EditorSlashMenuItems = Array<EditorSlashMenuOption | EditorSlashMenuGroup>;
+export type EditorSlashMenuOnOpenChange = (open: boolean, details: AutocompleteRootChangeEventDetails) => void;
+export type EditorSlashMenuOnValueChange = (value: string, details: AutocompleteRootChangeEventDetails) => void;
+export type EditorSlashMenuOnSelect = (item: EditorSlashMenuOption, details: AutocompleteRootChangeEventDetails) => void;
+export type EditorSlashMenuValueToString = (item: EditorSlashMenuOption) => string;
+export type EditorSlashMenuRenderItem = (item: EditorSlashMenuOption) => React.ReactNode;
+export type EditorSlashMenuRenderGroupLabel = (label: string) => React.ReactNode;
+export type EditorSlashMenuPlacement = 'top' | 'bottom';
 //#endregion
-export { EditorSlashMenuGroup, EditorSlashMenuItemValue, EditorSlashMenuItems, EditorSlashMenuOnOpenChange, EditorSlashMenuOnSelect, EditorSlashMenuOnValueChange, EditorSlashMenuOption, EditorSlashMenuPlacement, EditorSlashMenuRenderGroupLabel, EditorSlashMenuRenderItem, EditorSlashMenuValueToString };
 //# sourceMappingURL=type.d.mts.map

package/es/EmojiPicker/AvatarUploader.mjs

@@ -1,17 +1,17 @@
 "use client";
+import { cssVar } from "../styles/stylex/cssVar.stylex.mjs";
+import Icon from "../Icon/Icon.mjs";
+import Button from "../Button/Button.mjs";
 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 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 Text from "../Text/Text.mjs";
+import Tag from "../Tag/Tag.mjs";
 import emojiPicker_default from "../i18n/resources/en/emojiPicker.mjs";
-import { ToastHost, toast } from "../base-ui/Toast/imperative.mjs";
+import { ToastHost, toast } from "../Toast/imperative.mjs";
+import UploadDragger from "../Upload/UploadDragger.mjs";
 import { memo, useCallback, useRef, useState } from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
-import { cssVar } from "antd-style";
 import { ChevronLeftIcon, ImageUpIcon } from "lucide-react";
 import AvatarEditor from "react-avatar-editor";
 //#region src/EmojiPicker/AvatarUploader.tsx

package/es/EmojiPicker/AvatarUploader.mjs.map

@@ -1 +1 @@
-{"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"}
+{"version":3,"file":"AvatarUploader.mjs","names":["emojiPickerMessages","Flexbox"],"sources":["../../src/EmojiPicker/AvatarUploader.tsx"],"sourcesContent":["'use client';\n\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 { cssVar } from '@/styles/stylex/cssVar.stylex';\nimport Tag from '@/Tag';\nimport Text from '@/Text';\nimport { toast, ToastHost } from '@/Toast';\nimport { UploadDragger } from '@/Upload';\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

@@ -1,20 +1,23 @@
 "use client";
-import FlexBasic_default from "../Flex/FlexBasic.mjs";
+import { styleProps } from "../styles/stylex/props.mjs";
 import Icon from "../Icon/Icon.mjs";
-import { Tooltip } from "../base-ui/Tooltip/Tooltip.mjs";
-import ActionIcon from "../base-ui/ActionIcon/ActionIcon.mjs";
+import FlexBasic_default from "../Flex/FlexBasic.mjs";
+import { useTheme } from "../styles/theme/scope.mjs";
+import { Tooltip } from "../Tooltip/Tooltip.mjs";
+import ActionIcon from "../ActionIcon/ActionIcon.mjs";
 import { useTranslation } from "../i18n/useTranslation.mjs";
-import Popover from "../base-ui/Popover/Popover.mjs";
-import Avatar from "../base-ui/Avatar/index.mjs";
-import Tabs from "../base-ui/Tabs/Tabs.mjs";
+import Avatar from "../Avatar/index.mjs";
+import Popover from "../Popover/Popover.mjs";
 import emojiPicker_default from "../i18n/resources/en/emojiPicker.mjs";
+import Tabs from "../Tabs/Tabs.mjs";
 import AvatarUploader from "./AvatarUploader.mjs";
 import { styles } from "./style.mjs";
 import { memo, useMemo, useRef, useState } from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
-import { cx, useTheme } from "antd-style";
-import useMergeState from "use-merge-value";
+import clsx from "clsx";
+import * as stylex from "@stylexjs/stylex";
 import { SmileIcon, TrashIcon, UploadIcon } from "lucide-react";
+import useControlledState from "use-merge-value";
 import chroma from "chroma-js";
 import data from "@emoji-mart/data";
 import Picker from "@emoji-mart/react";
@@ -26,7 +29,7 @@ const DEFAULT_AVATAR = "🤖";
 const EmojiPicker = memo(({ value, defaultAvatar = DEFAULT_AVATAR, onChange, locale = "en-US", allowUpload, allowDelete, allowModelAvatar, texts, onDelete, compressSize = 256, customEmojis, className, loading, onUpload, customTabs = [], popupClassName, popupStyle, customRender, open, defaultOpen = false, onOpenChange, popupProps, shape, contentProps, ...rest }) => {
 	const ref = useRef(null);
 	const { t } = useTranslation(emojiPicker_default);
-	const [visible, setVisible] = useMergeState(defaultOpen, {
+	const [visible, setVisible] = useControlledState(defaultOpen, {
 		defaultValue: defaultOpen,
 		onChange: onOpenChange,
 		value: open
@@ -44,7 +47,7 @@ const EmojiPicker = memo(({ value, defaultAvatar = DEFAULT_AVATAR, onChange, loc
 		revalidateOnFocus: false,
 		revalidateOnMount: false
 	});
-	const [ava, setAva] = useMergeState(defaultAvatar, {
+	const [ava, setAva] = useControlledState(defaultAvatar, {
 		defaultValue: defaultAvatar,
 		onChange,
 		value
@@ -111,20 +114,19 @@ const EmojiPicker = memo(({ value, defaultAvatar = DEFAULT_AVATAR, onChange, loc
 	].filter(Boolean);
 	const showTabs = allowDelete || items && items.length > 1;
 	const content = /* @__PURE__ */ jsxs(FlexBasic_default, {
-		className: cx(styles.picker, popupClassName),
 		ref,
-		style: {
+		...styleProps(styles.picker, clsx("lobe-emoji-picker", popupClassName), {
 			minWidth: 310,
 			paddingTop: showTabs ? 4 : 0,
 			...pickerCssVariables,
 			...popupStyle
-		},
+		}),
 		...contentProps,
 		children: [
 			showTabs && /* @__PURE__ */ jsxs(FlexBasic_default, {
 				horizontal: true,
 				align: "center",
-				className: styles.tabs,
+				...stylex.props(styles.tabs),
 				justify: "space-between",
 				paddingInline: 10,
 				children: [/* @__PURE__ */ jsx(Tabs, {
@@ -132,10 +134,10 @@ const EmojiPicker = memo(({ value, defaultAvatar = DEFAULT_AVATAR, onChange, loc
 					items,
 					variant: "square",
 					classNames: {
-						indicator: styles.tabsIndicator,
-						list: styles.tabsList,
-						root: styles.tabsRoot,
-						tab: styles.tab
+						indicator: "lobe-emoji-picker-tabs-indicator",
+						list: "lobe-emoji-picker-tabs-list",
+						root: "lobe-emoji-picker-tabs-root",
+						tab: "lobe-emoji-picker-tab"
 					},
 					onChange: (key) => setTab(key)
 				}), allowDelete && /* @__PURE__ */ jsx(ActionIcon, {
@@ -177,15 +179,15 @@ const EmojiPicker = memo(({ value, defaultAvatar = DEFAULT_AVATAR, onChange, loc
 		]
 	});
 	return /* @__PURE__ */ jsx(Popover, {
-		className: cx(styles.popover),
+		className: "lobe-emoji-picker-popover",
 		content,
 		defaultOpen,
 		open: visible,
 		placement: "bottom",
 		trigger: "click",
 		classNames: {
-			content: styles.popover,
-			root: styles.positioner
+			content: "lobe-emoji-picker-popover",
+			root: "lobe-emoji-picker-positioner"
 		},
 		onOpenChange: (v) => {
 			if (loading) return;
@@ -194,7 +196,7 @@ const EmojiPicker = memo(({ value, defaultAvatar = DEFAULT_AVATAR, onChange, loc
 		...popupProps,
 		children: customRender ? customRender(ava) : /* @__PURE__ */ jsx(Avatar, {
 			avatar: ava,
-			className: cx(styles.root, className),
+			className: clsx("lobe-emoji-picker-avatar", className),
 			loading,
 			shape,
 			...rest

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 } 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":"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"}
+{"version":3,"file":"EmojiPicker.mjs","names":["emojiPickerMessages","useMergeState","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 * as stylex from '@stylexjs/stylex';\nimport chroma from 'chroma-js';\nimport clsx from 'clsx';\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 '@/ActionIcon';\nimport Avatar from '@/Avatar';\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 { styleProps } from '@/styles/stylex/props';\nimport { useTheme } from '@/styles/theme/scope';\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        ref={ref}\n        {...styleProps(styles.picker, clsx('lobe-emoji-picker', popupClassName), {\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            {...stylex.props(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: 'lobe-emoji-picker-tabs-indicator',\n                list: 'lobe-emoji-picker-tabs-list',\n                root: 'lobe-emoji-picker-tabs-root',\n                tab: 'lobe-emoji-picker-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=\"lobe-emoji-picker-popover\"\n        content={content}\n        defaultOpen={defaultOpen}\n        open={visible}\n        placement={'bottom'}\n        trigger={'click'}\n        classNames={{\n          content: 'lobe-emoji-picker-popover',\n          root: 'lobe-emoji-picker-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={clsx('lobe-emoji-picker-avatar', 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/style.mjs

@@ -1,68 +1,16 @@
-import { createStaticStyles } from "antd-style";
 //#region src/EmojiPicker/style.ts
-const styles = createStaticStyles(({ css, cssVar }) => ({
-	picker: css`
-    position: relative;
-
-    em-emoji-picker {
-      --rgb-accent: var(--emoji-picker-rgb-accent, 0, 0, 0);
-      --shadow: none;
-      --rgb-background: var(--emoji-picker-rgb-background, 255, 255, 255);
-      --border-radius: 0;
-    }
-  `,
-	popover: css`
-    overflow: hidden;
-    padding: 0;
-  `,
-	positioner: css`
-    width: fit-content !important;
-  `,
-	root: css`
-    position: relative;
-    transition: background 150ms ${cssVar.motionEaseOut};
-
-    &:hover {
-      background: ${cssVar.colorFillSecondary};
-    }
-  `,
-	tab: css`
-    && {
-      width: 32px;
-      height: 32px;
-      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;
-    }
-  `
-}));
+const styles = {
+	picker: {
+		kVAEAm: "lb1n2onr6",
+		$$css: true
+	},
+	tabs: {
+		kL6WhQ: "lb1nkj3if",
+		kfdmCh: "lb1q0q8m5",
+		kt9PQ7: "lbso031l",
+		$$css: true
+	}
+};
 //#endregion
 export { styles };
 

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  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"}
+{"version":3,"file":"style.mjs","names":[],"sources":["../../src/EmojiPicker/style.ts"],"sourcesContent":["import './style.css';\n\nimport * as stylex from '@stylexjs/stylex';\n\nimport { cssVar } from '@/styles/stylex/cssVar.stylex';\n\nexport const styles = stylex.create({\n  picker: {\n    position: 'relative',\n  },\n  tabs: {\n    borderBlockEndColor: cssVar.colorBorderSecondary,\n    borderBlockEndStyle: 'solid',\n    borderBlockEndWidth: 1,\n  },\n});\n"],"mappings":";AAIA,MAAa,SAAS;CACpB,QAAQ;EACN,QAAQ;EACR,OAAO;CACT;CACA,MAAM;EACJ,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,OAAO;CACT;AACF"}

package/es/EmojiPicker/type.d.mts

@@ -1,11 +1,11 @@
 import { FlexboxProps } from "../Flex/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 { AvatarProps } from "../Avatar/type.mjs";
+import "../Avatar/index.mjs";
+import { PopoverProps } from "../Popover/type.mjs";
 import "../Popover/index.mjs";
 import { CSSProperties, ReactNode } from "react";
 //#region src/EmojiPicker/type.d.ts
-interface AvatarUploaderProps {
+export interface AvatarUploaderProps {
   compressSize?: number;
   onChange: (avatar: string) => void;
   onUpload?: (file: File) => void;
@@ -16,7 +16,7 @@ interface AvatarUploaderProps {
     uploadBtn?: string;
   };
 }
-interface EmojiPickerCustomEmoji {
+export interface EmojiPickerCustomEmoji {
   emojis: [{
     id: string;
     keywords?: string[];
@@ -28,12 +28,12 @@ interface EmojiPickerCustomEmoji {
   id: string;
   name: string;
 }
-interface EmojiPickerCustomTab {
+export interface EmojiPickerCustomTab {
   label: ReactNode;
   render: (handleAvatarChange: (avatar: string) => void) => ReactNode;
   value: string;
 }
-interface EmojiPickerProps extends Omit<AvatarProps, 'onChange' | 'avatar'> {
+export interface EmojiPickerProps extends Omit<AvatarProps, 'onChange' | 'avatar'> {
   allowDelete?: boolean;
   allowModelAvatar?: boolean;
   allowUpload?: boolean | {
@@ -65,5 +65,4 @@ interface EmojiPickerProps extends Omit<AvatarProps, 'onChange' | 'avatar'> {
   value?: string;
 }
 //#endregion
-export { AvatarUploaderProps, EmojiPickerCustomEmoji, EmojiPickerCustomTab, EmojiPickerProps };
 //# sourceMappingURL=type.d.mts.map

package/es/Empty/Empty.mjs

@@ -1,11 +1,13 @@
 "use client";
+import { styleProps } from "../styles/stylex/props.mjs";
+import { cssVar } from "../styles/stylex/cssVar.stylex.mjs";
 import Icon from "../Icon/Icon.mjs";
-import Text from "../Text/Text.mjs";
 import FluentEmoji from "../FluentEmoji/FluentEmoji.mjs";
+import Text from "../Text/Text.mjs";
 import { styles } from "./style.mjs";
 import { memo, useMemo } from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
-import { cssVar, cx } from "antd-style";
+import * as stylex from "@stylexjs/stylex";
 import { Plus } from "lucide-react";
 //#region src/Empty/Empty.tsx
 const Empty = memo(({ title, description, icon, iconColor, emoji, image, imageSize = 48, action, actionProps, titleProps, descriptionProps, align, imageProps, children, type = "default", variant = "default", className, onClick, ref, style, ...rest }) => {
@@ -40,7 +42,11 @@ const Empty = memo(({ title, description, icon, iconColor, emoji, image, imageSi
 		iconColor,
 		iconSize
 	]);
-	const rootClassName = cx(isPage ? styles.rootPage : styles.root, !isPage && variant === "dashed" && styles.dashed, isClickable && styles.dashedClickable, className);
+	const rootClassName = styleProps([
+		isPage ? styles.rootPage : styles.root,
+		!isPage && variant === "dashed" && styles.dashed,
+		isClickable && styles.dashedClickable
+	], className).className;
 	const handleKeyDown = (event) => {
 		if (!isClickable) return;
 		if (event.key !== "Enter" && event.key !== " ") return;
@@ -88,7 +94,7 @@ const Empty = memo(({ title, description, icon, iconColor, emoji, image, imageSi
 			descriptionNode,
 			children,
 			action && /* @__PURE__ */ jsx("div", {
-				className: styles.extraPage,
+				...stylex.props(styles.extraPage),
 				...actionProps,
 				children: action
 			})
@@ -116,7 +122,7 @@ const Empty = memo(({ title, description, icon, iconColor, emoji, image, imageSi
 			descriptionNode,
 			children,
 			action && /* @__PURE__ */ jsx("div", {
-				className: styles.action,
+				...stylex.props(styles.action),
 				...actionProps,
 				children: action
 			})

package/es/Empty/Empty.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"Empty.mjs","names":[],"sources":["../../src/Empty/Empty.tsx"],"sourcesContent":["'use client';\n\nimport { cssVar, cx } from 'antd-style';\nimport { Plus } from 'lucide-react';\nimport { type KeyboardEvent, memo, useMemo } from 'react';\n\nimport FluentEmoji from '@/FluentEmoji';\nimport Icon from '@/Icon';\nimport Text from '@/Text';\n\nimport { styles } from './style';\nimport type { EmptyProps } from './type';\n\nconst Empty = memo<EmptyProps>(\n  ({\n    title,\n    description,\n    icon,\n    iconColor,\n    emoji,\n    image,\n    imageSize = 48,\n    action,\n    actionProps,\n    titleProps,\n    descriptionProps,\n    align,\n    imageProps,\n    children,\n    type = 'default',\n    variant = 'default',\n    className,\n    onClick,\n    ref,\n    style,\n    ...rest\n  }) => {\n    const isPage = type === 'page';\n    const alignValue = align || (isPage ? 'flex-start' : 'center');\n    const isCenter = alignValue === 'center';\n\n    const isClickable = !isPage && variant === 'dashed' && !!onClick;\n    const resolvedIcon = icon ?? (isClickable ? Plus : undefined);\n\n    const iconSize = isPage ? 36 : variant === 'dashed' ? 20 : 32;\n\n    const cover = useMemo(() => {\n      if (image) return image;\n      if (emoji) return <FluentEmoji emoji={emoji} size={imageSize} type={'anim'} />;\n      if (!resolvedIcon) return null;\n\n      return (\n        <Icon\n          color={iconColor}\n          icon={resolvedIcon}\n          size={{ size: iconSize, strokeWidth: isPage ? 1.25 : 2 }}\n        />\n      );\n    }, [image, emoji, imageSize, resolvedIcon, isPage, iconColor, iconSize]);\n\n    const rootClassName = cx(\n      isPage ? styles.rootPage : styles.root,\n      !isPage && variant === 'dashed' && styles.dashed,\n      isClickable && styles.dashedClickable,\n      className,\n    );\n\n    const handleKeyDown = (event: KeyboardEvent<HTMLDivElement>) => {\n      if (!isClickable) return;\n      if (event.key !== 'Enter' && event.key !== ' ') return;\n\n      event.preventDefault();\n      (onClick as (event: unknown) => void)?.(event);\n    };\n\n    const rootStyle: EmptyProps['style'] = {\n      color:\n        !isPage && variant === 'dashed' ? cssVar.colorTextTertiary : cssVar.colorTextQuaternary,\n      ...style,\n    };\n\n    const titleNode = title && (\n      <Text\n        align={isCenter ? 'center' : undefined}\n        color={cssVar.colorText}\n        fontSize={isPage ? 18 : 14}\n        weight={isPage ? 600 : 500}\n        style={{\n          marginBottom: isPage ? 4 : 0,\n          marginTop: isPage ? 0 : variant === 'dashed' ? 6 : 8,\n        }}\n        {...titleProps}\n      >\n        {title}\n      </Text>\n    );\n\n    const descriptionNode = description && (\n      <Text\n        align={isCenter ? 'center' : undefined}\n        color={cssVar.colorTextTertiary}\n        fontSize={13}\n        style={{ maxWidth: isPage ? '52ch' : '34ch' }}\n        {...descriptionProps}\n      >\n        {description}\n      </Text>\n    );\n\n    if (isPage) {\n      return (\n        <div\n          className={rootClassName}\n          ref={ref}\n          style={{ alignItems: alignValue, ...rootStyle }}\n          onClick={onClick}\n          {...rest}\n        >\n          {cover && <div {...imageProps}>{cover}</div>}\n          <div>\n            {titleNode}\n            {descriptionNode}\n            {children}\n            {action && (\n              <div className={styles.extraPage} {...actionProps}>\n                {action}\n              </div>\n            )}\n          </div>\n        </div>\n      );\n    }\n\n    return (\n      <div\n        className={rootClassName}\n        ref={ref}\n        role={isClickable ? 'button' : undefined}\n        style={{ alignItems: alignValue, textAlign: isCenter ? 'center' : undefined, ...rootStyle }}\n        tabIndex={isClickable ? 0 : undefined}\n        onClick={onClick}\n        onKeyDown={handleKeyDown}\n        {...rest}\n      >\n        {cover && <div {...imageProps}>{cover}</div>}\n        {titleNode}\n        {descriptionNode}\n        {children}\n        {action && (\n          <div className={styles.action} {...actionProps}>\n            {action}\n          </div>\n        )}\n      </div>\n    );\n  },\n);\n\nEmpty.displayName = 'Empty';\n\nexport default Empty;\n"],"mappings":";;;;;;;;;;AAaA,MAAM,QAAQ,MACX,EACC,OACA,aACA,MACA,WACA,OACA,OACA,YAAY,IACZ,QACA,aACA,YACA,kBACA,OACA,YACA,UACA,OAAO,WACP,UAAU,WACV,WACA,SACA,KACA,OACA,GAAG,WACC;CACJ,MAAM,SAAS,SAAS;CACxB,MAAM,aAAa,UAAU,SAAS,eAAe;CACrD,MAAM,WAAW,eAAe;CAEhC,MAAM,cAAc,CAAC,UAAU,YAAY,YAAY,CAAC,CAAC;CACzD,MAAM,eAAe,SAAS,cAAc,OAAO,KAAA;CAEnD,MAAM,WAAW,SAAS,KAAK,YAAY,WAAW,KAAK;CAE3D,MAAM,QAAQ,cAAc;EAC1B,IAAI,OAAO,OAAO;EAClB,IAAI,OAAO,OAAO,oBAAC,aAAD;GAAoB;GAAO,MAAM;GAAW,MAAM;EAAS,CAAA;EAC7E,IAAI,CAAC,cAAc,OAAO;EAE1B,OACE,oBAAC,MAAD;GACE,OAAO;GACP,MAAM;GACN,MAAM;IAAE,MAAM;IAAU,aAAa,SAAS,OAAO;GAAE;EACxD,CAAA;CAEL,GAAG;EAAC;EAAO;EAAO;EAAW;EAAc;EAAQ;EAAW;CAAQ,CAAC;CAEvE,MAAM,gBAAgB,GACpB,SAAS,OAAO,WAAW,OAAO,MAClC,CAAC,UAAU,YAAY,YAAY,OAAO,QAC1C,eAAe,OAAO,iBACtB,SACF;CAEA,MAAM,iBAAiB,UAAyC;EAC9D,IAAI,CAAC,aAAa;EAClB,IAAI,MAAM,QAAQ,WAAW,MAAM,QAAQ,KAAK;EAEhD,MAAM,eAAe;EACrB,UAAwC,KAAK;CAC/C;CAEA,MAAM,YAAiC;EACrC,OACE,CAAC,UAAU,YAAY,WAAW,OAAO,oBAAoB,OAAO;EACtE,GAAG;CACL;CAEA,MAAM,YAAY,SAChB,oBAAC,MAAD;EACE,OAAO,WAAW,WAAW,KAAA;EAC7B,OAAO,OAAO;EACd,UAAU,SAAS,KAAK;EACxB,QAAQ,SAAS,MAAM;EACvB,OAAO;GACL,cAAc,SAAS,IAAI;GAC3B,WAAW,SAAS,IAAI,YAAY,WAAW,IAAI;EACrD;EACA,GAAI;EAEH,UAAA;CACG,CAAA;CAGR,MAAM,kBAAkB,eACtB,oBAAC,MAAD;EACE,OAAO,WAAW,WAAW,KAAA;EAC7B,OAAO,OAAO;EACd,UAAU;EACV,OAAO,EAAE,UAAU,SAAS,SAAS,OAAO;EAC5C,GAAI;EAEH,UAAA;CACG,CAAA;CAGR,IAAI,QACF,OACE,qBAAC,OAAD;EACE,WAAW;EACN;EACL,OAAO;GAAE,YAAY;GAAY,GAAG;EAAU;EACrC;EACT,GAAI;EALN,UAAA,CAOG,SAAS,oBAAC,OAAD;GAAK,GAAI;GAAa,UAAA;EAAW,CAAA,GAC3C,qBAAC,OAAD,EAAA,UAAA;GACG;GACA;GACA;GACA,UACC,oBAAC,OAAD;IAAK,WAAW,OAAO;IAAW,GAAI;IACnC,UAAA;GACE,CAAA;EAEJ,EAAA,CAAA,CACF;;CAIT,OACE,qBAAC,OAAD;EACE,WAAW;EACN;EACL,MAAM,cAAc,WAAW,KAAA;EAC/B,OAAO;GAAE,YAAY;GAAY,WAAW,WAAW,WAAW,KAAA;GAAW,GAAG;EAAU;EAC1F,UAAU,cAAc,IAAI,KAAA;EACnB;EACT,WAAW;EACX,GAAI;EARN,UAAA;GAUG,SAAS,oBAAC,OAAD;IAAK,GAAI;IAAa,UAAA;GAAW,CAAA;GAC1C;GACA;GACA;GACA,UACC,oBAAC,OAAD;IAAK,WAAW,OAAO;IAAQ,GAAI;IAChC,UAAA;GACE,CAAA;EAEJ;;AAET,CACF;AAEA,MAAM,cAAc"}
+{"version":3,"file":"Empty.mjs","names":[],"sources":["../../src/Empty/Empty.tsx"],"sourcesContent":["'use client';\n\nimport * as stylex from '@stylexjs/stylex';\nimport { Plus } from 'lucide-react';\nimport { type KeyboardEvent, memo, useMemo } from 'react';\n\nimport FluentEmoji from '@/FluentEmoji';\nimport Icon from '@/Icon';\nimport { cssVar } from '@/styles/stylex/cssVar.stylex';\nimport { styleProps } from '@/styles/stylex/props';\nimport Text from '@/Text';\n\nimport { styles } from './style';\nimport type { EmptyProps } from './type';\n\nconst Empty = memo<EmptyProps>(\n  ({\n    title,\n    description,\n    icon,\n    iconColor,\n    emoji,\n    image,\n    imageSize = 48,\n    action,\n    actionProps,\n    titleProps,\n    descriptionProps,\n    align,\n    imageProps,\n    children,\n    type = 'default',\n    variant = 'default',\n    className,\n    onClick,\n    ref,\n    style,\n    ...rest\n  }) => {\n    const isPage = type === 'page';\n    const alignValue = align || (isPage ? 'flex-start' : 'center');\n    const isCenter = alignValue === 'center';\n\n    const isClickable = !isPage && variant === 'dashed' && !!onClick;\n    const resolvedIcon = icon ?? (isClickable ? Plus : undefined);\n\n    const iconSize = isPage ? 36 : variant === 'dashed' ? 20 : 32;\n\n    const cover = useMemo(() => {\n      if (image) return image;\n      if (emoji) return <FluentEmoji emoji={emoji} size={imageSize} type={'anim'} />;\n      if (!resolvedIcon) return null;\n\n      return (\n        <Icon\n          color={iconColor}\n          icon={resolvedIcon}\n          size={{ size: iconSize, strokeWidth: isPage ? 1.25 : 2 }}\n        />\n      );\n    }, [image, emoji, imageSize, resolvedIcon, isPage, iconColor, iconSize]);\n\n    const rootClassName = styleProps(\n      [\n        isPage ? styles.rootPage : styles.root,\n        !isPage && variant === 'dashed' && styles.dashed,\n        isClickable && styles.dashedClickable,\n      ],\n      className,\n    ).className;\n\n    const handleKeyDown = (event: KeyboardEvent<HTMLDivElement>) => {\n      if (!isClickable) return;\n      if (event.key !== 'Enter' && event.key !== ' ') return;\n\n      event.preventDefault();\n      (onClick as (event: unknown) => void)?.(event);\n    };\n\n    const rootStyle: EmptyProps['style'] = {\n      color:\n        !isPage && variant === 'dashed' ? cssVar.colorTextTertiary : cssVar.colorTextQuaternary,\n      ...style,\n    };\n\n    const titleNode = title && (\n      <Text\n        align={isCenter ? 'center' : undefined}\n        color={cssVar.colorText}\n        fontSize={isPage ? 18 : 14}\n        weight={isPage ? 600 : 500}\n        style={{\n          marginBottom: isPage ? 4 : 0,\n          marginTop: isPage ? 0 : variant === 'dashed' ? 6 : 8,\n        }}\n        {...titleProps}\n      >\n        {title}\n      </Text>\n    );\n\n    const descriptionNode = description && (\n      <Text\n        align={isCenter ? 'center' : undefined}\n        color={cssVar.colorTextTertiary}\n        fontSize={13}\n        style={{ maxWidth: isPage ? '52ch' : '34ch' }}\n        {...descriptionProps}\n      >\n        {description}\n      </Text>\n    );\n\n    if (isPage) {\n      return (\n        <div\n          className={rootClassName}\n          ref={ref}\n          style={{ alignItems: alignValue, ...rootStyle }}\n          onClick={onClick}\n          {...rest}\n        >\n          {cover && <div {...imageProps}>{cover}</div>}\n          <div>\n            {titleNode}\n            {descriptionNode}\n            {children}\n            {action && (\n              <div {...stylex.props(styles.extraPage)} {...actionProps}>\n                {action}\n              </div>\n            )}\n          </div>\n        </div>\n      );\n    }\n\n    return (\n      <div\n        className={rootClassName}\n        ref={ref}\n        role={isClickable ? 'button' : undefined}\n        style={{ alignItems: alignValue, textAlign: isCenter ? 'center' : undefined, ...rootStyle }}\n        tabIndex={isClickable ? 0 : undefined}\n        onClick={onClick}\n        onKeyDown={handleKeyDown}\n        {...rest}\n      >\n        {cover && <div {...imageProps}>{cover}</div>}\n        {titleNode}\n        {descriptionNode}\n        {children}\n        {action && (\n          <div {...stylex.props(styles.action)} {...actionProps}>\n            {action}\n          </div>\n        )}\n      </div>\n    );\n  },\n);\n\nEmpty.displayName = 'Empty';\n\nexport default Empty;\n"],"mappings":"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"}