@lobehub/ui 3.4.2 → 3.4.3

package/es/Icon/components/IconProvider.mjs

@@ -0,0 +1,20 @@
+'use client';
+
+import { createContext, memo, use } from "react";
+import { jsx } from "react/jsx-runtime";
+
+//#region src/Icon/components/IconProvider.tsx
+const IconContext = createContext({});
+const IconProvider = memo(({ children, config = {} }) => {
+	return /* @__PURE__ */ jsx(IconContext, {
+		value: config,
+		children
+	});
+});
+const useIconContext = () => {
+	return use(IconContext);
+};
+
+//#endregion
+export { IconContext, IconProvider, useIconContext };
+//# sourceMappingURL=IconProvider.mjs.map

package/es/Icon/components/IconProvider.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"IconProvider.mjs","names":[],"sources":["../../../src/Icon/components/IconProvider.tsx"],"sourcesContent":["'use client';\n\nimport { type ReactNode, createContext, memo, use } from 'react';\n\nimport type { IconProps } from '../type';\n\nexport type IconContentConfig = Omit<IconProps, 'icon' | 'ref'>;\n\nexport const IconContext = createContext<IconContentConfig>({});\n\nexport const IconProvider = memo<{ children: ReactNode; config?: IconContentConfig }>(\n  ({ children, config = {} }) => {\n    return <IconContext value={config}>{children}</IconContext>;\n  },\n);\n\nexport const useIconContext = () => {\n  return use(IconContext);\n};\n"],"mappings":";;;;;;AAQA,MAAa,cAAc,cAAiC,EAAE,CAAC;AAE/D,MAAa,eAAe,MACzB,EAAE,UAAU,SAAS,EAAE,OAAO;AAC7B,QAAO,oBAAC;EAAY,OAAO;EAAS;GAAuB;EAE9D;AAED,MAAa,uBAAuB;AAClC,QAAO,IAAI,YAAY"}

package/es/Icon/components/utils.mjs

@@ -0,0 +1,39 @@
+import { isNumber } from "lodash-es";
+
+//#region src/Icon/components/utils.ts
+const calcSize = (iconSize) => {
+	if (isNumber(iconSize)) return { size: iconSize };
+	let size;
+	let strokeWidth;
+	switch (iconSize) {
+		case "large":
+			size = 24;
+			strokeWidth = 2;
+			break;
+		case "middle":
+			size = 20;
+			strokeWidth = 2;
+			break;
+		case "small":
+			size = 14;
+			strokeWidth = 2;
+			break;
+		default:
+			if (iconSize) {
+				size = iconSize?.size || 24;
+				strokeWidth = iconSize?.strokeWidth || 2;
+			} else {
+				size = "1em";
+				strokeWidth = 2;
+			}
+			break;
+	}
+	return {
+		size,
+		strokeWidth
+	};
+};
+
+//#endregion
+export { calcSize };
+//# sourceMappingURL=utils.mjs.map

package/es/Icon/components/utils.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"utils.mjs","names":["size: number | string","strokeWidth: number | string"],"sources":["../../../src/Icon/components/utils.ts"],"sourcesContent":["import { isNumber } from 'lodash-es';\n\nimport type { IconSize } from '../type';\n\nexport const calcSize = (iconSize?: IconSize) => {\n  if (isNumber(iconSize)) {\n    return { size: iconSize };\n  }\n\n  let size: number | string;\n  let strokeWidth: number | string;\n\n  switch (iconSize) {\n    case 'large': {\n      size = 24;\n      strokeWidth = 2;\n      break;\n    }\n    case 'middle': {\n      size = 20;\n      strokeWidth = 2;\n      break;\n    }\n    case 'small': {\n      size = 14;\n      strokeWidth = 2;\n      break;\n    }\n    default: {\n      if (iconSize) {\n        size = iconSize?.size || 24;\n        strokeWidth = iconSize?.strokeWidth || 2;\n      } else {\n        size = '1em';\n        strokeWidth = 2;\n      }\n      break;\n    }\n  }\n  return { size, strokeWidth };\n};\n"],"mappings":";;;AAIA,MAAa,YAAY,aAAwB;AAC/C,KAAI,SAAS,SAAS,CACpB,QAAO,EAAE,MAAM,UAAU;CAG3B,IAAIA;CACJ,IAAIC;AAEJ,SAAQ,UAAR;EACE,KAAK;AACH,UAAO;AACP,iBAAc;AACd;EAEF,KAAK;AACH,UAAO;AACP,iBAAc;AACd;EAEF,KAAK;AACH,UAAO;AACP,iBAAc;AACd;EAEF;AACE,OAAI,UAAU;AACZ,WAAO,UAAU,QAAQ;AACzB,kBAAc,UAAU,eAAe;UAClC;AACL,WAAO;AACP,kBAAc;;AAEhB;;AAGJ,QAAO;EAAE;EAAM;EAAa"}

package/es/Icon/index.d.mts

@@ -0,0 +1,4 @@
+import { IconProps, IconSize, IconSizeConfig, IconSizeType, LucideIconProps } from "./type.mjs";
+import { IconContentConfig, IconContext, IconProvider, useIconContext } from "./components/IconProvider.mjs";
+import { Icon } from "./Icon.mjs";
+export { IconContentConfig, IconContext, IconProps, IconProvider, IconSize, IconSizeConfig, IconSizeType, LucideIconProps, Icon as default, useIconContext };

package/es/Icon/index.mjs

@@ -0,0 +1,4 @@
+import { IconContext, IconProvider, useIconContext } from "./components/IconProvider.mjs";
+import Icon_default from "./Icon.mjs";
+
+export { IconContext, IconProvider, Icon_default as default, useIconContext };

package/es/Icon/style.mjs

@@ -0,0 +1,19 @@
+import { createStyles, keyframes } from "antd-style";
+
+//#region src/Icon/style.ts
+const useStyles = createStyles(({ css: css$1 }) => {
+	return { spin: css$1`
+      animation: ${keyframes`
+  0% {
+    rotate: 0deg;
+  }
+  100% {
+    rotate: 360deg;
+  }
+  `} 1s linear infinite;
+    ` };
+});
+
+//#endregion
+export { useStyles };
+//# sourceMappingURL=style.mjs.map

package/es/Icon/style.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"style.mjs","names":[],"sources":["../../src/Icon/style.ts"],"sourcesContent":["import { createStyles, keyframes } from 'antd-style';\n\nexport const useStyles = createStyles(({ css }) => {\n  const spin = keyframes`\n  0% {\n    rotate: 0deg;\n  }\n  100% {\n    rotate: 360deg;\n  }\n  `;\n  return {\n    spin: css`\n      animation: ${spin} 1s linear infinite;\n    `,\n  };\n});\n"],"mappings":";;;AAEA,MAAa,YAAY,cAAc,EAAE,iBAAU;AASjD,QAAO,EACL,MAAM,KAAG;mBATE,SAAS;;;;;;;IAUA;OAErB;EACD"}

package/es/Icon/type.d.mts

@@ -0,0 +1,20 @@
+import { SpanProps } from "../types/index.mjs";
+import { FC, ReactNode, Ref } from "react";
+import { LucideIcon, LucideProps } from "lucide-react";
+
+//#region src/Icon/type.d.ts
+interface IconSizeConfig extends Pick<LucideProps, 'strokeWidth' | 'absoluteStrokeWidth'> {
+  size?: number | string;
+}
+type IconSizeType = 'large' | 'middle' | 'small';
+type IconSize = number | IconSizeType | IconSizeConfig;
+type LucideIconProps = Pick<LucideProps, 'fill' | 'fillRule' | 'fillOpacity' | 'color' | 'focusable'>;
+interface IconProps extends Omit<SpanProps, 'children'>, LucideIconProps {
+  icon: LucideIcon | FC<any> | ReactNode;
+  ref?: Ref<SVGSVGElement>;
+  size?: IconSize;
+  spin?: boolean;
+}
+//#endregion
+export { IconProps, IconSize, IconSizeConfig, IconSizeType, LucideIconProps };
+//# sourceMappingURL=type.d.mts.map

package/es/Image/Image.mjs

@@ -0,0 +1,72 @@
+'use client';
+
+import FlexBasic_default from "../Flex/FlexBasic.mjs";
+import { FALLBACK_DARK, FALLBACK_LIGHT, useStyles } from "./style.mjs";
+import usePreview_default from "./components/usePreview.mjs";
+import { Image, Skeleton } from "antd";
+import { memo, useMemo } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { cva } from "class-variance-authority";
+
+//#region src/Image/Image.tsx
+const Image$1 = memo(({ ref, style, preview, isLoading, maxHeight = "100%", maxWidth = "100%", minHeight, minWidth, actions, className, alwaysShowActions, variant = "filled", objectFit = "cover", classNames, styles: customStyles, onClick, width, height, ...rest }) => {
+	const { styles, cx, theme } = useStyles({ alwaysShowActions });
+	const mergePreivew = usePreview_default(preview);
+	const variants = useMemo(() => cva(styles.root, {
+		defaultVariants: { variant: "filled" },
+		variants: { variant: {
+			filled: styles.filled,
+			outlined: styles.outlined,
+			borderless: styles.borderless
+		} }
+	}), [styles]);
+	if (isLoading) return /* @__PURE__ */ jsx("div", {
+		onClick,
+		children: /* @__PURE__ */ jsx(Skeleton.Avatar, {
+			active: true,
+			style: {
+				borderRadius: theme.borderRadius,
+				height,
+				maxHeight,
+				maxWidth,
+				minHeight,
+				minWidth,
+				width
+			}
+		})
+	});
+	return /* @__PURE__ */ jsxs(FlexBasic_default, {
+		className: cx(variants({ variant }), className),
+		ref,
+		style,
+		children: [actions && /* @__PURE__ */ jsx("div", {
+			className: styles.actions,
+			children: actions
+		}), /* @__PURE__ */ jsx(Image, {
+			className: cx(styles.image, classNames?.image),
+			classNames: { root: cx(styles.wrapper, classNames?.wrapper) },
+			fallback: theme.isDarkMode ? FALLBACK_DARK : FALLBACK_LIGHT,
+			height,
+			loading: "lazy",
+			onClick,
+			preview: preview === false ? false : mergePreivew,
+			style: {
+				maxHeight,
+				maxWidth,
+				minHeight,
+				minWidth,
+				objectFit: objectFit || "cover",
+				...customStyles?.image
+			},
+			styles: { root: customStyles?.wrapper },
+			width,
+			...rest
+		})]
+	});
+});
+Image$1.displayName = "Image";
+var Image_default = Image$1;
+
+//#endregion
+export { Image_default as default };
+//# sourceMappingURL=Image.mjs.map

package/es/Image/Image.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"Image.mjs","names":["Image","usePreview","Flexbox","AntImage"],"sources":["../../src/Image/Image.tsx"],"sourcesContent":["'use client';\n\nimport { Image as AntImage, Skeleton } from 'antd';\nimport { cva } from 'class-variance-authority';\nimport { memo, useMemo } from 'react';\n\nimport { Flexbox } from '@/Flex';\n\nimport usePreview from './components/usePreview';\nimport { FALLBACK_DARK, FALLBACK_LIGHT, useStyles } from './style';\nimport type { ImageProps } from './type';\n\nconst Image = memo<ImageProps>(\n  ({\n    ref,\n    style,\n    preview,\n    isLoading,\n    maxHeight = '100%',\n    maxWidth = '100%',\n    minHeight,\n    minWidth,\n    actions,\n    className,\n    alwaysShowActions,\n    variant = 'filled',\n    objectFit = 'cover',\n    classNames,\n    styles: customStyles,\n    onClick,\n    width,\n    height,\n    ...rest\n  }) => {\n    const { styles, cx, theme } = useStyles({\n      alwaysShowActions,\n    });\n    const mergePreivew = usePreview(preview);\n\n    const variants = useMemo(\n      () =>\n        cva(styles.root, {\n          defaultVariants: {\n            variant: 'filled',\n          },\n          /* eslint-disable sort-keys-fix/sort-keys-fix */\n          variants: {\n            variant: {\n              filled: styles.filled,\n              outlined: styles.outlined,\n              borderless: styles.borderless,\n            },\n          },\n          /* eslint-enable sort-keys-fix/sort-keys-fix */\n        }),\n      [styles],\n    );\n\n    if (isLoading)\n      return (\n        <div onClick={onClick}>\n          <Skeleton.Avatar\n            active\n            style={{\n              borderRadius: theme.borderRadius,\n              height,\n              maxHeight,\n              maxWidth,\n              minHeight,\n              minWidth,\n              width,\n            }}\n          />\n        </div>\n      );\n\n    return (\n      <Flexbox className={cx(variants({ variant }), className)} ref={ref} style={style}>\n        {actions && <div className={styles.actions}>{actions}</div>}\n        <AntImage\n          className={cx(styles.image, classNames?.image)}\n          classNames={{\n            root: cx(styles.wrapper, classNames?.wrapper),\n          }}\n          fallback={theme.isDarkMode ? FALLBACK_DARK : FALLBACK_LIGHT}\n          height={height}\n          loading={'lazy'}\n          onClick={onClick}\n          preview={preview === false ? false : (mergePreivew as any)}\n          style={{\n            maxHeight,\n            maxWidth,\n            minHeight,\n            minWidth,\n            objectFit: objectFit || 'cover',\n            ...customStyles?.image,\n          }}\n          styles={{\n            root: customStyles?.wrapper,\n          }}\n          width={width}\n          {...rest}\n        />\n      </Flexbox>\n    );\n  },\n);\n\nImage.displayName = 'Image';\n\nexport default Image;\n"],"mappings":";;;;;;;;;;;AAYA,MAAMA,UAAQ,MACX,EACC,KACA,OACA,SACA,WACA,YAAY,QACZ,WAAW,QACX,WACA,UACA,SACA,WACA,mBACA,UAAU,UACV,YAAY,SACZ,YACA,QAAQ,cACR,SACA,OACA,QACA,GAAG,WACC;CACJ,MAAM,EAAE,QAAQ,IAAI,UAAU,UAAU,EACtC,mBACD,CAAC;CACF,MAAM,eAAeC,mBAAW,QAAQ;CAExC,MAAM,WAAW,cAEb,IAAI,OAAO,MAAM;EACf,iBAAiB,EACf,SAAS,UACV;EAED,UAAU,EACR,SAAS;GACP,QAAQ,OAAO;GACf,UAAU,OAAO;GACjB,YAAY,OAAO;GACpB,EACF;EAEF,CAAC,EACJ,CAAC,OAAO,CACT;AAED,KAAI,UACF,QACE,oBAAC;EAAa;YACZ,oBAAC,SAAS;GACR;GACA,OAAO;IACL,cAAc,MAAM;IACpB;IACA;IACA;IACA;IACA;IACA;IACD;IACD;GACE;AAGV,QACE,qBAACC;EAAQ,WAAW,GAAG,SAAS,EAAE,SAAS,CAAC,EAAE,UAAU;EAAO;EAAY;aACxE,WAAW,oBAAC;GAAI,WAAW,OAAO;aAAU;IAAc,EAC3D,oBAACC;GACC,WAAW,GAAG,OAAO,OAAO,YAAY,MAAM;GAC9C,YAAY,EACV,MAAM,GAAG,OAAO,SAAS,YAAY,QAAQ,EAC9C;GACD,UAAU,MAAM,aAAa,gBAAgB;GACrC;GACR,SAAS;GACA;GACT,SAAS,YAAY,QAAQ,QAAS;GACtC,OAAO;IACL;IACA;IACA;IACA;IACA,WAAW,aAAa;IACxB,GAAG,cAAc;IAClB;GACD,QAAQ,EACN,MAAM,cAAc,SACrB;GACM;GACP,GAAI;IACJ;GACM;EAGf;AAED,QAAM,cAAc;AAEpB,oBAAeH"}

package/es/Image/PreviewGroup.d.mts

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

package/es/Image/PreviewGroup.mjs

@@ -0,0 +1,24 @@
+'use client';
+
+import usePreviewGroup_default from "./components/usePreviewGroup.mjs";
+import { Image } from "antd";
+import { memo } from "react";
+import { jsx } from "react/jsx-runtime";
+
+//#region src/Image/PreviewGroup.tsx
+const { PreviewGroup: AntdPreviewGroup } = Image;
+const PreviewGroup = memo(({ items, children, enable = true, preview }) => {
+	const mergePreivew = usePreviewGroup_default(preview);
+	if (!enable) return children;
+	return /* @__PURE__ */ jsx(AntdPreviewGroup, {
+		items,
+		preview: mergePreivew,
+		children
+	});
+});
+PreviewGroup.displayName = "PreviewGroup";
+var PreviewGroup_default = PreviewGroup;
+
+//#endregion
+export { PreviewGroup_default as default };
+//# sourceMappingURL=PreviewGroup.mjs.map

package/es/Image/PreviewGroup.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"PreviewGroup.mjs","names":["usePreviewGroup"],"sources":["../../src/Image/PreviewGroup.tsx"],"sourcesContent":["'use client';\n\nimport { Image } from 'antd';\nimport { memo } from 'react';\n\nimport usePreviewGroup from './components/usePreviewGroup';\nimport { PreviewGroupProps } from './type';\n\nconst { PreviewGroup: AntdPreviewGroup } = Image;\n\nconst PreviewGroup = memo<PreviewGroupProps>(({ items, children, enable = true, preview }) => {\n  const mergePreivew = usePreviewGroup(preview);\n\n  if (!enable) return children;\n\n  return (\n    <AntdPreviewGroup items={items} preview={mergePreivew}>\n      {children}\n    </AntdPreviewGroup>\n  );\n});\n\nPreviewGroup.displayName = 'PreviewGroup';\n\nexport default PreviewGroup;\n"],"mappings":";;;;;;;;AAQA,MAAM,EAAE,cAAc,qBAAqB;AAE3C,MAAM,eAAe,MAAyB,EAAE,OAAO,UAAU,SAAS,MAAM,cAAc;CAC5F,MAAM,eAAeA,wBAAgB,QAAQ;AAE7C,KAAI,CAAC,OAAQ,QAAO;AAEpB,QACE,oBAAC;EAAwB;EAAO,SAAS;EACtC;GACgB;EAErB;AAEF,aAAa,cAAc;AAE3B,2BAAe"}

package/es/Image/components/Preview.mjs

@@ -0,0 +1,26 @@
+'use client';
+
+import { memo, useEffect, useRef } from "react";
+import { jsx } from "react/jsx-runtime";
+
+//#region src/Image/components/Preview.tsx
+const Preview = memo(({ children, visible }) => {
+	const ref = useRef(null);
+	useEffect(() => {
+		if (!ref.current) return;
+		const handleDisableZoom = (event) => {
+			event.preventDefault();
+		};
+		if (visible) ref.current.addEventListener("wheel", handleDisableZoom, { passive: false });
+		else ref.current.removeEventListener("wheel", handleDisableZoom);
+	}, [visible]);
+	return /* @__PURE__ */ jsx("div", {
+		ref,
+		children
+	});
+});
+var Preview_default = Preview;
+
+//#endregion
+export { Preview_default as default };
+//# sourceMappingURL=Preview.mjs.map

package/es/Image/components/Preview.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"Preview.mjs","names":[],"sources":["../../../src/Image/components/Preview.tsx"],"sourcesContent":["'use client';\n\nimport { type PropsWithChildren, memo, useEffect, useRef } from 'react';\n\ninterface PreviewProps extends PropsWithChildren {\n  visible?: boolean;\n}\n\nconst Preview = memo<PreviewProps>(({ children, visible }) => {\n  const ref = useRef<HTMLDivElement>(null);\n  useEffect(() => {\n    if (!ref.current) return;\n\n    const handleDisableZoom = (event: any) => {\n      event.preventDefault();\n    };\n\n    if (visible) {\n      ref.current.addEventListener('wheel', handleDisableZoom, { passive: false });\n    } else {\n      ref.current.removeEventListener('wheel', handleDisableZoom);\n    }\n  }, [visible]);\n\n  return <div ref={ref}>{children}</div>;\n});\n\nexport default Preview;\n"],"mappings":";;;;;;AAQA,MAAM,UAAU,MAAoB,EAAE,UAAU,cAAc;CAC5D,MAAM,MAAM,OAAuB,KAAK;AACxC,iBAAgB;AACd,MAAI,CAAC,IAAI,QAAS;EAElB,MAAM,qBAAqB,UAAe;AACxC,SAAM,gBAAgB;;AAGxB,MAAI,QACF,KAAI,QAAQ,iBAAiB,SAAS,mBAAmB,EAAE,SAAS,OAAO,CAAC;MAE5E,KAAI,QAAQ,oBAAoB,SAAS,kBAAkB;IAE5D,CAAC,QAAQ,CAAC;AAEb,QAAO,oBAAC;EAAS;EAAM;GAAe;EACtC;AAEF,sBAAe"}

package/es/Image/components/Toolbar.mjs

@@ -0,0 +1,51 @@
+import FlexBasic_default from "../../Flex/FlexBasic.mjs";
+import ActionIcon_default from "../../ActionIcon/ActionIcon.mjs";
+import { useStyles } from "../style.mjs";
+import { memo } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { FlipHorizontal, FlipVertical, RotateCcw, RotateCw, ZoomIn, ZoomOut } from "lucide-react";
+
+//#region src/Image/components/Toolbar.tsx
+const Toolbar = memo(({ children, info, minScale, maxScale }) => {
+	const { styles } = useStyles();
+	const { transform: { scale }, actions: { onFlipY, onFlipX, onRotateLeft, onRotateRight, onZoomOut, onZoomIn } } = info;
+	return /* @__PURE__ */ jsxs(FlexBasic_default, {
+		className: styles.toolbar,
+		gap: 4,
+		horizontal: true,
+		children: [
+			/* @__PURE__ */ jsx(ActionIcon_default, {
+				icon: FlipHorizontal,
+				onClick: onFlipX
+			}),
+			/* @__PURE__ */ jsx(ActionIcon_default, {
+				icon: FlipVertical,
+				onClick: onFlipY
+			}),
+			/* @__PURE__ */ jsx(ActionIcon_default, {
+				icon: RotateCcw,
+				onClick: onRotateLeft
+			}),
+			/* @__PURE__ */ jsx(ActionIcon_default, {
+				icon: RotateCw,
+				onClick: onRotateRight
+			}),
+			/* @__PURE__ */ jsx(ActionIcon_default, {
+				disabled: scale === minScale,
+				icon: ZoomOut,
+				onClick: onZoomOut
+			}),
+			/* @__PURE__ */ jsx(ActionIcon_default, {
+				disabled: scale === maxScale,
+				icon: ZoomIn,
+				onClick: onZoomIn
+			}),
+			children
+		]
+	});
+});
+var Toolbar_default = Toolbar;
+
+//#endregion
+export { Toolbar_default as default };
+//# sourceMappingURL=Toolbar.mjs.map

package/es/Image/components/Toolbar.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"Toolbar.mjs","names":["Flexbox","ActionIcon"],"sources":["../../../src/Image/components/Toolbar.tsx"],"sourcesContent":["import { FlipHorizontal, FlipVertical, RotateCcw, RotateCw, ZoomIn, ZoomOut } from 'lucide-react';\nimport type { ToolbarRenderInfoType } from 'rc-image/lib/Preview';\nimport { type ReactNode, memo } from 'react';\n\nimport ActionIcon from '@/ActionIcon';\nimport { Flexbox } from '@/Flex';\n\nimport { useStyles } from '../style';\n\nexport interface ToolbarProps {\n  children?: ReactNode;\n  info: Omit<ToolbarRenderInfoType, 'current' | 'total'>;\n  maxScale: number;\n  minScale: number;\n}\n\nconst Toolbar = memo<ToolbarProps>(({ children, info, minScale, maxScale }) => {\n  const { styles } = useStyles();\n  const {\n    transform: { scale },\n    actions: { onFlipY, onFlipX, onRotateLeft, onRotateRight, onZoomOut, onZoomIn },\n  } = info;\n\n  return (\n    <Flexbox className={styles.toolbar} gap={4} horizontal>\n      <ActionIcon icon={FlipHorizontal} onClick={onFlipX} />\n      <ActionIcon icon={FlipVertical} onClick={onFlipY} />\n      <ActionIcon icon={RotateCcw} onClick={onRotateLeft} />\n      <ActionIcon icon={RotateCw} onClick={onRotateRight} />\n      <ActionIcon disabled={scale === minScale} icon={ZoomOut} onClick={onZoomOut} />\n      <ActionIcon disabled={scale === maxScale} icon={ZoomIn} onClick={onZoomIn} />\n      {children}\n    </Flexbox>\n  );\n});\n\nexport default Toolbar;\n"],"mappings":";;;;;;;;AAgBA,MAAM,UAAU,MAAoB,EAAE,UAAU,MAAM,UAAU,eAAe;CAC7E,MAAM,EAAE,WAAW,WAAW;CAC9B,MAAM,EACJ,WAAW,EAAE,SACb,SAAS,EAAE,SAAS,SAAS,cAAc,eAAe,WAAW,eACnE;AAEJ,QACE,qBAACA;EAAQ,WAAW,OAAO;EAAS,KAAK;EAAG;;GAC1C,oBAACC;IAAW,MAAM;IAAgB,SAAS;KAAW;GACtD,oBAACA;IAAW,MAAM;IAAc,SAAS;KAAW;GACpD,oBAACA;IAAW,MAAM;IAAW,SAAS;KAAgB;GACtD,oBAACA;IAAW,MAAM;IAAU,SAAS;KAAiB;GACtD,oBAACA;IAAW,UAAU,UAAU;IAAU,MAAM;IAAS,SAAS;KAAa;GAC/E,oBAACA;IAAW,UAAU,UAAU;IAAU,MAAM;IAAQ,SAAS;KAAY;GAC5E;;GACO;EAEZ;AAEF,sBAAe"}

package/es/Image/components/usePreview.mjs

@@ -0,0 +1,60 @@
+import Icon_default from "../../Icon/Icon.mjs";
+import { useStyles } from "../style.mjs";
+import Preview_default from "./Preview.mjs";
+import Toolbar_default from "./Toolbar.mjs";
+import { useMemo, useState } from "react";
+import { jsx } from "react/jsx-runtime";
+import { X } from "lucide-react";
+
+//#region src/Image/components/usePreview.tsx
+const usePreview = (props) => {
+	const [visible, setVisible] = useState(false);
+	const { cx, styles } = useStyles();
+	return useMemo(() => {
+		if (props === false) return props;
+		const { onVisibleChange, onOpenChange, minScale = .32, maxScale = 32, toolbarAddon, rootClassName, imageRender, toolbarRender, actionsRender, ...rest } = props === true ? {} : props || {};
+		return {
+			actionsRender: actionsRender || ((_, info) => {
+				const originalNode = /* @__PURE__ */ jsx(Toolbar_default, {
+					info,
+					maxScale,
+					minScale,
+					children: toolbarAddon
+				});
+				if (toolbarRender) return toolbarRender(originalNode, info);
+				return originalNode;
+			}),
+			closeIcon: /* @__PURE__ */ jsx(Icon_default, {
+				color: "#fff",
+				icon: X
+			}),
+			imageRender: (originalNode, info) => {
+				const node = /* @__PURE__ */ jsx(Preview_default, {
+					visible,
+					children: originalNode
+				});
+				if (imageRender) return imageRender(node, info);
+				return node;
+			},
+			maxScale,
+			minScale,
+			onOpenChange: (open) => {
+				setVisible(open);
+				onOpenChange?.(open);
+				onVisibleChange?.(open, !open);
+			},
+			rootClassName: cx(styles.preview, rootClassName),
+			styles: { mask: { backdropFilter: "blur(8px)" } },
+			...rest
+		};
+	}, [
+		props,
+		visible,
+		styles
+	]);
+};
+var usePreview_default = usePreview;
+
+//#endregion
+export { usePreview_default as default };
+//# sourceMappingURL=usePreview.mjs.map

package/es/Image/components/usePreview.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"usePreview.mjs","names":["Toolbar","Icon","Preview"],"sources":["../../../src/Image/components/usePreview.tsx"],"sourcesContent":["import type { ImageProps as AntdImageProps } from 'antd';\nimport { X } from 'lucide-react';\nimport { useMemo, useState } from 'react';\n\nimport Icon from '@/Icon';\n\nimport { useStyles } from '../style';\nimport type { ImagePreviewOptions } from '../type';\nimport Preview from './Preview';\nimport Toolbar from './Toolbar';\n\nexport const usePreview = (\n  props: ImagePreviewOptions | boolean | undefined,\n): AntdImageProps['preview'] => {\n  const [visible, setVisible] = useState(false);\n  const { cx, styles } = useStyles();\n\n  return useMemo(() => {\n    if (props === false) return props;\n\n    const {\n      onVisibleChange,\n      onOpenChange,\n      minScale = 0.32,\n      maxScale = 32,\n      toolbarAddon,\n      rootClassName,\n      imageRender,\n      toolbarRender,\n      actionsRender,\n      ...rest\n    }: ImagePreviewOptions = (props === true ? {} : props || {}) as ImagePreviewOptions;\n\n    return {\n      actionsRender:\n        actionsRender ||\n        ((_, info) => {\n          const originalNode = (\n            <Toolbar info={info} maxScale={maxScale} minScale={minScale}>\n              {toolbarAddon}\n            </Toolbar>\n          );\n          // 向后兼容 toolbarRender\n          if (toolbarRender) return toolbarRender(originalNode, info);\n          return originalNode;\n        }),\n      closeIcon: <Icon color={'#fff'} icon={X} />,\n      imageRender: (originalNode, info) => {\n        const node = <Preview visible={visible}>{originalNode}</Preview>;\n        if (imageRender) return imageRender(node, info);\n        return node;\n      },\n      maxScale,\n      minScale,\n      onOpenChange: (open: boolean) => {\n        setVisible(open);\n        // 支持新的 onOpenChange\n        onOpenChange?.(open);\n        // 向后兼容旧的 onVisibleChange\n        onVisibleChange?.(open, !open);\n      },\n      rootClassName: cx(styles.preview, rootClassName),\n      styles: { mask: { backdropFilter: 'blur(8px)' } },\n      ...rest,\n    };\n  }, [props, visible, styles]);\n};\n\nexport default usePreview;\n"],"mappings":";;;;;;;;;AAWA,MAAa,cACX,UAC8B;CAC9B,MAAM,CAAC,SAAS,cAAc,SAAS,MAAM;CAC7C,MAAM,EAAE,IAAI,WAAW,WAAW;AAElC,QAAO,cAAc;AACnB,MAAI,UAAU,MAAO,QAAO;EAE5B,MAAM,EACJ,iBACA,cACA,WAAW,KACX,WAAW,IACX,cACA,eACA,aACA,eACA,eACA,GAAG,SACqB,UAAU,OAAO,EAAE,GAAG,SAAS,EAAE;AAE3D,SAAO;GACL,eACE,mBACE,GAAG,SAAS;IACZ,MAAM,eACJ,oBAACA;KAAc;KAAgB;KAAoB;eAChD;MACO;AAGZ,QAAI,cAAe,QAAO,cAAc,cAAc,KAAK;AAC3D,WAAO;;GAEX,WAAW,oBAACC;IAAK,OAAO;IAAQ,MAAM;KAAK;GAC3C,cAAc,cAAc,SAAS;IACnC,MAAM,OAAO,oBAACC;KAAiB;eAAU;MAAuB;AAChE,QAAI,YAAa,QAAO,YAAY,MAAM,KAAK;AAC/C,WAAO;;GAET;GACA;GACA,eAAe,SAAkB;AAC/B,eAAW,KAAK;AAEhB,mBAAe,KAAK;AAEpB,sBAAkB,MAAM,CAAC,KAAK;;GAEhC,eAAe,GAAG,OAAO,SAAS,cAAc;GAChD,QAAQ,EAAE,MAAM,EAAE,gBAAgB,aAAa,EAAE;GACjD,GAAG;GACJ;IACA;EAAC;EAAO;EAAS;EAAO,CAAC;;AAG9B,yBAAe"}

package/es/Image/components/usePreviewGroup.mjs

@@ -0,0 +1,59 @@
+import Icon_default from "../../Icon/Icon.mjs";
+import { useStyles } from "../style.mjs";
+import Preview_default from "./Preview.mjs";
+import Toolbar_default from "./Toolbar.mjs";
+import { useMemo, useState } from "react";
+import { jsx } from "react/jsx-runtime";
+import { X } from "lucide-react";
+
+//#region src/Image/components/usePreviewGroup.tsx
+const usePreview = (props) => {
+	const [visible, setVisible] = useState(false);
+	const { cx, styles: componentStyles } = useStyles();
+	return useMemo(() => {
+		if (props === false) return props;
+		const { onVisibleChange, onOpenChange, minScale = .32, maxScale = 32, toolbarAddon, rootClassName, imageRender, toolbarRender, ...rest } = props === true ? {} : props || {};
+		return {
+			actionsRender: (_, info) => {
+				const originalNode = /* @__PURE__ */ jsx(Toolbar_default, {
+					info,
+					maxScale,
+					minScale,
+					children: toolbarAddon
+				});
+				if (toolbarRender) return toolbarRender(originalNode, info);
+				return originalNode;
+			},
+			classNames: { root: cx(componentStyles.preview, rootClassName) },
+			closeIcon: /* @__PURE__ */ jsx(Icon_default, {
+				color: "#fff",
+				icon: X
+			}),
+			imageRender: (originalNode, info) => {
+				const node = /* @__PURE__ */ jsx(Preview_default, {
+					visible,
+					children: originalNode
+				});
+				if (imageRender) return imageRender(node, info);
+				return node;
+			},
+			maxScale,
+			minScale,
+			onOpenChange: (open, info) => {
+				setVisible(open);
+				onOpenChange?.(open, info);
+				onVisibleChange?.(open, !open, info.current);
+			},
+			...rest
+		};
+	}, [
+		props,
+		visible,
+		componentStyles
+	]);
+};
+var usePreviewGroup_default = usePreview;
+
+//#endregion
+export { usePreviewGroup_default as default };
+//# sourceMappingURL=usePreviewGroup.mjs.map

package/es/Image/components/usePreviewGroup.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"usePreviewGroup.mjs","names":["Toolbar","Icon","Preview"],"sources":["../../../src/Image/components/usePreviewGroup.tsx"],"sourcesContent":["import type { GroupPreviewConfig } from 'antd/es/image/PreviewGroup';\nimport { X } from 'lucide-react';\nimport { useMemo, useState } from 'react';\n\nimport Icon from '@/Icon';\n\nimport { useStyles } from '../style';\nimport type { PreviewGroupPreviewOptions } from '../type';\nimport Preview from './Preview';\nimport Toolbar from './Toolbar';\n\nexport const usePreview = (\n  props: PreviewGroupPreviewOptions | boolean | undefined,\n): GroupPreviewConfig | boolean => {\n  const [visible, setVisible] = useState(false);\n  const { cx, styles: componentStyles } = useStyles();\n\n  return useMemo(() => {\n    if (props === false) return props;\n\n    const {\n      onVisibleChange,\n      onOpenChange,\n      minScale = 0.32,\n      maxScale = 32,\n      toolbarAddon,\n      rootClassName,\n      imageRender,\n      toolbarRender,\n      ...rest\n    }: PreviewGroupPreviewOptions = (\n      props === true ? {} : props || {}\n    ) as PreviewGroupPreviewOptions;\n\n    return {\n      actionsRender: (_, info) => {\n        const originalNode = (\n          <Toolbar info={info} maxScale={maxScale} minScale={minScale}>\n            {toolbarAddon}\n          </Toolbar>\n        );\n        if (toolbarRender) return toolbarRender(originalNode, info);\n        return originalNode;\n      },\n      classNames: {\n        root: cx(componentStyles.preview, rootClassName),\n      },\n      closeIcon: <Icon color={'#fff'} icon={X} />,\n      imageRender: (originalNode, info) => {\n        const node = <Preview visible={visible}>{originalNode}</Preview>;\n        if (imageRender) return imageRender(node, info);\n        return node;\n      },\n      maxScale,\n      minScale,\n      onOpenChange: (open: boolean, info: { current: number }) => {\n        setVisible(open);\n        // 支持新的 onOpenChange\n        onOpenChange?.(open, info);\n        // 向后兼容旧的 onVisibleChange (注意参数差异)\n        onVisibleChange?.(open, !open, info.current);\n      },\n      ...rest,\n    };\n  }, [props, visible, componentStyles]);\n};\n\nexport default usePreview;\n"],"mappings":";;;;;;;;;AAWA,MAAa,cACX,UACiC;CACjC,MAAM,CAAC,SAAS,cAAc,SAAS,MAAM;CAC7C,MAAM,EAAE,IAAI,QAAQ,oBAAoB,WAAW;AAEnD,QAAO,cAAc;AACnB,MAAI,UAAU,MAAO,QAAO;EAE5B,MAAM,EACJ,iBACA,cACA,WAAW,KACX,WAAW,IACX,cACA,eACA,aACA,eACA,GAAG,SAEH,UAAU,OAAO,EAAE,GAAG,SAAS,EAAE;AAGnC,SAAO;GACL,gBAAgB,GAAG,SAAS;IAC1B,MAAM,eACJ,oBAACA;KAAc;KAAgB;KAAoB;eAChD;MACO;AAEZ,QAAI,cAAe,QAAO,cAAc,cAAc,KAAK;AAC3D,WAAO;;GAET,YAAY,EACV,MAAM,GAAG,gBAAgB,SAAS,cAAc,EACjD;GACD,WAAW,oBAACC;IAAK,OAAO;IAAQ,MAAM;KAAK;GAC3C,cAAc,cAAc,SAAS;IACnC,MAAM,OAAO,oBAACC;KAAiB;eAAU;MAAuB;AAChE,QAAI,YAAa,QAAO,YAAY,MAAM,KAAK;AAC/C,WAAO;;GAET;GACA;GACA,eAAe,MAAe,SAA8B;AAC1D,eAAW,KAAK;AAEhB,mBAAe,MAAM,KAAK;AAE1B,sBAAkB,MAAM,CAAC,MAAM,KAAK,QAAQ;;GAE9C,GAAG;GACJ;IACA;EAAC;EAAO;EAAS;EAAgB,CAAC;;AAGvC,8BAAe"}

package/es/Image/index.d.mts

@@ -0,0 +1,13 @@
+import { ImagePreviewOptions, ImageProps, PreviewGroupPreviewOptions, PreviewGroupProps } from "./type.mjs";
+import { PreviewGroup } from "./PreviewGroup.mjs";
+import { ReactNode } from "react";
+
+//#region src/Image/index.d.ts
+interface IImage {
+  (props: ImageProps): ReactNode;
+  PreviewGroup: typeof PreviewGroup;
+}
+declare const Image: IImage;
+//#endregion
+export { IImage, ImagePreviewOptions, ImageProps, PreviewGroup, PreviewGroupPreviewOptions, PreviewGroupProps, Image as default };
+//# sourceMappingURL=index.d.mts.map

package/es/Image/index.mjs

@@ -0,0 +1,11 @@
+import Image_default$1 from "./Image.mjs";
+import PreviewGroup_default from "./PreviewGroup.mjs";
+
+//#region src/Image/index.ts
+const Image = Image_default$1;
+Image.PreviewGroup = PreviewGroup_default;
+var Image_default = Image;
+
+//#endregion
+export { PreviewGroup_default as PreviewGroup, Image_default as default };
+//# sourceMappingURL=index.mjs.map

package/es/Image/index.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.mjs","names":["ImageParent","PreviewGroup"],"sources":["../../src/Image/index.ts"],"sourcesContent":["import type { ReactNode } from 'react';\n\nimport ImageParent from './Image';\nimport PreviewGroup from './PreviewGroup';\nimport type { ImageProps } from './type';\n\nexport interface IImage {\n  (props: ImageProps): ReactNode;\n  PreviewGroup: typeof PreviewGroup;\n}\n\nconst Image = ImageParent as unknown as IImage;\nImage.PreviewGroup = PreviewGroup;\n\nexport default Image;\nexport { default as PreviewGroup } from './PreviewGroup';\nexport type * from './type';\n"],"mappings":";;;;AAWA,MAAM,QAAQA;AACd,MAAM,eAAeC;AAErB,oBAAe"}

package/es/Image/style.mjs

@@ -0,0 +1,83 @@
+import { createStyles } from "antd-style";
+import { rgba } from "polished";
+
+//#region src/Image/style.ts
+const useStyles = createStyles(({ cx: cx$1, css: css$1, token, stylish, prefixCls }, { alwaysShowActions } = {}) => {
+	const actions = cx$1(css$1`
+      cursor: pointer;
+
+      position: absolute;
+      z-index: 1;
+      inset-block-start: 0;
+      inset-inline-end: 0;
+
+      opacity: ${alwaysShowActions ? 1 : 0};
+    `);
+	return {
+		actions,
+		borderless: stylish.variantBorderlessWithoutHover,
+		filled: cx$1(stylish.variantOutlinedWithoutHover, stylish.variantFilledWithoutHover),
+		image: css$1`
+        display: flex;
+        align-items: center;
+        justify-content: center;
+
+        width: auto;
+        height: auto;
+      `,
+		mask: cx$1(stylish.blur, css$1`
+          backdrop-filter: blur(8px);
+        `),
+		outlined: stylish.variantOutlinedWithoutHover,
+		preview: css$1`
+        .${prefixCls}-image-preview-mask {
+          background: ${rgba(token.colorBgLayout, .9)};
+        }
+
+        img {
+          width: 100%;
+        }
+      `,
+		root: css$1`
+        cursor: pointer;
+        user-select: none;
+
+        position: relative;
+
+        overflow: hidden;
+
+        width: fit-content;
+        border-radius: ${token.borderRadius}px;
+
+        line-height: 1;
+
+        .${prefixCls}-image-cover {
+          display: none !important;
+        }
+
+        &:hover {
+          .${actions} {
+            opacity: 1;
+          }
+        }
+      `,
+		toolbar: cx$1(stylish.blur, stylish.variantOutlinedWithoutHover, css$1`
+          padding: 4px;
+          border-color: ${token.colorFillTertiary};
+          border-radius: ${token.borderRadiusLG}px;
+          background: ${rgba(token.colorBgContainer, .5)};
+        `),
+		wrapper: css$1`
+        position: relative;
+        overflow: hidden;
+        max-width: 100%;
+        height: auto;
+      `
+	};
+});
+const FALLBACK_DARK = "data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjU2IiBoZWlnaHQ9IjI1NiIgdmlld0JveD0iMCAwIDI1NiAyNTYiIGZpbGw9Im5vbmUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+CjxyZWN0IHdpZHRoPSIyNTYiIGhlaWdodD0iMjU2IiBmaWxsPSIjM0IzQjNCIi8+CjxwYXRoIGQ9Ik0xNTYuODg4IDkxLjAwMkgxMDAuMTEyQzk1LjYzMjkgOTEuMDAyIDkyLjAwMTUgOTQuNjMzNCA5Mi4wMDE1IDk5LjExMjdWMTU1Ljg4OEM5Mi4wMDE1IDE2MC4zNjcgOTUuNjMyOSAxNjMuOTk5IDEwMC4xMTIgMTYzLjk5OUgxNTYuODg4QzE2MS4zNjcgMTYzLjk5OSAxNjQuOTk4IDE2MC4zNjcgMTY0Ljk5OCAxNTUuODg4Vjk5LjExMjdDMTY0Ljk5OCA5NC42MzM0IDE2MS4zNjcgOTEuMDAyIDE1Ni44ODggOTEuMDAyWiIgc3Ryb2tlPSIjNjI2MjYyIiBzdHJva2Utd2lkdGg9IjguMTEwNzciIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIgc3Ryb2tlLWxpbmVqb2luPSJyb3VuZCIvPgo8cGF0aCBkPSJNMTY0Ljk5OCAxMzkuNjY4TDE1Mi40ODQgMTI3LjE1M0MxNTAuOTYyIDEyNS42MzIgMTQ4LjkgMTI0Ljc3OCAxNDYuNzQ5IDEyNC43NzhDMTQ0LjU5OSAxMjQuNzc4IDE0Mi41MzYgMTI1LjYzMiAxNDEuMDE1IDEyNy4xNTNMMTA0LjE2OCAxNjRNMTE2LjMzNCAxMjMuNDQ1QzEyMC44MTMgMTIzLjQ0NSAxMjQuNDQ1IDExOS44MTQgMTI0LjQ0NSAxMTUuMzM0QzEyNC40NDUgMTEwLjg1NSAxMjAuODEzIDEwNy4yMjQgMTE2LjMzNCAxMDcuMjI0QzExMS44NTUgMTA3LjIyNCAxMDguMjIzIDExMC44NTUgMTA4LjIyMyAxMTUuMzM0QzEwOC4yMjMgMTE5LjgxNCAxMTEuODU1IDEyMy40NDUgMTE2LjMzNCAxMjMuNDQ1WiIgc3Ryb2tlPSIjNjI2MjYyIiBzdHJva2Utd2lkdGg9IjguMTEwNzciIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIgc3Ryb2tlLWxpbmVqb2luPSJyb3VuZCIvPgo8L3N2Zz4K";
+const FALLBACK_LIGHT = "data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjU2IiBoZWlnaHQ9IjI1NiIgdmlld0JveD0iMCAwIDI1NiAyNTYiIGZpbGw9Im5vbmUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+CjxyZWN0IHdpZHRoPSIyNTYiIGhlaWdodD0iMjU2IiBmaWxsPSIjRUNFQ0VDIi8+CjxwYXRoIGQ9Ik0xNTYuODg4IDkxLjAwMkgxMDAuMTEyQzk1LjYzMjkgOTEuMDAyIDkyLjAwMTUgOTQuNjMzNCA5Mi4wMDE1IDk5LjExMjdWMTU1Ljg4OEM5Mi4wMDE1IDE2MC4zNjcgOTUuNjMyOSAxNjMuOTk5IDEwMC4xMTIgMTYzLjk5OUgxNTYuODg4QzE2MS4zNjcgMTYzLjk5OSAxNjQuOTk4IDE2MC4zNjcgMTY0Ljk5OCAxNTUuODg4Vjk5LjExMjdDMTY0Ljk5OCA5NC42MzM0IDE2MS4zNjcgOTEuMDAyIDE1Ni44ODggOTEuMDAyWiIgc3Ryb2tlPSIjRDdEN0Q3IiBzdHJva2Utd2lkdGg9IjguMTEwNzciIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIgc3Ryb2tlLWxpbmVqb2luPSJyb3VuZCIvPgo8cGF0aCBkPSJNMTY0Ljk5OCAxMzkuNjY4TDE1Mi40ODQgMTI3LjE1M0MxNTAuOTYyIDEyNS42MzIgMTQ4LjkgMTI0Ljc3OCAxNDYuNzQ5IDEyNC43NzhDMTQ0LjU5OSAxMjQuNzc4IDE0Mi41MzYgMTI1LjYzMiAxNDEuMDE1IDEyNy4xNTNMMTA0LjE2OCAxNjRNMTE2LjMzNCAxMjMuNDQ1QzEyMC44MTMgMTIzLjQ0NSAxMjQuNDQ1IDExOS44MTQgMTI0LjQ0NSAxMTUuMzM0QzEyNC40NDUgMTEwLjg1NSAxMjAuODEzIDEwNy4yMjQgMTE2LjMzNCAxMDcuMjI0QzExMS44NTUgMTA3LjIyNCAxMDguMjIzIDExMC44NTUgMTA4LjIyMyAxMTUuMzM0QzEwOC4yMjMgMTE5LjgxNCAxMTEuODU1IDEyMy40NDUgMTE2LjMzNCAxMjMuNDQ1WiIgc3Ryb2tlPSIjRDdEN0Q3IiBzdHJva2Utd2lkdGg9IjguMTEwNzciIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIgc3Ryb2tlLWxpbmVqb2luPSJyb3VuZCIvPgo8L3N2Zz4K";
+
+//#endregion
+export { FALLBACK_DARK, FALLBACK_LIGHT, useStyles };
+//# sourceMappingURL=style.mjs.map

package/es/Image/style.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"style.mjs","names":["cx"],"sources":["../../src/Image/style.ts"],"sourcesContent":["import { createStyles } from 'antd-style';\nimport { rgba } from 'polished';\n\nexport const useStyles = createStyles(\n  (\n    { cx, css, token, stylish, prefixCls },\n    {\n      alwaysShowActions,\n    }: {\n      alwaysShowActions?: boolean;\n    } = {},\n  ) => {\n    const actions = cx(css`\n      cursor: pointer;\n\n      position: absolute;\n      z-index: 1;\n      inset-block-start: 0;\n      inset-inline-end: 0;\n\n      opacity: ${alwaysShowActions ? 1 : 0};\n    `);\n\n    return {\n      actions,\n      borderless: stylish.variantBorderlessWithoutHover,\n      filled: cx(stylish.variantOutlinedWithoutHover, stylish.variantFilledWithoutHover),\n      image: css`\n        display: flex;\n        align-items: center;\n        justify-content: center;\n\n        width: auto;\n        height: auto;\n      `,\n      mask: cx(\n        stylish.blur,\n        css`\n          backdrop-filter: blur(8px);\n        `,\n      ),\n      outlined: stylish.variantOutlinedWithoutHover,\n      preview: css`\n        .${prefixCls}-image-preview-mask {\n          background: ${rgba(token.colorBgLayout, 0.9)};\n        }\n\n        img {\n          width: 100%;\n        }\n      `,\n      root: css`\n        cursor: pointer;\n        user-select: none;\n\n        position: relative;\n\n        overflow: hidden;\n\n        width: fit-content;\n        border-radius: ${token.borderRadius}px;\n\n        line-height: 1;\n\n        .${prefixCls}-image-cover {\n          display: none !important;\n        }\n\n        &:hover {\n          .${actions} {\n            opacity: 1;\n          }\n        }\n      `,\n      toolbar: cx(\n        stylish.blur,\n        stylish.variantOutlinedWithoutHover,\n        css`\n          padding: 4px;\n          border-color: ${token.colorFillTertiary};\n          border-radius: ${token.borderRadiusLG}px;\n          background: ${rgba(token.colorBgContainer, 0.5)};\n        `,\n      ),\n\n      wrapper: css`\n        position: relative;\n        overflow: hidden;\n        max-width: 100%;\n        height: auto;\n      `,\n    };\n  },\n);\n\nexport const FALLBACK_DARK =\n  'data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjU2IiBoZWlnaHQ9IjI1NiIgdmlld0JveD0iMCAwIDI1NiAyNTYiIGZpbGw9Im5vbmUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+CjxyZWN0IHdpZHRoPSIyNTYiIGhlaWdodD0iMjU2IiBmaWxsPSIjM0IzQjNCIi8+CjxwYXRoIGQ9Ik0xNTYuODg4IDkxLjAwMkgxMDAuMTEyQzk1LjYzMjkgOTEuMDAyIDkyLjAwMTUgOTQuNjMzNCA5Mi4wMDE1IDk5LjExMjdWMTU1Ljg4OEM5Mi4wMDE1IDE2MC4zNjcgOTUuNjMyOSAxNjMuOTk5IDEwMC4xMTIgMTYzLjk5OUgxNTYuODg4QzE2MS4zNjcgMTYzLjk5OSAxNjQuOTk4IDE2MC4zNjcgMTY0Ljk5OCAxNTUuODg4Vjk5LjExMjdDMTY0Ljk5OCA5NC42MzM0IDE2MS4zNjcgOTEuMDAyIDE1Ni44ODggOTEuMDAyWiIgc3Ryb2tlPSIjNjI2MjYyIiBzdHJva2Utd2lkdGg9IjguMTEwNzciIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIgc3Ryb2tlLWxpbmVqb2luPSJyb3VuZCIvPgo8cGF0aCBkPSJNMTY0Ljk5OCAxMzkuNjY4TDE1Mi40ODQgMTI3LjE1M0MxNTAuOTYyIDEyNS42MzIgMTQ4LjkgMTI0Ljc3OCAxNDYuNzQ5IDEyNC43NzhDMTQ0LjU5OSAxMjQuNzc4IDE0Mi41MzYgMTI1LjYzMiAxNDEuMDE1IDEyNy4xNTNMMTA0LjE2OCAxNjRNMTE2LjMzNCAxMjMuNDQ1QzEyMC44MTMgMTIzLjQ0NSAxMjQuNDQ1IDExOS44MTQgMTI0LjQ0NSAxMTUuMzM0QzEyNC40NDUgMTEwLjg1NSAxMjAuODEzIDEwNy4yMjQgMTE2LjMzNCAxMDcuMjI0QzExMS44NTUgMTA3LjIyNCAxMDguMjIzIDExMC44NTUgMTA4LjIyMyAxMTUuMzM0QzEwOC4yMjMgMTE5LjgxNCAxMTEuODU1IDEyMy40NDUgMTE2LjMzNCAxMjMuNDQ1WiIgc3Ryb2tlPSIjNjI2MjYyIiBzdHJva2Utd2lkdGg9IjguMTEwNzciIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIgc3Ryb2tlLWxpbmVqb2luPSJyb3VuZCIvPgo8L3N2Zz4K';\nexport const FALLBACK_LIGHT =\n  'data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjU2IiBoZWlnaHQ9IjI1NiIgdmlld0JveD0iMCAwIDI1NiAyNTYiIGZpbGw9Im5vbmUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+CjxyZWN0IHdpZHRoPSIyNTYiIGhlaWdodD0iMjU2IiBmaWxsPSIjRUNFQ0VDIi8+CjxwYXRoIGQ9Ik0xNTYuODg4IDkxLjAwMkgxMDAuMTEyQzk1LjYzMjkgOTEuMDAyIDkyLjAwMTUgOTQuNjMzNCA5Mi4wMDE1IDk5LjExMjdWMTU1Ljg4OEM5Mi4wMDE1IDE2MC4zNjcgOTUuNjMyOSAxNjMuOTk5IDEwMC4xMTIgMTYzLjk5OUgxNTYuODg4QzE2MS4zNjcgMTYzLjk5OSAxNjQuOTk4IDE2MC4zNjcgMTY0Ljk5OCAxNTUuODg4Vjk5LjExMjdDMTY0Ljk5OCA5NC42MzM0IDE2MS4zNjcgOTEuMDAyIDE1Ni44ODggOTEuMDAyWiIgc3Ryb2tlPSIjRDdEN0Q3IiBzdHJva2Utd2lkdGg9IjguMTEwNzciIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIgc3Ryb2tlLWxpbmVqb2luPSJyb3VuZCIvPgo8cGF0aCBkPSJNMTY0Ljk5OCAxMzkuNjY4TDE1Mi40ODQgMTI3LjE1M0MxNTAuOTYyIDEyNS42MzIgMTQ4LjkgMTI0Ljc3OCAxNDYuNzQ5IDEyNC43NzhDMTQ0LjU5OSAxMjQuNzc4IDE0Mi41MzYgMTI1LjYzMiAxNDEuMDE1IDEyNy4xNTNMMTA0LjE2OCAxNjRNMTE2LjMzNCAxMjMuNDQ1QzEyMC44MTMgMTIzLjQ0NSAxMjQuNDQ1IDExOS44MTQgMTI0LjQ0NSAxMTUuMzM0QzEyNC40NDUgMTEwLjg1NSAxMjAuODEzIDEwNy4yMjQgMTE2LjMzNCAxMDcuMjI0QzExMS44NTUgMTA3LjIyNCAxMDguMjIzIDExMC44NTUgMTA4LjIyMyAxMTUuMzM0QzEwOC4yMjMgMTE5LjgxNCAxMTEuODU1IDEyMy40NDUgMTE2LjMzNCAxMjMuNDQ1WiIgc3Ryb2tlPSIjRDdEN0Q3IiBzdHJva2Utd2lkdGg9IjguMTEwNzciIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIgc3Ryb2tlLWxpbmVqb2luPSJyb3VuZCIvPgo8L3N2Zz4K';\n"],"mappings":";;;;AAGA,MAAa,YAAY,cAErB,EAAE,UAAI,YAAK,OAAO,SAAS,aAC3B,EACE,sBAGE,EAAE,KACH;CACH,MAAM,UAAUA,KAAG,KAAG;;;;;;;;iBAQT,oBAAoB,IAAI,EAAE;MACrC;AAEF,QAAO;EACL;EACA,YAAY,QAAQ;EACpB,QAAQA,KAAG,QAAQ,6BAA6B,QAAQ,0BAA0B;EAClF,OAAO,KAAG;;;;;;;;EAQV,MAAMA,KACJ,QAAQ,MACR,KAAG;;UAGJ;EACD,UAAU,QAAQ;EAClB,SAAS,KAAG;WACP,UAAU;wBACG,KAAK,MAAM,eAAe,GAAI,CAAC;;;;;;;EAOjD,MAAM,KAAG;;;;;;;;;yBASU,MAAM,aAAa;;;;WAIjC,UAAU;;;;;aAKR,QAAQ;;;;;EAKf,SAASA,KACP,QAAQ,MACR,QAAQ,6BACR,KAAG;;0BAEe,MAAM,kBAAkB;2BACvB,MAAM,eAAe;wBACxB,KAAK,MAAM,kBAAkB,GAAI,CAAC;UAEnD;EAED,SAAS,KAAG;;;;;;EAMb;EAEJ;AAED,MAAa,gBACX;AACF,MAAa,iBACX"}