@lobehub/ui 5.64.2 → 6.0.0-beta.10

package/es/Icon/Icon.mjs

@@ -1,18 +1,19 @@
 "use client";
+import { styleProps } from "../styles/stylex/props.mjs";
 import { useIconContext } from "./components/IconProvider.mjs";
 import { calcSize } from "./components/utils.mjs";
-import { variants } from "./style.mjs";
+import { styles } from "./style.mjs";
 import { isValidElement, memo, useMemo } from "react";
 import { jsx } from "react/jsx-runtime";
-import { cx } from "antd-style";
+import clsx$1 from "clsx";
 //#region src/Icon/Icon.tsx
 const Icon = memo(({ icon, size: iconSize, color, fill = "transparent", className, focusable, spin, fillRule, fillOpacity, ref, ...rest }) => {
 	const { color: colorConfig, fill: fillConfig, fillOpacity: fillOpacityConfig, fillRule: fillRuleConfig, focusable: focusableConfig, className: classNameConfig, size: sizeConfig, ...restConfig } = useIconContext();
 	const { size, strokeWidth } = useMemo(() => calcSize(iconSize || sizeConfig), [iconSize, sizeConfig]);
 	const SvgIcon = icon;
 	return /* @__PURE__ */ jsx("span", {
-		className: cx(variants({ spin }), classNameConfig, className),
 		role: "img",
+		className: styleProps([styles.root, spin && styles.spin], clsx$1("anticon", classNameConfig, className)).className,
 		...restConfig,
 		...rest,
 		children: icon && (isValidElement(icon) ? icon : /* @__PURE__ */ jsx(SvgIcon, {

package/es/Icon/Icon.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"Icon.mjs","names":[],"sources":["../../src/Icon/Icon.tsx"],"sourcesContent":["'use client';\n\nimport { cx } from 'antd-style';\nimport type { LucideIcon } from 'lucide-react';\nimport { isValidElement, memo, useMemo } from 'react';\n\nimport { useIconContext } from './components/IconProvider';\nimport { calcSize } from './components/utils';\nimport { variants } from './style';\nimport type { IconProps } from './type';\n\nconst Icon = memo<IconProps>(\n  ({\n    icon,\n    size: iconSize,\n    color,\n    fill = 'transparent',\n    className,\n    focusable,\n    spin,\n    fillRule,\n    fillOpacity,\n    ref,\n    ...rest\n  }) => {\n    const {\n      color: colorConfig,\n      fill: fillConfig,\n      fillOpacity: fillOpacityConfig,\n      fillRule: fillRuleConfig,\n      focusable: focusableConfig,\n      className: classNameConfig,\n      size: sizeConfig,\n      ...restConfig\n    } = useIconContext();\n\n    const { size, strokeWidth } = useMemo(\n      () => calcSize(iconSize || sizeConfig),\n      [iconSize, sizeConfig],\n    );\n\n    const SvgIcon = icon as LucideIcon;\n\n    return (\n      <span\n        className={cx(variants({ spin }), classNameConfig, className)}\n        role=\"img\"\n        {...restConfig}\n        {...rest}\n      >\n        {icon &&\n          (isValidElement(icon) ? (\n            icon\n          ) : (\n            <SvgIcon\n              color={color || colorConfig}\n              fill={fill || fillConfig}\n              fillOpacity={fillOpacity || fillOpacityConfig}\n              fillRule={fillRule || fillRuleConfig}\n              focusable={focusable || focusableConfig}\n              height={size}\n              ref={ref}\n              size={size}\n              strokeWidth={strokeWidth}\n              width={size}\n            />\n          ))}\n      </span>\n    );\n  },\n);\n\nIcon.displayName = 'Icon';\n\nexport default Icon;\n"],"mappings":";;;;;;;;AAWA,MAAM,OAAO,MACV,EACC,MACA,MAAM,UACN,OACA,OAAO,eACP,WACA,WACA,MACA,UACA,aACA,KACA,GAAG,WACC;CACJ,MAAM,EACJ,OAAO,aACP,MAAM,YACN,aAAa,mBACb,UAAU,gBACV,WAAW,iBACX,WAAW,iBACX,MAAM,YACN,GAAG,eACD,eAAe;CAEnB,MAAM,EAAE,MAAM,gBAAgB,cACtB,SAAS,YAAY,UAAU,GACrC,CAAC,UAAU,UAAU,CACvB;CAEA,MAAM,UAAU;CAEhB,OACE,oBAAC,QAAD;EACE,WAAW,GAAG,SAAS,EAAE,KAAK,CAAC,GAAG,iBAAiB,SAAS;EAC5D,MAAK;EACL,GAAI;EACJ,GAAI;EAEH,UAAA,SACE,eAAe,IAAI,IAClB,OAEA,oBAAC,SAAD;GACE,OAAO,SAAS;GAChB,MAAM,QAAQ;GACd,aAAa,eAAe;GAC5B,UAAU,YAAY;GACtB,WAAW,aAAa;GACxB,QAAQ;GACH;GACC;GACO;GACb,OAAO;EACR,CAAA;CAED,CAAA;AAEV,CACF;AAEA,KAAK,cAAc"}
+{"version":3,"file":"Icon.mjs","names":["clsx"],"sources":["../../src/Icon/Icon.tsx"],"sourcesContent":["'use client';\n\nimport clsx from 'clsx';\nimport type { LucideIcon } from 'lucide-react';\nimport { isValidElement, memo, useMemo } from 'react';\n\nimport { styleProps } from '@/styles/stylex/props';\n\nimport { useIconContext } from './components/IconProvider';\nimport { calcSize } from './components/utils';\nimport { styles } from './style';\nimport type { IconProps } from './type';\n\nconst Icon = memo<IconProps>(\n  ({\n    icon,\n    size: iconSize,\n    color,\n    fill = 'transparent',\n    className,\n    focusable,\n    spin,\n    fillRule,\n    fillOpacity,\n    ref,\n    ...rest\n  }) => {\n    const {\n      color: colorConfig,\n      fill: fillConfig,\n      fillOpacity: fillOpacityConfig,\n      fillRule: fillRuleConfig,\n      focusable: focusableConfig,\n      className: classNameConfig,\n      size: sizeConfig,\n      ...restConfig\n    } = useIconContext();\n\n    const { size, strokeWidth } = useMemo(\n      () => calcSize(iconSize || sizeConfig),\n      [iconSize, sizeConfig],\n    );\n\n    const SvgIcon = icon as LucideIcon;\n\n    return (\n      <span\n        role=\"img\"\n        className={\n          styleProps(\n            [styles.root, spin && styles.spin],\n            clsx('anticon', classNameConfig, className),\n          ).className\n        }\n        {...restConfig}\n        {...rest}\n      >\n        {icon &&\n          (isValidElement(icon) ? (\n            icon\n          ) : (\n            <SvgIcon\n              color={color || colorConfig}\n              fill={fill || fillConfig}\n              fillOpacity={fillOpacity || fillOpacityConfig}\n              fillRule={fillRule || fillRuleConfig}\n              focusable={focusable || focusableConfig}\n              height={size}\n              ref={ref}\n              size={size}\n              strokeWidth={strokeWidth}\n              width={size}\n            />\n          ))}\n      </span>\n    );\n  },\n);\n\nIcon.displayName = 'Icon';\n\nexport default Icon;\n"],"mappings":";;;;;;;;;AAaA,MAAM,OAAO,MACV,EACC,MACA,MAAM,UACN,OACA,OAAO,eACP,WACA,WACA,MACA,UACA,aACA,KACA,GAAG,WACC;CACJ,MAAM,EACJ,OAAO,aACP,MAAM,YACN,aAAa,mBACb,UAAU,gBACV,WAAW,iBACX,WAAW,iBACX,MAAM,YACN,GAAG,eACD,eAAe;CAEnB,MAAM,EAAE,MAAM,gBAAgB,cACtB,SAAS,YAAY,UAAU,GACrC,CAAC,UAAU,UAAU,CACvB;CAEA,MAAM,UAAU;CAEhB,OACE,oBAAC,QAAD;EACE,MAAK;EACL,WACE,WACE,CAAC,OAAO,MAAM,QAAQ,OAAO,IAAI,GACjCA,OAAK,WAAW,iBAAiB,SAAS,CAC5C,CAAC,CAAC;EAEJ,GAAI;EACJ,GAAI;EAEH,UAAA,SACE,eAAe,IAAI,IAClB,OAEA,oBAAC,SAAD;GACE,OAAO,SAAS;GAChB,MAAM,QAAQ;GACd,aAAa,eAAe;GAC5B,UAAU,YAAY;GACtB,WAAW,aAAa;GACxB,QAAQ;GACH;GACC;GACO;GACb,OAAO;EACR,CAAA;CAED,CAAA;AAEV,CACF;AAEA,KAAK,cAAc"}

package/es/Icon/components/IconProvider.d.mts

@@ -1,13 +1,12 @@
 import { IconProps } from "../type.mjs";
 import { ReactNode } from "react";
 //#region src/Icon/components/IconProvider.d.ts
-type IconContentConfig = Omit<IconProps, 'icon' | 'ref'>;
-declare const IconContext: import("react").Context<IconContentConfig>;
-declare const IconProvider: import("react").NamedExoticComponent<{
+export type IconContentConfig = Omit<IconProps, 'icon' | 'ref'>;
+export declare const IconContext: import("react").Context<IconContentConfig>;
+export declare const IconProvider: import("react").NamedExoticComponent<{
   children: ReactNode;
   config?: IconContentConfig;
 }>;
-declare const useIconContext: () => IconContentConfig;
+export declare const useIconContext: () => IconContentConfig;
 //#endregion
-export { IconContentConfig, IconContext, IconProvider, useIconContext };
 //# sourceMappingURL=IconProvider.d.mts.map

package/es/Icon/style.mjs

@@ -1,27 +1,21 @@
-import { createStaticStyles, keyframes } from "antd-style";
-import { cva } from "class-variance-authority";
 //#region src/Icon/style.ts
-const spin = keyframes`
-  0% {
-    rotate: 0deg;
-  }
-  100% {
-    rotate: 360deg;
-  }
-`;
-const styles = createStaticStyles(({ css }) => {
-	return { spin: css`
-      animation: ${spin} 1s linear infinite;
-    ` };
-});
-const variants = cva("anticon", {
-	defaultVariants: { spin: false },
-	variants: { spin: {
-		false: null,
-		true: styles.spin
-	} }
-});
+const styles = {
+	root: {
+		kGNEyG: "lb6s0dn4",
+		k1xSpc: "lb3nfvp2",
+		kLWn49: "lb14ju556",
+		kXLuUW: "lb1x7wgjd",
+		$$css: true
+	},
+	spin: {
+		k44tkh: "lb1q3qbx4",
+		ko0y90: "lba4qsjk",
+		kKVMdj: "lb1fhqo85",
+		kyAemX: "lb1esw782",
+		$$css: true
+	}
+};
 //#endregion
-export { styles, variants };
+export { styles };
 
 //# sourceMappingURL=style.mjs.map

package/es/Icon/style.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"style.mjs","names":[],"sources":["../../src/Icon/style.ts"],"sourcesContent":["import { createStaticStyles, keyframes } from 'antd-style';\nimport { cva } from 'class-variance-authority';\n\nconst spin = keyframes`\n  0% {\n    rotate: 0deg;\n  }\n  100% {\n    rotate: 360deg;\n  }\n`;\n\nexport const styles = createStaticStyles(({ css }) => {\n  return {\n    spin: css`\n      animation: ${spin} 1s linear infinite;\n    `,\n  };\n});\n\nexport const variants = cva('anticon', {\n  defaultVariants: {\n    spin: false,\n  },\n\n  variants: {\n    spin: {\n      false: null,\n      true: styles.spin,\n    },\n  },\n});\n"],"mappings":";;;AAGA,MAAM,OAAO,SAAS;;;;;;;;AAStB,MAAa,SAAS,oBAAoB,EAAE,UAAU;CACpD,OAAO,EACL,MAAM,GAAG;mBACM,KAAK;MAEtB;AACF,CAAC;AAED,MAAa,WAAW,IAAI,WAAW;CACrC,iBAAiB,EACf,MAAM,MACR;CAEA,UAAU,EACR,MAAM;EACJ,OAAO;EACP,MAAM,OAAO;CACf,EACF;AACF,CAAC"}
+{"version":3,"file":"style.mjs","names":[],"sources":["../../src/Icon/style.ts"],"sourcesContent":["import * as stylex from '@stylexjs/stylex';\n\nconst spin = stylex.keyframes({\n  '0%': { rotate: '0deg' },\n  '100%': { rotate: '360deg' },\n});\n\nexport const styles = stylex.create({\n  root: {\n    alignItems: 'center',\n    display: 'inline-flex',\n    lineHeight: 0,\n    verticalAlign: '-0.125em',\n  },\n  spin: {\n    animationDuration: '1s',\n    animationIterationCount: 'infinite',\n    animationName: spin,\n    animationTimingFunction: 'linear',\n  },\n});\n"],"mappings":";AAEA,MAAa,SAAS;CACpB,MAAM;EACJ,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,OAAO;CACT;CACA,MAAM;EACJ,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,OAAO;CACT;AACF"}

package/es/Icon/type.d.mts

@@ -2,18 +2,17 @@ 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'> {
+export 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 {
+export type IconSizeType = 'large' | 'middle' | 'small';
+export type IconSize = number | IconSizeType | IconSizeConfig;
+export type LucideIconProps = Pick<LucideProps, 'fill' | 'fillRule' | 'fillOpacity' | 'color' | 'focusable'>;
+export 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

@@ -1,13 +1,16 @@
 "use client";
+import { styleProps } from "../styles/stylex/props.mjs";
 import FlexBasic_default from "../Flex/FlexBasic.mjs";
-import Skeleton from "../base-ui/Skeleton/index.mjs";
+import { stylish } from "../styles/stylex/stylish.mjs";
+import { useThemeMode } from "../styles/theme/scope.mjs";
+import Skeleton from "../Skeleton/index.mjs";
+import { imageMarker } from "./marker.stylex.mjs";
 import { usePreviewGroupContext } from "./PreviewGroup.mjs";
-import { FALLBACK_DARK, FALLBACK_LIGHT, styles, variants } from "./style.mjs";
+import { FALLBACK_DARK, FALLBACK_LIGHT, styles } from "./style.mjs";
 import { openPreview } from "./viewer/registry.mjs";
 import PreviewOutlet from "./viewer/PreviewOutlet.mjs";
 import { memo, useCallback, useEffect, useId, useMemo, useRef, useState } from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
-import { cx, useThemeMode } from "antd-style";
 //#region src/Image/Image.tsx
 const resolvePreview = (groupPreview, imagePreview) => {
 	if (imagePreview === false) return false;
@@ -19,6 +22,11 @@ const resolvePreview = (groupPreview, imagePreview) => {
 		...imageOptions
 	};
 };
+const variantStyles = {
+	borderless: stylish.variantBorderlessWithoutHover,
+	filled: styles.filled,
+	outlined: stylish.variantOutlinedWithoutHover
+};
 const Image = memo(({ ref, style, preview, isLoading, maxHeight = "100%", maxWidth = "100%", minHeight, minWidth, actions, className, alwaysShowActions, variant = "filled", objectFit = "cover", classNames, styles: customStyles, onClick, onError, onPointerDown, width, height, size, src, alt, loading = "lazy", ...rest }) => {
 	const { isDarkMode } = useThemeMode();
 	const [hasError, setHasError] = useState(false);
@@ -102,7 +110,6 @@ const Image = memo(({ ref, style, preview, isLoading, maxHeight = "100%", maxWid
 		previewSrc,
 		group
 	]);
-	const actionsClassName = alwaysShowActions ? styles.actionsVisible : styles.actionsHidden;
 	if (isLoading) return /* @__PURE__ */ jsx("div", {
 		onClick,
 		children: /* @__PURE__ */ jsx(Skeleton, {
@@ -117,25 +124,27 @@ const Image = memo(({ ref, style, preview, isLoading, maxHeight = "100%", maxWid
 		})
 	});
 	return /* @__PURE__ */ jsxs(FlexBasic_default, {
-		className: cx(variants({ variant }), className),
 		ref,
-		style,
+		...styleProps([
+			styles.root,
+			variantStyles[variant],
+			imageMarker
+		], className, style),
 		children: [
 			actions && /* @__PURE__ */ jsx("div", {
-				className: cx(actionsClassName, alwaysShowActions ? "" : "actions-hidden"),
+				...styleProps([styles.actions, !alwaysShowActions && styles.actionsHidden], alwaysShowActions ? void 0 : "actions-hidden"),
 				children: actions
 			}),
 			/* @__PURE__ */ jsx("div", {
-				className: cx(styles.wrapper, classNames?.wrapper),
-				style: customStyles?.wrapper,
+				...styleProps(styles.wrapper, classNames?.wrapper, customStyles?.wrapper),
 				children: /* @__PURE__ */ jsx("img", {
 					alt,
-					className: cx(styles.image, previewEnabled && styles.previewable, classNames?.image),
 					height: resolvedHeight,
 					loading,
 					ref: imgRef,
 					src: hasError ? isDarkMode ? FALLBACK_DARK : FALLBACK_LIGHT : src,
 					width: resolvedWidth,
+					className: styleProps([styles.image, previewEnabled && styles.previewable], classNames?.image).className,
 					style: {
 						height: resolvedHeight,
 						maxHeight,

package/es/Image/Image.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"Image.mjs","names":["Flexbox"],"sources":["../../src/Image/Image.tsx"],"sourcesContent":["'use client';\n\nimport { cx, useThemeMode } from 'antd-style';\nimport {\n  memo,\n  type MouseEvent,\n  type PointerEvent,\n  type SyntheticEvent,\n  useCallback,\n  useEffect,\n  useId,\n  useMemo,\n  useRef,\n  useState,\n} from 'react';\n\nimport Skeleton from '@/base-ui/Skeleton';\nimport { Flexbox } from '@/Flex';\n\nimport { usePreviewGroupContext } from './PreviewGroup';\nimport { FALLBACK_DARK, FALLBACK_LIGHT, styles, variants } from './style';\nimport type { ImagePreviewOptions, ImageProps } from './type';\nimport { DEFAULT_AUTO_ZOOM_THRESHOLD, DEFAULT_MAX_SCALE } from './viewer/geometry';\nimport PreviewOutlet from './viewer/PreviewOutlet';\nimport { openPreview, type PreviewEntry } from './viewer/registry';\n\nconst resolvePreview = (\n  groupPreview: boolean | ImagePreviewOptions | undefined,\n  imagePreview: boolean | ImagePreviewOptions | undefined,\n): ImagePreviewOptions | false => {\n  if (imagePreview === false) return false;\n  if (imagePreview === undefined && groupPreview === false) return false;\n\n  const groupOptions = typeof groupPreview === 'object' ? groupPreview : undefined;\n  const imageOptions = typeof imagePreview === 'object' ? imagePreview : undefined;\n\n  return { ...groupOptions, ...imageOptions };\n};\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    onError,\n    onPointerDown,\n    width,\n    height,\n    size,\n    src,\n    alt,\n    loading = 'lazy',\n    ...rest\n  }) => {\n    const { isDarkMode } = useThemeMode();\n    const [hasError, setHasError] = useState(false);\n    const lastSrcRef = useRef(src);\n    const imgRef = useRef<HTMLImageElement>(null);\n    const preOpenFocusRef = useRef<HTMLElement | null>(null);\n    const id = useId();\n    const group = usePreviewGroupContext();\n\n    if (lastSrcRef.current !== src) {\n      lastSrcRef.current = src;\n      if (hasError) setHasError(false);\n    }\n\n    const resolvedWidth = width ?? size;\n    const resolvedHeight = height ?? size;\n\n    const resolvedPreview = resolvePreview(group?.preview, preview);\n    const previewEnabled = resolvedPreview !== false;\n    const resolvedOptions = useMemo(\n      () =>\n        previewEnabled\n          ? {\n              autoZoomThreshold: DEFAULT_AUTO_ZOOM_THRESHOLD,\n              defaultZoom: 'auto' as const,\n              maxScale: DEFAULT_MAX_SCALE,\n              ...resolvedPreview,\n            }\n          : undefined,\n      [previewEnabled, resolvedPreview],\n    );\n    const previewSrc = resolvedOptions?.src;\n\n    useEffect(() => {\n      if (!group) return;\n      return group.register({\n        getElement: () => imgRef.current,\n        id,\n        options: resolvedOptions,\n        previewSrc,\n        src: src ?? '',\n      });\n    }, [group, id, src, previewSrc, resolvedOptions]);\n\n    const handleError = useCallback(\n      (event: SyntheticEvent<HTMLImageElement>) => {\n        setHasError(true);\n        onError?.(event);\n      },\n      [onError],\n    );\n\n    const handlePointerDown = useCallback(\n      (event: PointerEvent<HTMLImageElement>) => {\n        onPointerDown?.(event);\n        const active = document.activeElement;\n        preOpenFocusRef.current =\n          active instanceof HTMLElement &&\n          active !== document.body &&\n          active !== document.documentElement\n            ? active\n            : null;\n      },\n      [onPointerDown],\n    );\n\n    const handleClick = useCallback(\n      (event: MouseEvent<HTMLImageElement>) => {\n        onClick?.(event);\n        if (!previewEnabled || !imgRef.current || !resolvedOptions) return;\n        const clickedEntry: PreviewEntry = {\n          element: imgRef.current,\n          options: resolvedOptions,\n          previewSrc,\n          src: imgRef.current.currentSrc || imgRef.current.src,\n        };\n        const openerFocusElement = preOpenFocusRef.current;\n\n        if (!group) {\n          openPreview(clickedEntry, undefined, 0, openerFocusElement);\n          return;\n        }\n\n        const galleryEntries: PreviewEntry[] = [];\n        let clickedIndex = -1;\n        for (const groupEntry of group.getEntries()) {\n          const element = groupEntry.getElement();\n          if (!element || !groupEntry.options) continue;\n          if (element === imgRef.current) clickedIndex = galleryEntries.length;\n          galleryEntries.push({\n            element,\n            options: groupEntry.options,\n            previewSrc: groupEntry.previewSrc,\n            src: element.currentSrc || element.src,\n          });\n        }\n        openPreview(\n          clickedEntry,\n          galleryEntries,\n          clickedIndex >= 0 ? clickedIndex : 0,\n          openerFocusElement,\n        );\n      },\n      [onClick, previewEnabled, resolvedOptions, previewSrc, group],\n    );\n\n    const actionsClassName = alwaysShowActions ? styles.actionsVisible : styles.actionsHidden;\n\n    if (isLoading)\n      return (\n        <div onClick={onClick}>\n          <Skeleton\n            height={resolvedHeight}\n            style={{ maxHeight, maxWidth, minHeight, minWidth }}\n            width={resolvedWidth}\n          />\n        </div>\n      );\n\n    return (\n      <Flexbox className={cx(variants({ variant }), className)} ref={ref} style={style}>\n        {actions && (\n          <div className={cx(actionsClassName, alwaysShowActions ? '' : 'actions-hidden')}>\n            {actions}\n          </div>\n        )}\n        <div className={cx(styles.wrapper, classNames?.wrapper)} style={customStyles?.wrapper}>\n          <img\n            alt={alt}\n            className={cx(styles.image, previewEnabled && styles.previewable, classNames?.image)}\n            height={resolvedHeight}\n            loading={loading}\n            ref={imgRef}\n            src={hasError ? (isDarkMode ? FALLBACK_DARK : FALLBACK_LIGHT) : src}\n            width={resolvedWidth}\n            style={{\n              height: resolvedHeight,\n              maxHeight,\n              maxWidth,\n              minHeight,\n              minWidth,\n              objectFit,\n              width: resolvedWidth,\n              ...customStyles?.image,\n            }}\n            onClick={handleClick}\n            onError={handleError}\n            onPointerDown={handlePointerDown}\n            {...rest}\n          />\n        </div>\n        {previewEnabled && <PreviewOutlet elementRef={imgRef} />}\n      </Flexbox>\n    );\n  },\n);\n\nImage.displayName = 'Image';\n\nexport default Image;\n"],"mappings":"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"}
+{"version":3,"file":"Image.mjs","names":["Flexbox"],"sources":["../../src/Image/Image.tsx"],"sourcesContent":["'use client';\n\nimport {\n  memo,\n  type MouseEvent,\n  type PointerEvent,\n  type SyntheticEvent,\n  useCallback,\n  useEffect,\n  useId,\n  useMemo,\n  useRef,\n  useState,\n} from 'react';\n\nimport { Flexbox } from '@/Flex';\nimport Skeleton from '@/Skeleton';\nimport { styleProps } from '@/styles/stylex/props';\nimport { stylish } from '@/styles/stylex/stylish';\nimport { useThemeMode } from '@/styles/theme/scope';\n\nimport { imageMarker } from './marker.stylex';\nimport { usePreviewGroupContext } from './PreviewGroup';\nimport { FALLBACK_DARK, FALLBACK_LIGHT, styles } from './style';\nimport type { ImagePreviewOptions, ImageProps } from './type';\nimport { DEFAULT_AUTO_ZOOM_THRESHOLD, DEFAULT_MAX_SCALE } from './viewer/geometry';\nimport PreviewOutlet from './viewer/PreviewOutlet';\nimport { openPreview, type PreviewEntry } from './viewer/registry';\n\nconst resolvePreview = (\n  groupPreview: boolean | ImagePreviewOptions | undefined,\n  imagePreview: boolean | ImagePreviewOptions | undefined,\n): ImagePreviewOptions | false => {\n  if (imagePreview === false) return false;\n  if (imagePreview === undefined && groupPreview === false) return false;\n\n  const groupOptions = typeof groupPreview === 'object' ? groupPreview : undefined;\n  const imageOptions = typeof imagePreview === 'object' ? imagePreview : undefined;\n\n  return { ...groupOptions, ...imageOptions };\n};\n\nconst variantStyles = {\n  borderless: stylish.variantBorderlessWithoutHover,\n  filled: styles.filled,\n  outlined: stylish.variantOutlinedWithoutHover,\n};\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    onError,\n    onPointerDown,\n    width,\n    height,\n    size,\n    src,\n    alt,\n    loading = 'lazy',\n    ...rest\n  }) => {\n    const { isDarkMode } = useThemeMode();\n    const [hasError, setHasError] = useState(false);\n    const lastSrcRef = useRef(src);\n    const imgRef = useRef<HTMLImageElement>(null);\n    const preOpenFocusRef = useRef<HTMLElement | null>(null);\n    const id = useId();\n    const group = usePreviewGroupContext();\n\n    if (lastSrcRef.current !== src) {\n      lastSrcRef.current = src;\n      if (hasError) setHasError(false);\n    }\n\n    const resolvedWidth = width ?? size;\n    const resolvedHeight = height ?? size;\n\n    const resolvedPreview = resolvePreview(group?.preview, preview);\n    const previewEnabled = resolvedPreview !== false;\n    const resolvedOptions = useMemo(\n      () =>\n        previewEnabled\n          ? {\n              autoZoomThreshold: DEFAULT_AUTO_ZOOM_THRESHOLD,\n              defaultZoom: 'auto' as const,\n              maxScale: DEFAULT_MAX_SCALE,\n              ...resolvedPreview,\n            }\n          : undefined,\n      [previewEnabled, resolvedPreview],\n    );\n    const previewSrc = resolvedOptions?.src;\n\n    useEffect(() => {\n      if (!group) return;\n      return group.register({\n        getElement: () => imgRef.current,\n        id,\n        options: resolvedOptions,\n        previewSrc,\n        src: src ?? '',\n      });\n    }, [group, id, src, previewSrc, resolvedOptions]);\n\n    const handleError = useCallback(\n      (event: SyntheticEvent<HTMLImageElement>) => {\n        setHasError(true);\n        onError?.(event);\n      },\n      [onError],\n    );\n\n    const handlePointerDown = useCallback(\n      (event: PointerEvent<HTMLImageElement>) => {\n        onPointerDown?.(event);\n        const active = document.activeElement;\n        preOpenFocusRef.current =\n          active instanceof HTMLElement &&\n          active !== document.body &&\n          active !== document.documentElement\n            ? active\n            : null;\n      },\n      [onPointerDown],\n    );\n\n    const handleClick = useCallback(\n      (event: MouseEvent<HTMLImageElement>) => {\n        onClick?.(event);\n        if (!previewEnabled || !imgRef.current || !resolvedOptions) return;\n        const clickedEntry: PreviewEntry = {\n          element: imgRef.current,\n          options: resolvedOptions,\n          previewSrc,\n          src: imgRef.current.currentSrc || imgRef.current.src,\n        };\n        const openerFocusElement = preOpenFocusRef.current;\n\n        if (!group) {\n          openPreview(clickedEntry, undefined, 0, openerFocusElement);\n          return;\n        }\n\n        const galleryEntries: PreviewEntry[] = [];\n        let clickedIndex = -1;\n        for (const groupEntry of group.getEntries()) {\n          const element = groupEntry.getElement();\n          if (!element || !groupEntry.options) continue;\n          if (element === imgRef.current) clickedIndex = galleryEntries.length;\n          galleryEntries.push({\n            element,\n            options: groupEntry.options,\n            previewSrc: groupEntry.previewSrc,\n            src: element.currentSrc || element.src,\n          });\n        }\n        openPreview(\n          clickedEntry,\n          galleryEntries,\n          clickedIndex >= 0 ? clickedIndex : 0,\n          openerFocusElement,\n        );\n      },\n      [onClick, previewEnabled, resolvedOptions, previewSrc, group],\n    );\n\n    if (isLoading)\n      return (\n        <div onClick={onClick}>\n          <Skeleton\n            height={resolvedHeight}\n            style={{ maxHeight, maxWidth, minHeight, minWidth }}\n            width={resolvedWidth}\n          />\n        </div>\n      );\n\n    return (\n      <Flexbox\n        ref={ref}\n        {...styleProps([styles.root, variantStyles[variant], imageMarker], className, style)}\n      >\n        {actions && (\n          <div\n            {...styleProps(\n              [styles.actions, !alwaysShowActions && styles.actionsHidden],\n              alwaysShowActions ? undefined : 'actions-hidden',\n            )}\n          >\n            {actions}\n          </div>\n        )}\n        <div {...styleProps(styles.wrapper, classNames?.wrapper, customStyles?.wrapper)}>\n          <img\n            alt={alt}\n            height={resolvedHeight}\n            loading={loading}\n            ref={imgRef}\n            src={hasError ? (isDarkMode ? FALLBACK_DARK : FALLBACK_LIGHT) : src}\n            width={resolvedWidth}\n            className={\n              styleProps([styles.image, previewEnabled && styles.previewable], classNames?.image)\n                .className\n            }\n            style={{\n              height: resolvedHeight,\n              maxHeight,\n              maxWidth,\n              minHeight,\n              minWidth,\n              objectFit,\n              width: resolvedWidth,\n              ...customStyles?.image,\n            }}\n            onClick={handleClick}\n            onError={handleError}\n            onPointerDown={handlePointerDown}\n            {...rest}\n          />\n        </div>\n        {previewEnabled && <PreviewOutlet elementRef={imgRef} />}\n      </Flexbox>\n    );\n  },\n);\n\nImage.displayName = 'Image';\n\nexport default Image;\n"],"mappings":"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"}

package/es/Image/index.d.mts

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

package/es/Image/marker.stylex.mjs

@@ -0,0 +1,13 @@
+//#region src/Image/marker.stylex.ts
+const imageMarker = {
+	lbs7putv: "lbs7putv",
+	$$css: true
+};
+const actualSizeMarker = {
+	lbczq5ai: "lbczq5ai",
+	$$css: true
+};
+//#endregion
+export { actualSizeMarker, imageMarker };
+
+//# sourceMappingURL=marker.stylex.mjs.map

package/es/Image/marker.stylex.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"marker.stylex.mjs","names":[],"sources":["../../src/Image/marker.stylex.ts"],"sourcesContent":["import * as stylex from '@stylexjs/stylex';\n\nexport const imageMarker = stylex.defineMarker();\n\nexport const actualSizeMarker = stylex.defineMarker();\n"],"mappings":";AACA,MAAa,cAAc;CACzB,UAAU;CACV,OAAO;AACT;AACA,MAAa,mBAAmB;CAC9B,UAAU;CACV,OAAO;AACT"}