@lobehub/ui 4.3.2 → 4.3.3

package/es/DraggableSideNav/style.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"style.mjs","names":[],"sources":["../../src/DraggableSideNav/style.ts"],"sourcesContent":["import { createStyles } from 'antd-style';\n\n// Layout constants (aligned with DraggablePanel)\nconst LAYOUT = {\n  offset: 16,\n  toggleLength: 54,\n  toggleShort: 16,\n};\n\nexport const useStyles = createStyles(\n  (\n    { css, token, prefixCls },\n    { showBorder, backgroundColor }: { backgroundColor?: string; showBorder: boolean },\n  ) => ({\n    body: css`\n      /* Smooth scroll behavior */\n      scroll-behavior: smooth;\n      overflow: hidden auto;\n      flex: 1;\n\n      /* Better scrollbar styling */\n      &::-webkit-scrollbar {\n        width: 6px;\n      }\n\n      &::-webkit-scrollbar-track {\n        background: transparent;\n      }\n\n      &::-webkit-scrollbar-thumb {\n        border-radius: 3px;\n        background: ${token.colorBorderSecondary};\n\n        &:hover {\n          background: ${token.colorBorder};\n        }\n      }\n    `,\n    container: css`\n      /* Width transition controlled by inline style */\n\n      /* Ensure smooth animations */\n      will-change: width;\n\n      position: relative;\n\n      display: flex;\n      flex-direction: column;\n\n      height: 100%;\n    `,\n    contentContainer: css`\n      overflow: hidden;\n      display: flex;\n      flex-direction: column;\n\n      height: 100%;\n      border-inline-end: ${showBorder ? '1px' : '0'} solid ${token.colorBorderSecondary};\n\n      background: ${backgroundColor || token.colorBgLayout};\n    `,\n    footer: css`\n      flex-shrink: 0;\n    `,\n    handlerIcon: css`\n      /* Icon transitions are now handled by motion */\n      display: flex;\n      align-items: center;\n      justify-content: center;\n    `,\n    header: css`\n      flex-shrink: 0;\n    `,\n    menuOverride: css`\n      .${prefixCls}-menu {\n        .${prefixCls}-menu-item {\n          display: flex;\n          gap: 8px;\n          align-items: center;\n          justify-content: center;\n\n          height: unset;\n          min-height: 36px;\n          padding-block: 4px;\n          padding-inline: 8px !important;\n        }\n\n        .${prefixCls}-menu-item-group-title {\n          overflow: hidden;\n          padding-inline: 8px;\n          text-overflow: ellipsis;\n          white-space: nowrap;\n        }\n\n        .${prefixCls}-menu-item-icon {\n          position: absolute;\n          inset-inline-start: 0;\n\n          display: flex !important;\n          flex: none;\n          align-items: center;\n          justify-content: center;\n\n          width: 36px;\n          height: 36px;\n        }\n\n        .${prefixCls}-menu-title-content {\n          overflow: hidden;\n          flex: 1;\n\n          margin: 0 !important;\n          padding-inline-start: 36px;\n\n          line-height: 1.5;\n        }\n\n        &.${prefixCls}-menu-inline-collapsed {\n          .ant-menu-title-content {\n            display: none;\n            width: 0;\n            opacity: 0;\n          }\n\n          .${prefixCls}-menu-item {\n            display: flex;\n            align-items: center;\n            justify-content: center;\n\n            width: 36px !important;\n            height: 36px !important;\n          }\n        }\n      }\n    `,\n    resizeHandle: css`\n      cursor: col-resize;\n\n      position: absolute;\n      inset-block: 0 0;\n\n      width: 8px;\n\n      transition: background-color 0.2s ease;\n\n      &::after {\n        content: '';\n\n        position: absolute;\n        inset-block: 0;\n        inset-inline-start: 50%;\n        transform: translateX(-50%);\n\n        width: 2px;\n\n        background: transparent;\n\n        transition: all 0.25s cubic-bezier(0.22, 1, 0.36, 1);\n      }\n    `,\n    resizeHandleHighlight: css`\n      &:hover {\n        &::after {\n          width: 3px;\n          background: ${token.colorPrimary};\n          box-shadow: 0 0 8px ${token.colorPrimary}40;\n        }\n      }\n\n      &:active {\n        &::after {\n          background: ${token.colorPrimaryActive};\n        }\n      }\n    `,\n    resizeHandleLeft: css`\n      inset-inline-end: -4px;\n    `,\n    resizeHandleRight: css`\n      inset-inline-start: -4px;\n    `,\n    toggleLeft: css`\n      inset-inline-end: -${LAYOUT.offset}px;\n      width: ${LAYOUT.toggleShort}px;\n      height: 100%;\n\n      > div {\n        inset-block-start: 50%;\n\n        width: ${LAYOUT.toggleShort}px;\n        height: ${LAYOUT.toggleLength}px;\n        margin-block-start: -${LAYOUT.toggleLength / 2}px;\n        margin-inline-start: -1px;\n        border-inline-start-width: 0;\n        border-radius: 0 ${token.borderRadiusLG}px ${token.borderRadiusLG}px 0;\n      }\n    `,\n    toggleRight: css`\n      inset-inline-start: -${LAYOUT.offset}px;\n      width: ${LAYOUT.toggleShort}px;\n      height: 100%;\n\n      > div {\n        inset-block-start: 50%;\n\n        width: ${LAYOUT.toggleShort}px;\n        height: ${LAYOUT.toggleLength}px;\n        margin-block-start: -${LAYOUT.toggleLength / 2}px;\n        margin-inline-end: -1px;\n        border-inline-end-width: 0;\n        border-radius: ${token.borderRadiusLG}px 0 0 ${token.borderRadiusLG}px; /* 右侧面板，handle 在左边，左侧圆角 */\n      }\n    `,\n    toggleRoot: css`\n      pointer-events: none;\n      position: absolute;\n      z-index: 50;\n\n      /* Smooth transitions for all states */\n      transition: opacity 0.25s cubic-bezier(0.22, 1, 0.36, 1);\n\n      &:has(> div) {\n        pointer-events: all;\n      }\n\n      > div {\n        pointer-events: all;\n        cursor: pointer;\n\n        position: absolute;\n\n        border: 1px solid ${token.colorBorder};\n\n        color: ${token.colorTextTertiary};\n\n        background: ${backgroundColor || token.colorBgLayout};\n        backdrop-filter: blur(8px);\n\n        /* Enhanced transitions with backdrop blur */\n        transition:\n          color 0.2s ${token.motionEaseOut},\n          transform 0.2s ${token.motionEaseOut},\n          box-shadow 0.2s ${token.motionEaseOut};\n\n        &:hover {\n          color: ${token.colorTextSecondary};\n        }\n\n        &:active {\n          transform: scale(0.95);\n          color: ${token.colorText};\n        }\n      }\n    `,\n  }),\n);\n"],"mappings":";;;AAGA,MAAM,SAAS;CACb,QAAQ;CACR,cAAc;CACd,aAAa;CACd;AAED,MAAa,YAAY,cAErB,EAAE,YAAK,OAAO,aACd,EAAE,YAAY,uBACV;CACJ,MAAM,KAAG;;;;;;;;;;;;;;;;;sBAiBS,MAAM,qBAAqB;;;wBAGzB,MAAM,YAAY;;;;CAItC,WAAW,KAAG;;;;;;;;;;;;;CAad,kBAAkB,KAAG;;;;;;2BAME,aAAa,QAAQ,IAAI,SAAS,MAAM,qBAAqB;;oBAEpE,mBAAmB,MAAM,cAAc;;CAEvD,QAAQ,KAAG;;;CAGX,aAAa,KAAG;;;;;;CAMhB,QAAQ,KAAG;;;CAGX,cAAc,KAAG;SACZ,UAAU;WACR,UAAU;;;;;;;;;;;;WAYV,UAAU;;;;;;;WAOV,UAAU;;;;;;;;;;;;;WAaV,UAAU;;;;;;;;;;YAUT,UAAU;;;;;;;aAOT,UAAU;;;;;;;;;;;CAWnB,cAAc,KAAG;;;;;;;;;;;;;;;;;;;;;;;;;CAyBjB,uBAAuB,KAAG;;;;wBAIN,MAAM,aAAa;gCACX,MAAM,aAAa;;;;;;wBAM3B,MAAM,mBAAmB;;;;CAI7C,kBAAkB,KAAG;;;CAGrB,mBAAmB,KAAG;;;CAGtB,YAAY,KAAG;2BACQ,OAAO,OAAO;eAC1B,OAAO,YAAY;;;;;;iBAMjB,OAAO,YAAY;kBAClB,OAAO,aAAa;+BACP,OAAO,eAAe,EAAE;;;2BAG5B,MAAM,eAAe,KAAK,MAAM,eAAe;;;CAGtE,aAAa,KAAG;6BACS,OAAO,OAAO;eAC5B,OAAO,YAAY;;;;;;iBAMjB,OAAO,YAAY;kBAClB,OAAO,aAAa;+BACP,OAAO,eAAe,EAAE;;;yBAG9B,MAAM,eAAe,SAAS,MAAM,eAAe;;;CAGxE,YAAY,KAAG;;;;;;;;;;;;;;;;;;4BAkBS,MAAM,YAAY;;iBAE7B,MAAM,kBAAkB;;sBAEnB,mBAAmB,MAAM,cAAc;;;;;uBAKtC,MAAM,cAAc;2BAChB,MAAM,cAAc;4BACnB,MAAM,cAAc;;;mBAG7B,MAAM,mBAAmB;;;;;mBAKzB,MAAM,UAAU;;;;CAIhC,EACF"}
+{"version":3,"file":"style.mjs","names":["cssVar"],"sources":["../../src/DraggableSideNav/style.ts"],"sourcesContent":["import { createStaticStyles } from 'antd-style';\n\n// Layout constants (aligned with DraggablePanel)\nconst LAYOUT = {\n  offset: 16,\n  toggleLength: 54,\n  toggleShort: 16,\n};\n\nconst prefixCls = 'ant';\n\nexport const styles = createStaticStyles(({ css, cssVar }) => ({\n  body: css`\n    /* Smooth scroll behavior */\n    scroll-behavior: smooth;\n    overflow: hidden auto;\n    flex: 1;\n\n    /* Better scrollbar styling */\n    &::-webkit-scrollbar {\n      width: 6px;\n    }\n\n    &::-webkit-scrollbar-track {\n      background: transparent;\n    }\n\n    &::-webkit-scrollbar-thumb {\n      border-radius: 3px;\n      background: ${cssVar.colorBorderSecondary};\n\n      &:hover {\n        background: ${cssVar.colorBorder};\n      }\n    }\n  `,\n  container: css`\n    /* Width transition controlled by inline style */\n\n    /* Ensure smooth animations */\n    will-change: width;\n\n    position: relative;\n\n    display: flex;\n    flex-direction: column;\n\n    height: 100%;\n  `,\n  contentContainer: css`\n    overflow: hidden;\n    display: flex;\n    flex-direction: column;\n\n    height: 100%;\n    border-inline-end: 1px solid ${cssVar.colorBorderSecondary};\n\n    background: var(--draggable-side-nav-bg, ${cssVar.colorBgLayout});\n  `,\n  contentContainerNoBorder: css`\n    overflow: hidden;\n    display: flex;\n    flex-direction: column;\n\n    height: 100%;\n    border-inline-end: 0 solid ${cssVar.colorBorderSecondary};\n\n    background: var(--draggable-side-nav-bg, ${cssVar.colorBgLayout});\n  `,\n  footer: css`\n    flex-shrink: 0;\n  `,\n  handlerIcon: css`\n    /* Icon transitions are now handled by motion */\n    display: flex;\n    align-items: center;\n    justify-content: center;\n  `,\n  header: css`\n    flex-shrink: 0;\n  `,\n  menuOverride: css`\n    .${prefixCls}-menu {\n      .${prefixCls}-menu-item {\n        display: flex;\n        gap: 8px;\n        align-items: center;\n        justify-content: center;\n\n        height: unset;\n        min-height: 36px;\n        padding-block: 4px;\n        padding-inline: 8px !important;\n      }\n\n      .${prefixCls}-menu-item-group-title {\n        overflow: hidden;\n        padding-inline: 8px;\n        text-overflow: ellipsis;\n        white-space: nowrap;\n      }\n\n      .${prefixCls}-menu-item-icon {\n        position: absolute;\n        inset-inline-start: 0;\n\n        display: flex !important;\n        flex: none;\n        align-items: center;\n        justify-content: center;\n\n        width: 36px;\n        height: 36px;\n      }\n\n      .${prefixCls}-menu-title-content {\n        overflow: hidden;\n        flex: 1;\n\n        margin: 0 !important;\n        padding-inline-start: 36px;\n\n        line-height: 1.5;\n      }\n\n      &.${prefixCls}-menu-inline-collapsed {\n        .ant-menu-title-content {\n          display: none;\n          width: 0;\n          opacity: 0;\n        }\n\n        .${prefixCls}-menu-item {\n          display: flex;\n          align-items: center;\n          justify-content: center;\n\n          width: 36px !important;\n          height: 36px !important;\n        }\n      }\n    }\n  `,\n  resizeHandle: css`\n    cursor: col-resize;\n\n    position: absolute;\n    inset-block: 0 0;\n\n    width: 8px;\n\n    transition: background-color 0.2s ease;\n\n    &::after {\n      content: '';\n\n      position: absolute;\n      inset-block: 0;\n      inset-inline-start: 50%;\n      transform: translateX(-50%);\n\n      width: 2px;\n\n      background: transparent;\n\n      transition: all 0.25s cubic-bezier(0.22, 1, 0.36, 1);\n    }\n  `,\n  resizeHandleHighlight: css`\n    &:hover {\n      &::after {\n        width: 3px;\n        background: ${cssVar.colorPrimary};\n        box-shadow: 0 0 8px color-mix(in srgb, ${cssVar.colorPrimary} 25%, transparent);\n      }\n    }\n\n    &:active {\n      &::after {\n        background: ${cssVar.colorPrimaryActive};\n      }\n    }\n  `,\n  resizeHandleLeft: css`\n    inset-inline-end: -4px;\n  `,\n  resizeHandleRight: css`\n    inset-inline-start: -4px;\n  `,\n  toggleLeft: css`\n    inset-inline-end: -${LAYOUT.offset}px;\n    width: ${LAYOUT.toggleShort}px;\n    height: 100%;\n\n    > div {\n      inset-block-start: 50%;\n\n      width: ${LAYOUT.toggleShort}px;\n      height: ${LAYOUT.toggleLength}px;\n      margin-block-start: -${LAYOUT.toggleLength / 2}px;\n      margin-inline-start: -1px;\n      border-inline-start-width: 0;\n      border-radius: 0 ${cssVar.borderRadiusLG} ${cssVar.borderRadiusLG} 0;\n    }\n  `,\n  toggleRight: css`\n    inset-inline-start: -${LAYOUT.offset}px;\n    width: ${LAYOUT.toggleShort}px;\n    height: 100%;\n\n    > div {\n      inset-block-start: 50%;\n\n      width: ${LAYOUT.toggleShort}px;\n      height: ${LAYOUT.toggleLength}px;\n      margin-block-start: -${LAYOUT.toggleLength / 2}px;\n      margin-inline-end: -1px;\n      border-inline-end-width: 0;\n      border-radius: ${cssVar.borderRadiusLG} 0 0 ${cssVar.borderRadiusLG}; /* 右侧面板，handle 在左边，左侧圆角 */\n    }\n  `,\n  toggleRoot: css`\n    pointer-events: none;\n    position: absolute;\n    z-index: 50;\n\n    /* Smooth transitions for all states */\n    transition: opacity 0.25s cubic-bezier(0.22, 1, 0.36, 1);\n\n    &:has(> div) {\n      pointer-events: all;\n    }\n\n    > div {\n      pointer-events: all;\n      cursor: pointer;\n\n      position: absolute;\n\n      border: 1px solid ${cssVar.colorBorder};\n\n      color: ${cssVar.colorTextTertiary};\n\n      background: var(--draggable-side-nav-bg, ${cssVar.colorBgLayout});\n      backdrop-filter: blur(8px);\n\n      /* Enhanced transitions with backdrop blur */\n      transition:\n        color 0.2s ${cssVar.motionEaseOut},\n        transform 0.2s ${cssVar.motionEaseOut},\n        box-shadow 0.2s ${cssVar.motionEaseOut};\n\n      &:hover {\n        color: ${cssVar.colorTextSecondary};\n      }\n\n      &:active {\n        transform: scale(0.95);\n        color: ${cssVar.colorText};\n      }\n    }\n  `,\n}));\n"],"mappings":";;;AAGA,MAAM,SAAS;CACb,QAAQ;CACR,cAAc;CACd,aAAa;CACd;AAED,MAAM,YAAY;AAElB,MAAa,SAAS,oBAAoB,EAAE,YAAK,wBAAc;CAC7D,MAAM,KAAG;;;;;;;;;;;;;;;;;oBAiBSA,SAAO,qBAAqB;;;sBAG1BA,SAAO,YAAY;;;;CAIvC,WAAW,KAAG;;;;;;;;;;;;;CAad,kBAAkB,KAAG;;;;;;mCAMYA,SAAO,qBAAqB;;+CAEhBA,SAAO,cAAc;;CAElE,0BAA0B,KAAG;;;;;;iCAMEA,SAAO,qBAAqB;;+CAEdA,SAAO,cAAc;;CAElE,QAAQ,KAAG;;;CAGX,aAAa,KAAG;;;;;;CAMhB,QAAQ,KAAG;;;CAGX,cAAc,KAAG;OACZ,UAAU;SACR,UAAU;;;;;;;;;;;;SAYV,UAAU;;;;;;;SAOV,UAAU;;;;;;;;;;;;;SAaV,UAAU;;;;;;;;;;UAUT,UAAU;;;;;;;WAOT,UAAU;;;;;;;;;;;CAWnB,cAAc,KAAG;;;;;;;;;;;;;;;;;;;;;;;;;CAyBjB,uBAAuB,KAAG;;;;sBAINA,SAAO,aAAa;iDACOA,SAAO,aAAa;;;;;;sBAM/CA,SAAO,mBAAmB;;;;CAI9C,kBAAkB,KAAG;;;CAGrB,mBAAmB,KAAG;;;CAGtB,YAAY,KAAG;yBACQ,OAAO,OAAO;aAC1B,OAAO,YAAY;;;;;;eAMjB,OAAO,YAAY;gBAClB,OAAO,aAAa;6BACP,OAAO,eAAe,EAAE;;;yBAG5BA,SAAO,eAAe,GAAGA,SAAO,eAAe;;;CAGtE,aAAa,KAAG;2BACS,OAAO,OAAO;aAC5B,OAAO,YAAY;;;;;;eAMjB,OAAO,YAAY;gBAClB,OAAO,aAAa;6BACP,OAAO,eAAe,EAAE;;;uBAG9BA,SAAO,eAAe,OAAOA,SAAO,eAAe;;;CAGxE,YAAY,KAAG;;;;;;;;;;;;;;;;;;0BAkBSA,SAAO,YAAY;;eAE9BA,SAAO,kBAAkB;;iDAESA,SAAO,cAAc;;;;;qBAKjDA,SAAO,cAAc;yBACjBA,SAAO,cAAc;0BACpBA,SAAO,cAAc;;;iBAG9BA,SAAO,mBAAmB;;;;;iBAK1BA,SAAO,UAAU;;;;CAIjC,EAAE"}

package/es/Drawer/Drawer.d.mts

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

package/es/Drawer/Drawer.mjs

@@ -5,26 +5,24 @@ import ActionIcon_default from "../ActionIcon/ActionIcon.mjs";
 import { memo, useMemo } from "react";
 import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
 import { Drawer } from "antd";
-import { useTheme } from "antd-style";
+import { cssVar } from "antd-style";
 import { XIcon } from "lucide-react";
 
 //#region src/Drawer/Drawer.tsx
 const Drawer$1 = memo(({ onClose, containerMaxWidth = 1024, classNames, title, placement, styles, children, height, width, extra, closeIconProps, noHeader, sidebarWidth = 280, sidebar, closeIcon, ref, ...rest }) => {
-	const theme = useTheme();
 	const headerBorder = useMemo(() => {
 		if (height === "100%" || width === "100%" || height === "100vh" || width === "100vw") return {};
 		switch (placement) {
-			case "top": return { borderBottom: `1px solid ${theme.colorBorder}` };
-			case "bottom": return { borderTop: `1px solid ${theme.colorBorder}` };
-			case "left": return { borderRight: `1px solid ${theme.colorBorder}` };
-			case "right": return { borderLeft: `1px solid ${theme.colorBorder}` };
+			case "top": return { borderBottom: `1px solid ${cssVar.colorBorder}` };
+			case "bottom": return { borderTop: `1px solid ${cssVar.colorBorder}` };
+			case "left": return { borderRight: `1px solid ${cssVar.colorBorder}` };
+			case "right": return { borderLeft: `1px solid ${cssVar.colorBorder}` };
 			default: return {};
 		}
 	}, [
 		placement,
 		height,
-		width,
-		theme.colorBorder
+		width
 	]);
 	const extraNode = /* @__PURE__ */ jsxs(FlexBasic_default, {
 		align: "center",
@@ -49,8 +47,8 @@ const Drawer$1 = memo(({ onClose, containerMaxWidth = 1024, classNames, title, p
 		paddingBlock: 12,
 		paddingInline: 16,
 		style: {
-			background: theme.colorBgLayout,
-			borderRight: `1px solid ${theme.colorBorderSecondary}`,
+			background: cssVar.colorBgLayout,
+			borderRight: `1px solid ${cssVar.colorBorderSecondary}`,
 			height: "100vh",
 			overflowX: "hidden",
 			overflowY: "auto",
@@ -66,7 +64,7 @@ const Drawer$1 = memo(({ onClose, containerMaxWidth = 1024, classNames, title, p
 		paddingBlock: 12,
 		paddingInline: 16,
 		style: {
-			background: theme.colorBgContainer,
+			background: cssVar.colorBgContainer,
 			overflowX: "hidden",
 			overflowY: "auto",
 			...styles?.sidebarContent
@@ -97,11 +95,11 @@ const Drawer$1 = memo(({ onClose, containerMaxWidth = 1024, classNames, title, p
 				...styles?.header
 			},
 			section: {
-				background: sidebar ? `linear-gradient(to right, ${theme.colorBgLayout} 49.9%, ${theme.colorBgContainer} 50%)` : theme.colorBgContainer,
+				background: sidebar ? `linear-gradient(to right, ${cssVar.colorBgLayout} 49.9%, ${cssVar.colorBgContainer} 50%)` : cssVar.colorBgContainer,
 				...styles?.section
 			},
 			wrapper: {
-				background: theme.colorBgContainer,
+				background: cssVar.colorBgContainer,
 				...headerBorder,
 				...styles?.wrapper
 			}

package/es/Drawer/Drawer.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"Drawer.mjs","names":["Drawer","headerBorder: CSSProperties","Flexbox","ActionIcon","AntdDrawer"],"sources":["../../src/Drawer/Drawer.tsx"],"sourcesContent":["'use client';\n\nimport { Drawer as AntdDrawer } from 'antd';\nimport { useTheme } from 'antd-style';\nimport { XIcon } from 'lucide-react';\nimport { CSSProperties, memo, useMemo } from 'react';\n\nimport ActionIcon from '@/ActionIcon';\nimport { Flexbox } from '@/Flex';\n\nimport type { DrawerProps } from './type';\n\nconst Drawer = memo<DrawerProps>(\n  ({\n    onClose,\n    containerMaxWidth = 1024,\n    classNames,\n    title,\n    placement,\n    styles,\n    children,\n    height,\n    width,\n    extra,\n    closeIconProps,\n    noHeader,\n    sidebarWidth = 280,\n    sidebar,\n    closeIcon,\n    ref,\n    ...rest\n  }) => {\n    const theme = useTheme();\n\n    const headerBorder: CSSProperties = useMemo(() => {\n      if (height === '100%' || width === '100%' || height === '100vh' || width === '100vw')\n        return {};\n\n      switch (placement) {\n        case 'top': {\n          return {\n            borderBottom: `1px solid ${theme.colorBorder}`,\n          };\n        }\n        case 'bottom': {\n          return {\n            borderTop: `1px solid ${theme.colorBorder}`,\n          };\n        }\n        case 'left': {\n          return {\n            borderRight: `1px solid ${theme.colorBorder}`,\n          };\n        }\n        case 'right': {\n          return {\n            borderLeft: `1px solid ${theme.colorBorder}`,\n          };\n        }\n        default: {\n          return {};\n        }\n      }\n    }, [placement, height, width, theme.colorBorder]);\n\n    const extraNode = (\n      <Flexbox\n        align={'center'}\n        className={classNames?.extra}\n        gap={4}\n        horizontal\n        justify={'flex-end'}\n        style={{\n          position: 'absolute',\n          right: 4,\n          top: 4,\n          ...styles?.extra,\n        }}\n      >\n        {extra}\n        {closeIcon || <ActionIcon icon={XIcon} onClick={onClose} {...closeIconProps} />}\n      </Flexbox>\n    );\n\n    const sidebarContent = (\n      <>\n        <Flexbox\n          className={classNames?.sidebar}\n          paddingBlock={12}\n          paddingInline={16}\n          style={{\n            background: theme.colorBgLayout,\n            borderRight: `1px solid ${theme.colorBorderSecondary}`,\n            height: '100vh',\n            overflowX: 'hidden',\n            overflowY: 'auto',\n            position: 'sticky',\n            top: 0,\n            ...styles?.sidebar,\n          }}\n          width={sidebarWidth}\n        >\n          {sidebar}\n        </Flexbox>\n        <Flexbox\n          className={classNames?.sidebarContent}\n          flex={1}\n          paddingBlock={12}\n          paddingInline={16}\n          style={{\n            background: theme.colorBgContainer,\n            overflowX: 'hidden',\n            overflowY: 'auto',\n            ...styles?.sidebarContent,\n          }}\n        >\n          {children}\n        </Flexbox>\n      </>\n    );\n\n    return (\n      <AntdDrawer\n        classNames={classNames}\n        closable={false}\n        extra={noHeader ? undefined : extraNode}\n        height={height}\n        keyboard={true}\n        onClose={onClose}\n        panelRef={ref}\n        placement={placement}\n        styles={\n          typeof styles === 'function'\n            ? styles\n            : {\n                ...styles,\n                body: {\n                  background: 'transparent',\n                  paddingBlock: sidebar ? 0 : 12,\n                  paddingInline: sidebar ? 0 : 16,\n                  ...styles?.body,\n                },\n                header: {\n                  background: 'transparent',\n                  display: noHeader ? 'none' : undefined,\n                  padding: 4,\n                  ...styles?.header,\n                },\n                section: {\n                  background: sidebar\n                    ? `linear-gradient(to right, ${theme.colorBgLayout} 49.9%, ${theme.colorBgContainer} 50%)`\n                    : theme.colorBgContainer,\n                  ...styles?.section,\n                },\n                wrapper: {\n                  background: theme.colorBgContainer,\n                  ...headerBorder,\n                  ...styles?.wrapper,\n                },\n              }\n        }\n        title={\n          <Flexbox\n            align={'center'}\n            className={classNames?.title}\n            horizontal\n            justify={'flex-start'}\n            paddingBlock={8}\n            paddingInline={16}\n            style={{\n              justifySelf: 'center',\n              maxWidth: containerMaxWidth,\n              width: '100%',\n              ...styles?.title,\n            }}\n          >\n            {title}\n          </Flexbox>\n        }\n        width={width}\n        {...rest}\n      >\n        <Flexbox\n          className={classNames?.bodyContent}\n          horizontal={!!sidebar}\n          style={{\n            justifySelf: 'center',\n            maxWidth: containerMaxWidth,\n            minHeight: '100%',\n            overflow: sidebar ? 'visible' : undefined,\n            width: '100%',\n            ...styles?.bodyContent,\n          }}\n        >\n          {noHeader && extraNode}\n          {sidebar ? sidebarContent : children}\n        </Flexbox>\n      </AntdDrawer>\n    );\n  },\n);\n\nDrawer.displayName = 'Drawer';\n\nexport default Drawer;\n"],"mappings":";;;;;;;;;;;AAYA,MAAMA,WAAS,MACZ,EACC,SACA,oBAAoB,MACpB,YACA,OACA,WACA,QACA,UACA,QACA,OACA,OACA,gBACA,UACA,eAAe,KACf,SACA,WACA,KACA,GAAG,WACC;CACJ,MAAM,QAAQ,UAAU;CAExB,MAAMC,eAA8B,cAAc;AAChD,MAAI,WAAW,UAAU,UAAU,UAAU,WAAW,WAAW,UAAU,QAC3E,QAAO,EAAE;AAEX,UAAQ,WAAR;GACE,KAAK,MACH,QAAO,EACL,cAAc,aAAa,MAAM,eAClC;GAEH,KAAK,SACH,QAAO,EACL,WAAW,aAAa,MAAM,eAC/B;GAEH,KAAK,OACH,QAAO,EACL,aAAa,aAAa,MAAM,eACjC;GAEH,KAAK,QACH,QAAO,EACL,YAAY,aAAa,MAAM,eAChC;GAEH,QACE,QAAO,EAAE;;IAGZ;EAAC;EAAW;EAAQ;EAAO,MAAM;EAAY,CAAC;CAEjD,MAAM,YACJ,qBAACC;EACC,OAAO;EACP,WAAW,YAAY;EACvB,KAAK;EACL;EACA,SAAS;EACT,OAAO;GACL,UAAU;GACV,OAAO;GACP,KAAK;GACL,GAAG,QAAQ;GACZ;aAEA,OACA,aAAa,oBAACC;GAAW,MAAM;GAAO,SAAS;GAAS,GAAI;IAAkB;GACvE;CAGZ,MAAM,iBACJ,8CACE,oBAACD;EACC,WAAW,YAAY;EACvB,cAAc;EACd,eAAe;EACf,OAAO;GACL,YAAY,MAAM;GAClB,aAAa,aAAa,MAAM;GAChC,QAAQ;GACR,WAAW;GACX,WAAW;GACX,UAAU;GACV,KAAK;GACL,GAAG,QAAQ;GACZ;EACD,OAAO;YAEN;GACO,EACV,oBAACA;EACC,WAAW,YAAY;EACvB,MAAM;EACN,cAAc;EACd,eAAe;EACf,OAAO;GACL,YAAY,MAAM;GAClB,WAAW;GACX,WAAW;GACX,GAAG,QAAQ;GACZ;EAEA;GACO,IACT;AAGL,QACE,oBAACE;EACa;EACZ,UAAU;EACV,OAAO,WAAW,SAAY;EACtB;EACR,UAAU;EACD;EACT,UAAU;EACC;EACX,QACE,OAAO,WAAW,aACd,SACA;GACE,GAAG;GACH,MAAM;IACJ,YAAY;IACZ,cAAc,UAAU,IAAI;IAC5B,eAAe,UAAU,IAAI;IAC7B,GAAG,QAAQ;IACZ;GACD,QAAQ;IACN,YAAY;IACZ,SAAS,WAAW,SAAS;IAC7B,SAAS;IACT,GAAG,QAAQ;IACZ;GACD,SAAS;IACP,YAAY,UACR,6BAA6B,MAAM,cAAc,UAAU,MAAM,iBAAiB,SAClF,MAAM;IACV,GAAG,QAAQ;IACZ;GACD,SAAS;IACP,YAAY,MAAM;IAClB,GAAG;IACH,GAAG,QAAQ;IACZ;GACF;EAEP,OACE,oBAACF;GACC,OAAO;GACP,WAAW,YAAY;GACvB;GACA,SAAS;GACT,cAAc;GACd,eAAe;GACf,OAAO;IACL,aAAa;IACb,UAAU;IACV,OAAO;IACP,GAAG,QAAQ;IACZ;aAEA;IACO;EAEL;EACP,GAAI;YAEJ,qBAACA;GACC,WAAW,YAAY;GACvB,YAAY,CAAC,CAAC;GACd,OAAO;IACL,aAAa;IACb,UAAU;IACV,WAAW;IACX,UAAU,UAAU,YAAY;IAChC,OAAO;IACP,GAAG,QAAQ;IACZ;cAEA,YAAY,WACZ,UAAU,iBAAiB;IACpB;GACC;EAGlB;AAED,SAAO,cAAc;AAErB,qBAAeF"}
+{"version":3,"file":"Drawer.mjs","names":["Drawer","headerBorder: CSSProperties","Flexbox","ActionIcon","AntdDrawer"],"sources":["../../src/Drawer/Drawer.tsx"],"sourcesContent":["'use client';\n\nimport { Drawer as AntdDrawer } from 'antd';\nimport { cssVar } from 'antd-style';\nimport { XIcon } from 'lucide-react';\nimport { CSSProperties, memo, useMemo } from 'react';\n\nimport ActionIcon from '@/ActionIcon';\nimport { Flexbox } from '@/Flex';\n\nimport type { DrawerProps } from './type';\n\nconst Drawer = memo<DrawerProps>(\n  ({\n    onClose,\n    containerMaxWidth = 1024,\n    classNames,\n    title,\n    placement,\n    styles,\n    children,\n    height,\n    width,\n    extra,\n    closeIconProps,\n    noHeader,\n    sidebarWidth = 280,\n    sidebar,\n    closeIcon,\n    ref,\n    ...rest\n  }) => {\n    const headerBorder: CSSProperties = useMemo(() => {\n      if (height === '100%' || width === '100%' || height === '100vh' || width === '100vw')\n        return {};\n\n      switch (placement) {\n        case 'top': {\n          return {\n            borderBottom: `1px solid ${cssVar.colorBorder}`,\n          };\n        }\n        case 'bottom': {\n          return {\n            borderTop: `1px solid ${cssVar.colorBorder}`,\n          };\n        }\n        case 'left': {\n          return {\n            borderRight: `1px solid ${cssVar.colorBorder}`,\n          };\n        }\n        case 'right': {\n          return {\n            borderLeft: `1px solid ${cssVar.colorBorder}`,\n          };\n        }\n        default: {\n          return {};\n        }\n      }\n    }, [placement, height, width]);\n\n    const extraNode = (\n      <Flexbox\n        align={'center'}\n        className={classNames?.extra}\n        gap={4}\n        horizontal\n        justify={'flex-end'}\n        style={{\n          position: 'absolute',\n          right: 4,\n          top: 4,\n          ...styles?.extra,\n        }}\n      >\n        {extra}\n        {closeIcon || <ActionIcon icon={XIcon} onClick={onClose} {...closeIconProps} />}\n      </Flexbox>\n    );\n\n    const sidebarContent = (\n      <>\n        <Flexbox\n          className={classNames?.sidebar}\n          paddingBlock={12}\n          paddingInline={16}\n          style={{\n            background: cssVar.colorBgLayout,\n            borderRight: `1px solid ${cssVar.colorBorderSecondary}`,\n            height: '100vh',\n            overflowX: 'hidden',\n            overflowY: 'auto',\n            position: 'sticky',\n            top: 0,\n            ...styles?.sidebar,\n          }}\n          width={sidebarWidth}\n        >\n          {sidebar}\n        </Flexbox>\n        <Flexbox\n          className={classNames?.sidebarContent}\n          flex={1}\n          paddingBlock={12}\n          paddingInline={16}\n          style={{\n            background: cssVar.colorBgContainer,\n            overflowX: 'hidden',\n            overflowY: 'auto',\n            ...styles?.sidebarContent,\n          }}\n        >\n          {children}\n        </Flexbox>\n      </>\n    );\n\n    return (\n      <AntdDrawer\n        classNames={classNames}\n        closable={false}\n        extra={noHeader ? undefined : extraNode}\n        height={height}\n        keyboard={true}\n        onClose={onClose}\n        panelRef={ref}\n        placement={placement}\n        styles={\n          typeof styles === 'function'\n            ? styles\n            : {\n                ...styles,\n                body: {\n                  background: 'transparent',\n                  paddingBlock: sidebar ? 0 : 12,\n                  paddingInline: sidebar ? 0 : 16,\n                  ...styles?.body,\n                },\n                header: {\n                  background: 'transparent',\n                  display: noHeader ? 'none' : undefined,\n                  padding: 4,\n                  ...styles?.header,\n                },\n                section: {\n                  background: sidebar\n                    ? `linear-gradient(to right, ${cssVar.colorBgLayout} 49.9%, ${cssVar.colorBgContainer} 50%)`\n                    : cssVar.colorBgContainer,\n                  ...styles?.section,\n                },\n                wrapper: {\n                  background: cssVar.colorBgContainer,\n                  ...headerBorder,\n                  ...styles?.wrapper,\n                },\n              }\n        }\n        title={\n          <Flexbox\n            align={'center'}\n            className={classNames?.title}\n            horizontal\n            justify={'flex-start'}\n            paddingBlock={8}\n            paddingInline={16}\n            style={{\n              justifySelf: 'center',\n              maxWidth: containerMaxWidth,\n              width: '100%',\n              ...styles?.title,\n            }}\n          >\n            {title}\n          </Flexbox>\n        }\n        width={width}\n        {...rest}\n      >\n        <Flexbox\n          className={classNames?.bodyContent}\n          horizontal={!!sidebar}\n          style={{\n            justifySelf: 'center',\n            maxWidth: containerMaxWidth,\n            minHeight: '100%',\n            overflow: sidebar ? 'visible' : undefined,\n            width: '100%',\n            ...styles?.bodyContent,\n          }}\n        >\n          {noHeader && extraNode}\n          {sidebar ? sidebarContent : children}\n        </Flexbox>\n      </AntdDrawer>\n    );\n  },\n);\n\nDrawer.displayName = 'Drawer';\n\nexport default Drawer;\n"],"mappings":";;;;;;;;;;;AAYA,MAAMA,WAAS,MACZ,EACC,SACA,oBAAoB,MACpB,YACA,OACA,WACA,QACA,UACA,QACA,OACA,OACA,gBACA,UACA,eAAe,KACf,SACA,WACA,KACA,GAAG,WACC;CACJ,MAAMC,eAA8B,cAAc;AAChD,MAAI,WAAW,UAAU,UAAU,UAAU,WAAW,WAAW,UAAU,QAC3E,QAAO,EAAE;AAEX,UAAQ,WAAR;GACE,KAAK,MACH,QAAO,EACL,cAAc,aAAa,OAAO,eACnC;GAEH,KAAK,SACH,QAAO,EACL,WAAW,aAAa,OAAO,eAChC;GAEH,KAAK,OACH,QAAO,EACL,aAAa,aAAa,OAAO,eAClC;GAEH,KAAK,QACH,QAAO,EACL,YAAY,aAAa,OAAO,eACjC;GAEH,QACE,QAAO,EAAE;;IAGZ;EAAC;EAAW;EAAQ;EAAM,CAAC;CAE9B,MAAM,YACJ,qBAACC;EACC,OAAO;EACP,WAAW,YAAY;EACvB,KAAK;EACL;EACA,SAAS;EACT,OAAO;GACL,UAAU;GACV,OAAO;GACP,KAAK;GACL,GAAG,QAAQ;GACZ;aAEA,OACA,aAAa,oBAACC;GAAW,MAAM;GAAO,SAAS;GAAS,GAAI;IAAkB;GACvE;CAGZ,MAAM,iBACJ,8CACE,oBAACD;EACC,WAAW,YAAY;EACvB,cAAc;EACd,eAAe;EACf,OAAO;GACL,YAAY,OAAO;GACnB,aAAa,aAAa,OAAO;GACjC,QAAQ;GACR,WAAW;GACX,WAAW;GACX,UAAU;GACV,KAAK;GACL,GAAG,QAAQ;GACZ;EACD,OAAO;YAEN;GACO,EACV,oBAACA;EACC,WAAW,YAAY;EACvB,MAAM;EACN,cAAc;EACd,eAAe;EACf,OAAO;GACL,YAAY,OAAO;GACnB,WAAW;GACX,WAAW;GACX,GAAG,QAAQ;GACZ;EAEA;GACO,IACT;AAGL,QACE,oBAACE;EACa;EACZ,UAAU;EACV,OAAO,WAAW,SAAY;EACtB;EACR,UAAU;EACD;EACT,UAAU;EACC;EACX,QACE,OAAO,WAAW,aACd,SACA;GACE,GAAG;GACH,MAAM;IACJ,YAAY;IACZ,cAAc,UAAU,IAAI;IAC5B,eAAe,UAAU,IAAI;IAC7B,GAAG,QAAQ;IACZ;GACD,QAAQ;IACN,YAAY;IACZ,SAAS,WAAW,SAAS;IAC7B,SAAS;IACT,GAAG,QAAQ;IACZ;GACD,SAAS;IACP,YAAY,UACR,6BAA6B,OAAO,cAAc,UAAU,OAAO,iBAAiB,SACpF,OAAO;IACX,GAAG,QAAQ;IACZ;GACD,SAAS;IACP,YAAY,OAAO;IACnB,GAAG;IACH,GAAG,QAAQ;IACZ;GACF;EAEP,OACE,oBAACF;GACC,OAAO;GACP,WAAW,YAAY;GACvB;GACA,SAAS;GACT,cAAc;GACd,eAAe;GACf,OAAO;IACL,aAAa;IACb,UAAU;IACV,OAAO;IACP,GAAG,QAAQ;IACZ;aAEA;IACO;EAEL;EACP,GAAI;YAEJ,qBAACA;GACC,WAAW,YAAY;GACvB,YAAY,CAAC,CAAC;GACd,OAAO;IACL,aAAa;IACb,UAAU;IACV,WAAW;IACX,UAAU,UAAU,YAAY;IAChC,OAAO;IACP,GAAG,QAAQ;IACZ;cAEA,YAAY,WACZ,UAAU,iBAAiB;IACpB;GACC;EAGlB;AAED,SAAO,cAAc;AAErB,qBAAeF"}

package/es/Dropdown/Dropdown.d.mts

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

package/es/EditableText/EditableText.d.mts

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

package/es/EditableText/EditableText.mjs

@@ -5,8 +5,8 @@ import ActionIcon_default from "../ActionIcon/ActionIcon.mjs";
 import ControlInput_default from "./ControlInput.mjs";
 import { memo, useMemo } from "react";
 import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
-import useMergeState from "use-merge-value";
 import { cx } from "antd-style";
+import useMergeState from "use-merge-value";
 import { Edit3 } from "lucide-react";
 import { useHotkeys } from "react-hotkeys-hook";
 

package/es/EmojiPicker/AvatarUploader.mjs

@@ -11,7 +11,7 @@ import Tag_default from "../Tag/Tag.mjs";
 import { memo, useCallback, useRef, useState } from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { Upload, message } from "antd";
-import { useTheme } from "antd-style";
+import { cssVar } from "antd-style";
 import { ChevronLeftIcon, ImageUpIcon } from "lucide-react";
 import AvatarEditor from "react-avatar-editor";
 
@@ -27,7 +27,6 @@ const createUploadImageHandler = (onUploadImage) => (file) => {
 const AvatarUploader = memo(({ shape, onChange, texts, compressSize = 256, onUpload }) => {
 	const editor = useRef(null);
 	const [previewImage, setPreviewImage] = useState("");
-	const theme = useTheme();
 	const { t } = useTranslation(emojiPicker_default);
 	const fileTypeErrorText = texts?.fileTypeError ?? t("emojiPicker.fileTypeError");
 	const draggerDescText = texts?.draggerDesc ?? t("emojiPicker.draggerDesc");
@@ -66,12 +65,12 @@ const AvatarUploader = memo(({ shape, onChange, texts, compressSize = 256, onUpl
 				width: compressSize,
 				children: [
 					/* @__PURE__ */ jsx(Icon_default, {
-						color: theme.colorTextDescription,
+						color: cssVar.colorTextDescription,
 						icon: ImageUpIcon,
 						size: 48
 					}),
 					/* @__PURE__ */ jsx(Text_default, {
-						color: theme.colorTextSecondary,
+						color: cssVar.colorTextSecondary,
 						children: draggerDescText
 					}),
 					/* @__PURE__ */ jsxs(Center_default, {

package/es/EmojiPicker/AvatarUploader.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"AvatarUploader.mjs","names":["emojiPickerMessages","Flexbox","Center","Icon","Text","Tag","Button"],"sources":["../../src/EmojiPicker/AvatarUploader.tsx"],"sourcesContent":["'use client';\n\nimport { type GetProp, Upload, type UploadProps, message } from 'antd';\nimport { useTheme } from 'antd-style';\nimport { ChevronLeftIcon, ImageUpIcon } from 'lucide-react';\nimport { memo, useCallback, useRef, useState } from 'react';\nimport AvatarEditor from 'react-avatar-editor';\n\nimport Button from '@/Button';\nimport { Center, Flexbox } from '@/Flex';\nimport Icon from '@/Icon';\nimport Tag from '@/Tag';\nimport Text from '@/Text';\nimport emojiPickerMessages from '@/i18n/resources/en/emojiPicker';\nimport { useTranslation } from '@/i18n/useTranslation';\n\nimport { AvatarUploaderProps } from './type';\n\ntype FileType = Parameters<GetProp<UploadProps, 'beforeUpload'>>[0];\n\nconst { Dragger } = Upload;\n\nconst createUploadImageHandler = (onUploadImage: (base64: string) => void) => (file: any) => {\n  const reader = new FileReader();\n  reader.readAsDataURL(file);\n  reader.addEventListener('load', () => {\n    onUploadImage(String(reader.result));\n  });\n};\n\nconst AvatarUploader = memo<AvatarUploaderProps>(\n  ({ shape, onChange, texts, compressSize = 256, onUpload }) => {\n    const editor = useRef<any>(null);\n    const [previewImage, setPreviewImage] = useState('');\n    const theme = useTheme();\n    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={theme.colorTextDescription} icon={ImageUpIcon} size={48} />\n              <Text color={theme.colorTextSecondary}>{draggerDescText}</Text>\n              <Center gap={4} horizontal>\n                <Tag>JPG</Tag>\n                <Tag>PNG</Tag>\n                <Tag>GIF</Tag>\n                <Tag>WEBP</Tag>\n              </Center>\n            </Center>\n          </Dragger>\n        )}\n        {previewImage && (\n          <Center gap={8} style={{ position: 'relative' }} width={'100%'}>\n            <AvatarEditor\n              border={0}\n              borderRadius={shape === 'square' ? undefined : compressSize / 2}\n              height={compressSize}\n              image={previewImage}\n              ref={editor}\n              width={compressSize}\n            />\n\n            <Flexbox gap={8} horizontal style={{ position: 'relative' }} width={'100%'}>\n              <Button\n                icon={ChevronLeftIcon}\n                onClick={() => setPreviewImage('')}\n                style={{ flex: 'none' }}\n              />\n              <Button onClick={handleUpload} style={{ flex: 1, fontWeight: 500 }} type={'primary'}>\n                {uploadBtnText}\n              </Button>\n            </Flexbox>\n          </Center>\n        )}\n      </Flexbox>\n    );\n  },\n);\n\nAvatarUploader.displayName = 'AvatarUploader';\n\nexport default AvatarUploader;\n"],"mappings":";;;;;;;;;;;;;;;;;;AAoBA,MAAM,EAAE,YAAY;AAEpB,MAAM,4BAA4B,mBAA6C,SAAc;CAC3F,MAAM,SAAS,IAAI,YAAY;AAC/B,QAAO,cAAc,KAAK;AAC1B,QAAO,iBAAiB,cAAc;AACpC,gBAAc,OAAO,OAAO,OAAO,CAAC;GACpC;;AAGJ,MAAM,iBAAiB,MACpB,EAAE,OAAO,UAAU,OAAO,eAAe,KAAK,eAAe;CAC5D,MAAM,SAAS,OAAY,KAAK;CAChC,MAAM,CAAC,cAAc,mBAAmB,SAAS,GAAG;CACpD,MAAM,QAAQ,UAAU;CACxB,MAAM,EAAE,MAAM,eAAeA,oBAAoB;CAEjD,MAAM,oBAAoB,OAAO,iBAAiB,EAAE,4BAA4B;CAChF,MAAM,kBAAkB,OAAO,eAAe,EAAE,0BAA0B;CAC1E,MAAM,gBAAgB,OAAO,aAAa,EAAE,wBAAwB;CAEpE,MAAM,eAAe,aAClB,SAAmB;AAMlB,MAAI,EAJF,KAAK,SAAS,gBACd,KAAK,SAAS,eACd,KAAK,SAAS,eACd,KAAK,SAAS,eACC;AACf,WAAQ,MAAM,kBAAkB;AAChC;;AAEF,SAAO,0BAA0B,WAAW;AAC1C,mBAAgB,OAAO;IACvB,CAAC,KAAK;IAEV,CAAC,kBAAkB,CACpB;CAED,MAAM,qBAAqB;AACzB,MAAI,CAAC,OAAO,QAAS;EACrB,MAAM,eAAe,OAAO,QAAQ,wBAAwB;AAE5D,WADgB,aAAa,WAAW,CACvB;AAEjB,MAAI,CAAC,SAAU;AAGf,eAAa,QACV,SAAS;AACR,OAAI,KAEF,UADa,IAAI,KAAK,CAAC,KAAK,EAAE,eAAe,EAAE,MAAM,cAAc,CAAC,CACtD;KAGlB,cACA,IACD;;AAGH,QACE,qBAACC;EAAQ,SAAS;EAAI,OAAO,EAAE,UAAU,YAAY;EAAE,OAAO;aAC3D,CAAC,gBACA,oBAAC;GACC,QAAQ;GACM;GACd,kBAAkB,KAAK;GACvB,UAAU;GACV,UAAU;aAEV,qBAACC;IAAO,KAAK;IAAI,QAAQ;IAAc,OAAO;;KAC5C,oBAACC;MAAK,OAAO,MAAM;MAAsB,MAAM;MAAa,MAAM;OAAM;KACxE,oBAACC;MAAK,OAAO,MAAM;gBAAqB;OAAuB;KAC/D,qBAACF;MAAO,KAAK;MAAG;;OACd,oBAACG,yBAAI,QAAS;OACd,oBAACA,yBAAI,QAAS;OACd,oBAACA,yBAAI,QAAS;OACd,oBAACA,yBAAI,SAAU;;OACR;;KACF;IACD,EAEX,gBACC,qBAACH;GAAO,KAAK;GAAG,OAAO,EAAE,UAAU,YAAY;GAAE,OAAO;cACtD,oBAAC;IACC,QAAQ;IACR,cAAc,UAAU,WAAW,SAAY,eAAe;IAC9D,QAAQ;IACR,OAAO;IACP,KAAK;IACL,OAAO;KACP,EAEF,qBAACD;IAAQ,KAAK;IAAG;IAAW,OAAO,EAAE,UAAU,YAAY;IAAE,OAAO;eAClE,oBAACK;KACC,MAAM;KACN,eAAe,gBAAgB,GAAG;KAClC,OAAO,EAAE,MAAM,QAAQ;MACvB,EACF,oBAACA;KAAO,SAAS;KAAc,OAAO;MAAE,MAAM;MAAG,YAAY;MAAK;KAAE,MAAM;eACvE;MACM;KACD;IACH;GAEH;EAGf;AAED,eAAe,cAAc;AAE7B,6BAAe"}
+{"version":3,"file":"AvatarUploader.mjs","names":["emojiPickerMessages","Flexbox","Center","Icon","Text","Tag","Button"],"sources":["../../src/EmojiPicker/AvatarUploader.tsx"],"sourcesContent":["'use client';\n\nimport { type GetProp, Upload, type UploadProps, message } from 'antd';\nimport { 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 Icon from '@/Icon';\nimport Tag from '@/Tag';\nimport Text from '@/Text';\nimport emojiPickerMessages from '@/i18n/resources/en/emojiPicker';\nimport { useTranslation } from '@/i18n/useTranslation';\n\nimport { AvatarUploaderProps } from './type';\n\ntype FileType = Parameters<GetProp<UploadProps, 'beforeUpload'>>[0];\n\nconst { Dragger } = Upload;\n\nconst createUploadImageHandler = (onUploadImage: (base64: string) => void) => (file: any) => {\n  const reader = new FileReader();\n  reader.readAsDataURL(file);\n  reader.addEventListener('load', () => {\n    onUploadImage(String(reader.result));\n  });\n};\n\nconst AvatarUploader = memo<AvatarUploaderProps>(\n  ({ shape, onChange, texts, compressSize = 256, onUpload }) => {\n    const editor = useRef<any>(null);\n    const [previewImage, setPreviewImage] = useState('');\n    const { 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 gap={4} horizontal>\n                <Tag>JPG</Tag>\n                <Tag>PNG</Tag>\n                <Tag>GIF</Tag>\n                <Tag>WEBP</Tag>\n              </Center>\n            </Center>\n          </Dragger>\n        )}\n        {previewImage && (\n          <Center gap={8} style={{ position: 'relative' }} width={'100%'}>\n            <AvatarEditor\n              border={0}\n              borderRadius={shape === 'square' ? undefined : compressSize / 2}\n              height={compressSize}\n              image={previewImage}\n              ref={editor}\n              width={compressSize}\n            />\n\n            <Flexbox gap={8} horizontal style={{ position: 'relative' }} width={'100%'}>\n              <Button\n                icon={ChevronLeftIcon}\n                onClick={() => setPreviewImage('')}\n                style={{ flex: 'none' }}\n              />\n              <Button onClick={handleUpload} style={{ flex: 1, fontWeight: 500 }} type={'primary'}>\n                {uploadBtnText}\n              </Button>\n            </Flexbox>\n          </Center>\n        )}\n      </Flexbox>\n    );\n  },\n);\n\nAvatarUploader.displayName = 'AvatarUploader';\n\nexport default AvatarUploader;\n"],"mappings":";;;;;;;;;;;;;;;;;;AAoBA,MAAM,EAAE,YAAY;AAEpB,MAAM,4BAA4B,mBAA6C,SAAc;CAC3F,MAAM,SAAS,IAAI,YAAY;AAC/B,QAAO,cAAc,KAAK;AAC1B,QAAO,iBAAiB,cAAc;AACpC,gBAAc,OAAO,OAAO,OAAO,CAAC;GACpC;;AAGJ,MAAM,iBAAiB,MACpB,EAAE,OAAO,UAAU,OAAO,eAAe,KAAK,eAAe;CAC5D,MAAM,SAAS,OAAY,KAAK;CAChC,MAAM,CAAC,cAAc,mBAAmB,SAAS,GAAG;CACpD,MAAM,EAAE,MAAM,eAAeA,oBAAoB;CAEjD,MAAM,oBAAoB,OAAO,iBAAiB,EAAE,4BAA4B;CAChF,MAAM,kBAAkB,OAAO,eAAe,EAAE,0BAA0B;CAC1E,MAAM,gBAAgB,OAAO,aAAa,EAAE,wBAAwB;CAEpE,MAAM,eAAe,aAClB,SAAmB;AAMlB,MAAI,EAJF,KAAK,SAAS,gBACd,KAAK,SAAS,eACd,KAAK,SAAS,eACd,KAAK,SAAS,eACC;AACf,WAAQ,MAAM,kBAAkB;AAChC;;AAEF,SAAO,0BAA0B,WAAW;AAC1C,mBAAgB,OAAO;IACvB,CAAC,KAAK;IAEV,CAAC,kBAAkB,CACpB;CAED,MAAM,qBAAqB;AACzB,MAAI,CAAC,OAAO,QAAS;EACrB,MAAM,eAAe,OAAO,QAAQ,wBAAwB;AAE5D,WADgB,aAAa,WAAW,CACvB;AAEjB,MAAI,CAAC,SAAU;AAGf,eAAa,QACV,SAAS;AACR,OAAI,KAEF,UADa,IAAI,KAAK,CAAC,KAAK,EAAE,eAAe,EAAE,MAAM,cAAc,CAAC,CACtD;KAGlB,cACA,IACD;;AAGH,QACE,qBAACC;EAAQ,SAAS;EAAI,OAAO,EAAE,UAAU,YAAY;EAAE,OAAO;aAC3D,CAAC,gBACA,oBAAC;GACC,QAAQ;GACM;GACd,kBAAkB,KAAK;GACvB,UAAU;GACV,UAAU;aAEV,qBAACC;IAAO,KAAK;IAAI,QAAQ;IAAc,OAAO;;KAC5C,oBAACC;MAAK,OAAO,OAAO;MAAsB,MAAM;MAAa,MAAM;OAAM;KACzE,oBAACC;MAAK,OAAO,OAAO;gBAAqB;OAAuB;KAChE,qBAACF;MAAO,KAAK;MAAG;;OACd,oBAACG,yBAAI,QAAS;OACd,oBAACA,yBAAI,QAAS;OACd,oBAACA,yBAAI,QAAS;OACd,oBAACA,yBAAI,SAAU;;OACR;;KACF;IACD,EAEX,gBACC,qBAACH;GAAO,KAAK;GAAG,OAAO,EAAE,UAAU,YAAY;GAAE,OAAO;cACtD,oBAAC;IACC,QAAQ;IACR,cAAc,UAAU,WAAW,SAAY,eAAe;IAC9D,QAAQ;IACR,OAAO;IACP,KAAK;IACL,OAAO;KACP,EAEF,qBAACD;IAAQ,KAAK;IAAG;IAAW,OAAO,EAAE,UAAU,YAAY;IAAE,OAAO;eAClE,oBAACK;KACC,MAAM;KACN,eAAe,gBAAgB,GAAG;KAClC,OAAO,EAAE,MAAM,QAAQ;MACvB,EACF,oBAACA;KAAO,SAAS;KAAc,OAAO;MAAE,MAAM;MAAG,YAAY;MAAK;KAAE,MAAM;eACvE;MACM;KACD;IACH;GAEH;EAGf;AAED,eAAe,cAAc;AAE7B,6BAAe"}

package/es/EmojiPicker/EmojiPicker.d.mts

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

package/es/EmojiPicker/EmojiPicker.mjs

@@ -9,15 +9,17 @@ import Tabs_default from "../Tabs/Tabs.mjs";
 import emojiPicker_default from "../i18n/resources/en/emojiPicker.mjs";
 import { useTranslation } from "../i18n/useTranslation.mjs";
 import AvatarUploader_default from "./AvatarUploader.mjs";
-import { useStyles } from "./style.mjs";
-import { memo, useRef, useState } from "react";
+import { styles } from "./style.mjs";
+import { memo, useMemo, useRef, useState } from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { Popover } from "antd";
+import { cx, useTheme } from "antd-style";
 import useMergeState from "use-merge-value";
 import { SmileIcon, TrashIcon, UploadIcon } from "lucide-react";
-import useSWR from "swr";
+import chroma from "chroma-js";
 import data from "@emoji-mart/data";
 import Picker from "@emoji-mart/react";
+import useSWR from "swr";
 
 //#region src/EmojiPicker/EmojiPicker.tsx
 const DEFAULT_AVATAR = "🤖";
@@ -30,7 +32,11 @@ const EmojiPicker = memo(({ value, defaultAvatar = DEFAULT_AVATAR, onChange, loc
 		value: open
 	});
 	const [tab, setTab] = useState("emoji");
-	const { cx, styles, theme } = useStyles();
+	const theme = useTheme();
+	const pickerCssVariables = useMemo(() => ({
+		"--emoji-picker-rgb-accent": chroma(theme.colorPrimary).rgb().join(", "),
+		"--emoji-picker-rgb-background": chroma(theme.colorBgElevated).rgb().join(", ")
+	}), [theme.colorPrimary, theme.colorBgElevated]);
 	const { data: i18n } = useSWR(locale, async () => await import(`@emoji-mart/data/i18n/${locale.split("-")[0]}.json`), {
 		revalidateOnFocus: false,
 		revalidateOnMount: false
@@ -88,6 +94,7 @@ const EmojiPicker = memo(({ value, defaultAvatar = DEFAULT_AVATAR, onChange, loc
 			style: {
 				minWidth: 310,
 				paddingTop: showTabs ? 4 : 0,
+				...pickerCssVariables,
 				...popupStyle
 			},
 			children: [

package/es/EmojiPicker/EmojiPicker.mjs.map

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

package/es/EmojiPicker/style.mjs

@@ -1,15 +1,15 @@
-import { createStyles } from "antd-style";
-import chroma from "chroma-js";
+import { createStaticStyles } from "antd-style";
 
 //#region src/EmojiPicker/style.ts
-const useStyles = createStyles(({ css: css$1, token, prefixCls }) => ({
+const prefixCls = "ant";
+const styles = createStaticStyles(({ css: css$1, cssVar: cssVar$1 }) => ({
 	picker: css$1`
     position: relative;
 
     em-emoji-picker {
-      --rgb-accent: ${chroma(token.colorPrimary).rgb().join(",")};
+      --rgb-accent: var(--emoji-picker-rgb-accent, 0, 0, 0);
       --shadow: none;
-      --rgb-background: ${chroma(token.colorBgElevated).rgb().join(",")};
+      --rgb-background: var(--emoji-picker-rgb-background, 255, 255, 255);
       --border-radius: 0;
     }
   `,
@@ -21,14 +21,14 @@ const useStyles = createStyles(({ css: css$1, token, prefixCls }) => ({
   `,
 	root: css$1`
     position: relative;
-    transition: background 150ms ${token.motionEaseOut};
+    transition: background 150ms ${cssVar$1.motionEaseOut};
 
     &:hover {
-      background: ${token.colorFillSecondary};
+      background: ${cssVar$1.colorFillSecondary};
     }
   `,
 	tabs: css$1`
-    border-block-end: 1px solid ${token.colorBorderSecondary};
+    border-block-end: 1px solid ${cssVar$1.colorBorderSecondary};
 
     .ant-tabs-tab {
       display: flex;
@@ -43,5 +43,5 @@ const useStyles = createStyles(({ css: css$1, token, prefixCls }) => ({
 }));
 
 //#endregion
-export { useStyles };
+export { styles };
 //# sourceMappingURL=style.mjs.map

package/es/EmojiPicker/style.mjs.map

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

package/es/Empty/Empty.mjs

@@ -7,11 +7,11 @@ import Text_default from "../Text/Text.mjs";
 import FluentEmoji_default from "../FluentEmoji/FluentEmoji.mjs";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { Empty } from "antd";
-import { useTheme } from "antd-style";
+import { cssVar, useThemeMode } from "antd-style";
 
 //#region src/Empty/Empty.tsx
 const Empty$1 = ({ title, description, icon, image, emoji, imageSize = 48, iconColor, action, children, imageProps, align, actionProps, type = "default", titleProps, descriptionProps, ...rest }) => {
-	const theme = useTheme();
+	const { isDarkMode } = useThemeMode();
 	const isPage = type === "page";
 	const alignValue = align || (isPage ? "flex-start" : "center");
 	const isCenter = alignValue === "center";
@@ -29,7 +29,7 @@ const Empty$1 = ({ title, description, icon, image, emoji, imageSize = 48, iconC
 			...imageProps?.style
 		},
 		children: [icon && /* @__PURE__ */ jsx(Icon_default, {
-			color: iconColor || (theme.isDarkMode ? theme.colorTextQuaternary : theme.colorTextSecondary),
+			color: iconColor || (isDarkMode ? cssVar.colorTextQuaternary : cssVar.colorTextSecondary),
 			icon,
 			size: imageSize * .66
 		}), emoji && /* @__PURE__ */ jsx(FluentEmoji_default, {
@@ -56,7 +56,7 @@ const Empty$1 = ({ title, description, icon, image, emoji, imageSize = 48, iconC
 					children: title
 				}), description && /* @__PURE__ */ jsx(Text_default, {
 					align: isCenter ? "center" : void 0,
-					color: isPage ? theme.colorTextSecondary : theme.colorTextDescription,
+					color: isPage ? cssVar.colorTextSecondary : cssVar.colorTextDescription,
 					fontSize: isPage ? 16 : 14,
 					...descriptionProps,
 					children: description

package/es/Empty/Empty.mjs.map

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

package/es/FileTypeIcon/FileTypeIcon.mjs

@@ -1,26 +1,25 @@
 'use client';
 
 import Center_default from "../Flex/Center.mjs";
-import { useStyles } from "./style.mjs";
+import { styles } from "./style.mjs";
 import FileIcon_default from "./components/FileIcon.mjs";
 import FolderIcon_default from "./components/FolderIcon.mjs";
 import { useMemo } from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
+import { cssVar, cx, useThemeMode } from "antd-style";
 
 //#region src/FileTypeIcon/FileTypeIcon.tsx
 const FileTypeIcon = ({ icon, color, filetype, type = "file", size = 48, style, variant, className, ref, ...rest }) => {
-	const { cx, styles, theme } = useStyles();
+	const { isDarkMode } = useThemeMode();
 	const isMono = variant === "mono";
 	const filetypeShort = useMemo(() => filetype && filetype.length > 4 ? filetype.slice(0, 4) : filetype, [filetype]);
 	const fontSize = useMemo(() => {
 		if (filetypeShort && filetypeShort.length > 3) return 24 / (4 + (filetypeShort.length - 3));
 		return 6;
 	}, [filetypeShort]);
-	const iconColor = useMemo(() => isMono ? theme.isDarkMode ? theme.colorFill : theme.colorBgContainer : color || theme.geekblue, [
+	const iconColor = useMemo(() => isMono ? isDarkMode ? cssVar.colorFill : cssVar.colorBgContainer : color || cssVar.geekblue, [
 		isMono,
-		theme.isDarkMode,
-		theme.colorFill,
-		theme.colorBgContainer,
+		isDarkMode,
 		color
 	]);
 	const content = type === "file" ? /* @__PURE__ */ jsx(FileIcon_default, {

package/es/FileTypeIcon/FileTypeIcon.mjs.map

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

package/es/FileTypeIcon/components/FileIcon.mjs

@@ -1,9 +1,9 @@
-import { useStyles } from "../style.mjs";
+import { styles } from "../style.mjs";
 import { jsx, jsxs } from "react/jsx-runtime";
+import { cssVar, cx } from "antd-style";
 
 //#region src/FileTypeIcon/components/FileIcon.tsx
 const FileIcon = ({ size, isMono, hasIcon, iconColor, filetypeShort, className, fontSize, style, ...rest }) => {
-	const { cx, styles, theme } = useStyles();
 	return /* @__PURE__ */ jsxs("svg", {
 		className: cx(styles.icon, !hasIcon && className),
 		height: size,
@@ -19,11 +19,11 @@ const FileIcon = ({ size, isMono, hasIcon, iconColor, filetypeShort, className,
 			}),
 			/* @__PURE__ */ jsx("path", {
 				d: "M14 2l6 6h-4a2 2 0 01-2-2V2z",
-				fill: isMono ? theme.colorFill : "#fff",
+				fill: isMono ? cssVar.colorFill : "#fff",
 				fillOpacity: ".5"
 			}),
 			filetypeShort && /* @__PURE__ */ jsx("text", {
-				fill: isMono ? theme.colorTextSecondary : "#fff",
+				fill: isMono ? cssVar.colorTextSecondary : "#fff",
 				fontSize,
 				fontWeight: "bold",
 				textAnchor: "middle",
@@ -34,7 +34,7 @@ const FileIcon = ({ size, isMono, hasIcon, iconColor, filetypeShort, className,
 			/* @__PURE__ */ jsx("path", {
 				d: "M6 2a2 2 0 00-2 2v16a2 2 0 002 2h12a2 2 0 002-2V8l-6-6H6z",
 				fill: "transparent",
-				stroke: theme.colorFillSecondary,
+				stroke: cssVar.colorFillSecondary,
 				strokeWidth: .5
 			})
 		]

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

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