@jinmi/ui 0.0.0-stage → 6.0.2

package/es/Image/viewer/useZoomPan.mjs

@@ -0,0 +1,403 @@
+import { anchoredZoom, clampPan, clampScale, computeFit, doubleClickTarget, naturalScale, normalizeRotation, normalizeWheelDelta, panBounds, resolveInitialScale, rubberBand, wheelZoomFactor } from "./geometry.mjs";
+import { useCallback, useEffect, useRef, useState } from "react";
+import { animate, motionValue } from "motion/react";
+//#region src/Image/viewer/useZoomPan.ts
+const WHEEL_CLOSE_THRESHOLD = 100;
+const WHEEL_IDLE_MS = 300;
+const ZOOM_STEP = 1.5;
+const RESET_TRANSITION = {
+	damping: 30,
+	stiffness: 300,
+	type: "spring"
+};
+const CLEAN_EPSILON = .01;
+const useZoomPan = ({ natural, viewport, maxScale, onCloseRequest, isClosing, isTransitioning, fillViewport, defaultZoom, autoZoomThreshold }) => {
+	const naturalRef = useRef(natural);
+	const viewportRef = useRef(viewport);
+	const maxScaleRef = useRef(maxScale ?? 8);
+	maxScaleRef.current = maxScale ?? 8;
+	const fillViewportRef = useRef(fillViewport ?? false);
+	fillViewportRef.current = fillViewport ?? false;
+	const policyRef = useRef(defaultZoom ?? "auto");
+	policyRef.current = defaultZoom ?? "auto";
+	const thresholdRef = useRef(autoZoomThreshold ?? 2);
+	thresholdRef.current = autoZoomThreshold ?? 2;
+	const computeInitialScale = useCallback((rotation = 0) => {
+		const fitRect = computeFit(naturalRef.current, viewportRef.current, rotation, fillViewportRef.current);
+		return resolveInitialScale(policyRef.current, naturalRef.current, fitRect, rotation, thresholdRef.current);
+	}, []);
+	const [initialScaleSeed] = useState(computeInitialScale);
+	const initialScaleRef = useRef(initialScaleSeed);
+	const getInitialScale = useCallback(() => initialScaleRef.current, []);
+	const [{ scale, x, y, rotate, flipX, flipY }] = useState(() => ({
+		flipX: motionValue(false),
+		flipY: motionValue(false),
+		rotate: motionValue(0),
+		scale: motionValue(initialScaleRef.current),
+		x: motionValue(0),
+		y: motionValue(0)
+	}));
+	const effectiveMaxScale = useCallback(() => Math.max(maxScaleRef.current, initialScaleRef.current), []);
+	const onCloseRequestRef = useRef(onCloseRequest);
+	onCloseRequestRef.current = onCloseRequest;
+	const isClosingRef = useRef(isClosing);
+	isClosingRef.current = isClosing;
+	const isTransitioningRef = useRef(isTransitioning);
+	isTransitioningRef.current = isTransitioning;
+	const closeAccumRef = useRef(0);
+	const disarmedRef = useRef(false);
+	const idleTimerRef = useRef(null);
+	const resetCloseTracking = useCallback(() => {
+		if (idleTimerRef.current !== null) {
+			clearTimeout(idleTimerRef.current);
+			idleTimerRef.current = null;
+		}
+		closeAccumRef.current = 0;
+		disarmedRef.current = false;
+	}, []);
+	const closing = useCallback(() => isClosingRef.current?.() ?? false, []);
+	const isAtFitFloor = useCallback(() => scale.get() <= 1.01, [scale]);
+	const isOrientationClean = useCallback(() => Math.abs(rotate.get()) < CLEAN_EPSILON && !flipX.get() && !flipY.get(), [
+		flipX,
+		flipY,
+		rotate
+	]);
+	const isCleanState = useCallback(() => Math.abs(scale.get() - initialScaleRef.current) < CLEAN_EPSILON && isOrientationClean(), [isOrientationClean, scale]);
+	const computeDerived = useCallback(() => {
+		const currentScale = scale.get();
+		return {
+			canZoomIn: currentScale < effectiveMaxScale(),
+			canZoomOut: currentScale > 1,
+			isClean: isCleanState(),
+			isZoomed: currentScale > 1,
+			rotation: normalizeRotation(rotate.get())
+		};
+	}, [
+		effectiveMaxScale,
+		isCleanState,
+		rotate,
+		scale
+	]);
+	const [derived, setDerived] = useState(computeDerived);
+	const syncDerived = useCallback(() => {
+		setDerived((prev) => {
+			const next = computeDerived();
+			if (prev.canZoomIn === next.canZoomIn && prev.canZoomOut === next.canZoomOut && prev.isClean === next.isClean && prev.isZoomed === next.isZoomed && prev.rotation === next.rotation) return prev;
+			return next;
+		});
+	}, [computeDerived]);
+	useEffect(() => {
+		const unsubscribers = [
+			scale,
+			rotate,
+			flipX,
+			flipY
+		].map((value) => value.on("change", syncDerived));
+		syncDerived();
+		return () => {
+			for (const unsubscribe of unsubscribers) unsubscribe();
+		};
+	}, [
+		flipX,
+		flipY,
+		rotate,
+		scale,
+		syncDerived
+	]);
+	const getFitRect = useCallback(() => computeFit(naturalRef.current, viewportRef.current, normalizeRotation(rotate.get()), fillViewportRef.current), [rotate]);
+	const applyTransform = useCallback((next, fitRect) => {
+		const clamped = clampPan(next, fitRect, viewportRef.current);
+		scale.jump(next.scale);
+		x.jump(clamped.x);
+		y.jump(clamped.y);
+	}, [
+		scale,
+		x,
+		y
+	]);
+	const animateTransform = useCallback((next, fitRect) => {
+		const clamped = clampPan(next, fitRect, viewportRef.current);
+		animate(scale, next.scale, RESET_TRANSITION);
+		animate(x, clamped.x, RESET_TRANSITION);
+		animate(y, clamped.y, RESET_TRANSITION);
+	}, [
+		scale,
+		x,
+		y
+	]);
+	const zoomBy = useCallback((factor) => {
+		if (closing()) return;
+		const currentScale = scale.get();
+		const targetScale = clampScale(currentScale * factor, effectiveMaxScale());
+		const fitRect = getFitRect();
+		const anchor = {
+			x: viewportRef.current.width / 2,
+			y: viewportRef.current.height / 2
+		};
+		const next = anchoredZoom({
+			scale: currentScale,
+			x: x.get(),
+			y: y.get()
+		}, targetScale, anchor, fitRect);
+		animateTransform(next, fitRect);
+	}, [
+		animateTransform,
+		closing,
+		effectiveMaxScale,
+		getFitRect,
+		scale,
+		x,
+		y
+	]);
+	const zoomIn = useCallback(() => zoomBy(ZOOM_STEP), [zoomBy]);
+	const zoomOut = useCallback(() => zoomBy(1 / ZOOM_STEP), [zoomBy]);
+	const handleDoubleClick = useCallback((point) => {
+		if (closing()) return;
+		const currentScale = scale.get();
+		const fitRect = getFitRect();
+		const target = doubleClickTarget(currentScale, naturalRef.current, fitRect, normalizeRotation(rotate.get()));
+		const targetScale = clampScale(target, effectiveMaxScale());
+		const next = anchoredZoom({
+			scale: currentScale,
+			x: x.get(),
+			y: y.get()
+		}, targetScale, point, fitRect);
+		animateTransform(next, fitRect);
+	}, [
+		animateTransform,
+		closing,
+		effectiveMaxScale,
+		getFitRect,
+		rotate,
+		scale,
+		x,
+		y
+	]);
+	const toggleActualSize = useCallback(() => {
+		if (closing()) return;
+		const currentScale = scale.get();
+		const fitRect = getFitRect();
+		const actual = naturalScale(naturalRef.current, fitRect, normalizeRotation(rotate.get()));
+		const atActual = Math.abs(currentScale - actual) < CLEAN_EPSILON;
+		const targetScale = clampScale(atActual ? 1 : actual, effectiveMaxScale());
+		const anchor = {
+			x: viewportRef.current.width / 2,
+			y: viewportRef.current.height / 2
+		};
+		const next = anchoredZoom({
+			scale: currentScale,
+			x: x.get(),
+			y: y.get()
+		}, targetScale, anchor, fitRect);
+		animateTransform(next, fitRect);
+	}, [
+		animateTransform,
+		closing,
+		effectiveMaxScale,
+		getFitRect,
+		rotate,
+		scale,
+		x,
+		y
+	]);
+	const handleWheel = useCallback((event) => {
+		event.preventDefault?.();
+		if (closing()) return;
+		if (idleTimerRef.current !== null) clearTimeout(idleTimerRef.current);
+		idleTimerRef.current = setTimeout(() => {
+			idleTimerRef.current = null;
+			closeAccumRef.current = 0;
+			disarmedRef.current = false;
+		}, WHEEL_IDLE_MS);
+		const delta = normalizeWheelDelta(event.deltaY, event.deltaMode, viewportRef.current.height);
+		const currentScale = scale.get();
+		if (!!(event.ctrlKey || event.metaKey) || delta < 0 || !isAtFitFloor()) {
+			disarmedRef.current = true;
+			closeAccumRef.current = 0;
+			const rawTarget = currentScale * wheelZoomFactor(delta);
+			if (rawTarget <= 1) {
+				animate(scale, 1, RESET_TRANSITION);
+				animate(x, 0, RESET_TRANSITION);
+				animate(y, 0, RESET_TRANSITION);
+				return;
+			}
+			const targetScale = clampScale(rawTarget, effectiveMaxScale());
+			const fitRect = getFitRect();
+			const anchor = {
+				x: event.clientX,
+				y: event.clientY
+			};
+			const next = anchoredZoom({
+				scale: currentScale,
+				x: x.get(),
+				y: y.get()
+			}, targetScale, anchor, fitRect);
+			applyTransform(next, fitRect);
+			return;
+		}
+		if (disarmedRef.current || !isOrientationClean()) return;
+		closeAccumRef.current += Math.abs(delta);
+		if (closeAccumRef.current >= WHEEL_CLOSE_THRESHOLD) {
+			closeAccumRef.current = 0;
+			onCloseRequestRef.current?.();
+		}
+	}, [
+		applyTransform,
+		closing,
+		effectiveMaxScale,
+		getFitRect,
+		isAtFitFloor,
+		isOrientationClean,
+		scale,
+		x,
+		y
+	]);
+	const rotateBy = useCallback((delta) => {
+		if (closing()) return;
+		rotate.jump(normalizeRotation(rotate.get() + delta));
+		scale.jump(1);
+		x.jump(0);
+		y.jump(0);
+	}, [
+		closing,
+		rotate,
+		scale,
+		x,
+		y
+	]);
+	const rotateLeft = useCallback(() => rotateBy(-90), [rotateBy]);
+	const rotateRight = useCallback(() => rotateBy(90), [rotateBy]);
+	const flipHorizontal = useCallback(() => {
+		if (closing()) return;
+		flipX.set(!flipX.get());
+	}, [closing, flipX]);
+	const flipVertical = useCallback(() => {
+		if (closing()) return;
+		flipY.set(!flipY.get());
+	}, [closing, flipY]);
+	const reset = useCallback(() => {
+		if (closing()) return;
+		animate(scale, initialScaleRef.current, RESET_TRANSITION);
+		animate(x, 0, RESET_TRANSITION);
+		animate(y, 0, RESET_TRANSITION);
+		animate(rotate, 0, RESET_TRANSITION);
+		flipX.set(false);
+		flipY.set(false);
+	}, [
+		closing,
+		flipX,
+		flipY,
+		rotate,
+		scale,
+		x,
+		y
+	]);
+	const dragBy = useCallback((delta) => {
+		if (closing()) return;
+		const fitRect = getFitRect();
+		const bounds = panBounds({
+			scale: scale.get(),
+			x: 0,
+			y: 0
+		}, fitRect, viewportRef.current);
+		x.set(rubberBand(x.get() + delta.x, bounds.x.min, bounds.x.max));
+		y.set(rubberBand(y.get() + delta.y, bounds.y.min, bounds.y.max));
+	}, [
+		closing,
+		getFitRect,
+		scale,
+		x,
+		y
+	]);
+	const dragEnd = useCallback(() => {
+		if (closing()) return;
+		const fitRect = getFitRect();
+		const clamped = clampPan({
+			scale: scale.get(),
+			x: x.get(),
+			y: y.get()
+		}, fitRect, viewportRef.current);
+		animate(x, clamped.x, RESET_TRANSITION);
+		animate(y, clamped.y, RESET_TRANSITION);
+	}, [
+		closing,
+		getFitRect,
+		scale,
+		x,
+		y
+	]);
+	const escIntent = useCallback(() => isCleanState() ? "close" : "reset", [isCleanState]);
+	const setViewport = useCallback((next) => {
+		viewportRef.current = next;
+		const fitRect = computeFit(naturalRef.current, next, normalizeRotation(rotate.get()), fillViewportRef.current);
+		const clamped = clampPan({
+			scale: scale.get(),
+			x: x.get(),
+			y: y.get()
+		}, fitRect, next);
+		x.set(clamped.x);
+		y.set(clamped.y);
+	}, [
+		rotate,
+		scale,
+		x,
+		y
+	]);
+	const setNatural = useCallback((next) => {
+		const wasClean = isCleanState();
+		naturalRef.current = next;
+		const rotation = normalizeRotation(rotate.get());
+		initialScaleRef.current = computeInitialScale(rotation);
+		if (wasClean && !closing() && !isTransitioningRef.current?.()) scale.jump(initialScaleRef.current);
+		const fitRect = computeFit(next, viewportRef.current, rotation, fillViewportRef.current);
+		const clamped = clampPan({
+			scale: scale.get(),
+			x: x.get(),
+			y: y.get()
+		}, fitRect, viewportRef.current);
+		x.set(clamped.x);
+		y.set(clamped.y);
+	}, [
+		closing,
+		computeInitialScale,
+		isCleanState,
+		rotate,
+		scale,
+		x,
+		y
+	]);
+	return {
+		canZoomIn: derived.canZoomIn,
+		canZoomOut: derived.canZoomOut,
+		dragBy,
+		dragEnd,
+		escIntent,
+		flipHorizontal,
+		flipVertical,
+		flipX,
+		flipY,
+		getInitialScale,
+		handleDoubleClick,
+		handleWheel,
+		isClean: derived.isClean,
+		isZoomed: derived.isZoomed,
+		reset,
+		resetCloseTracking,
+		rotate,
+		rotateLeft,
+		rotateRight,
+		rotation: derived.rotation,
+		scale,
+		setNatural,
+		setViewport,
+		toggleActualSize,
+		x,
+		y,
+		zoomIn,
+		zoomOut
+	};
+};
+//#endregion
+export { useZoomPan };
+
+//# sourceMappingURL=useZoomPan.mjs.map

package/es/Image/viewer/useZoomPan.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"useZoomPan.mjs","names":[],"sources":["../../../src/Image/viewer/useZoomPan.ts"],"sourcesContent":["import type { MotionValue } from 'motion/react';\r\nimport { animate, motionValue } from 'motion/react';\r\nimport { useCallback, useEffect, useRef, useState } from 'react';\r\n\r\nimport type { Point, Rect, Rotation, Size, TransformState, ZoomPolicy } from './geometry';\r\nimport {\r\n  anchoredZoom,\r\n  clampPan,\r\n  clampScale,\r\n  computeFit,\r\n  DEFAULT_AUTO_ZOOM_THRESHOLD,\r\n  DEFAULT_MAX_SCALE,\r\n  doubleClickTarget,\r\n  MIN_SCALE,\r\n  naturalScale,\r\n  normalizeRotation,\r\n  normalizeWheelDelta,\r\n  panBounds,\r\n  resolveInitialScale,\r\n  rubberBand,\r\n  wheelZoomFactor,\r\n} from './geometry';\r\n\r\nconst WHEEL_CLOSE_THRESHOLD = 100;\r\nconst WHEEL_IDLE_MS = 300;\r\nconst ZOOM_STEP = 1.5;\r\nconst RESET_TRANSITION = { damping: 30, stiffness: 300, type: 'spring' as const };\r\nconst CLEAN_EPSILON = 0.01;\r\n\r\nexport interface WheelLikeEvent {\r\n  clientX: number;\r\n  clientY: number;\r\n  ctrlKey?: boolean;\r\n  deltaMode?: number;\r\n  deltaY: number;\r\n  metaKey?: boolean;\r\n  preventDefault?: () => void;\r\n}\r\n\r\nexport interface UseZoomPanOptions {\r\n  autoZoomThreshold?: number;\r\n  defaultZoom?: ZoomPolicy;\r\n  fillViewport?: boolean;\r\n  isClosing?: () => boolean;\r\n  isTransitioning?: () => boolean;\r\n  maxScale?: number;\r\n  natural: Size;\r\n  onCloseRequest?: () => void;\r\n  viewport: Size;\r\n}\r\n\r\nexport interface UseZoomPanResult {\r\n  canZoomIn: boolean;\r\n  canZoomOut: boolean;\r\n  dragBy: (delta: Point) => void;\r\n  dragEnd: () => void;\r\n  escIntent: () => 'reset' | 'close';\r\n  flipHorizontal: () => void;\r\n  flipVertical: () => void;\r\n  flipX: MotionValue<boolean>;\r\n  flipY: MotionValue<boolean>;\r\n  getInitialScale: () => number;\r\n  handleDoubleClick: (point: Point) => void;\r\n  handleWheel: (event: WheelLikeEvent) => void;\r\n  isClean: boolean;\r\n  isZoomed: boolean;\r\n  reset: () => void;\r\n  resetCloseTracking: () => void;\r\n  rotate: MotionValue<number>;\r\n  rotateLeft: () => void;\r\n  rotateRight: () => void;\r\n  rotation: Rotation;\r\n  scale: MotionValue<number>;\r\n  setNatural: (natural: Size) => void;\r\n  setViewport: (viewport: Size) => void;\r\n  toggleActualSize: () => void;\r\n  x: MotionValue<number>;\r\n  y: MotionValue<number>;\r\n  zoomIn: () => void;\r\n  zoomOut: () => void;\r\n}\r\n\r\ninterface DerivedState {\r\n  canZoomIn: boolean;\r\n  canZoomOut: boolean;\r\n  isClean: boolean;\r\n  isZoomed: boolean;\r\n  rotation: Rotation;\r\n}\r\n\r\nexport const useZoomPan = ({\r\n  natural,\r\n  viewport,\r\n  maxScale,\r\n  onCloseRequest,\r\n  isClosing,\r\n  isTransitioning,\r\n  fillViewport,\r\n  defaultZoom,\r\n  autoZoomThreshold,\r\n}: UseZoomPanOptions): UseZoomPanResult => {\r\n  const naturalRef = useRef(natural);\r\n  const viewportRef = useRef(viewport);\r\n  const maxScaleRef = useRef(maxScale ?? DEFAULT_MAX_SCALE);\r\n  maxScaleRef.current = maxScale ?? DEFAULT_MAX_SCALE;\r\n  const fillViewportRef = useRef(fillViewport ?? false);\r\n  fillViewportRef.current = fillViewport ?? false;\r\n  const policyRef = useRef(defaultZoom ?? 'auto');\r\n  policyRef.current = defaultZoom ?? 'auto';\r\n  const thresholdRef = useRef(autoZoomThreshold ?? DEFAULT_AUTO_ZOOM_THRESHOLD);\r\n  thresholdRef.current = autoZoomThreshold ?? DEFAULT_AUTO_ZOOM_THRESHOLD;\r\n\r\n  const computeInitialScale = useCallback((rotation: Rotation = 0) => {\r\n    const fitRect = computeFit(\r\n      naturalRef.current,\r\n      viewportRef.current,\r\n      rotation,\r\n      fillViewportRef.current,\r\n    );\r\n    return resolveInitialScale(\r\n      policyRef.current,\r\n      naturalRef.current,\r\n      fitRect,\r\n      rotation,\r\n      thresholdRef.current,\r\n    );\r\n  }, []);\r\n\r\n  const [initialScaleSeed] = useState(computeInitialScale);\r\n  const initialScaleRef = useRef(initialScaleSeed);\r\n  const getInitialScale = useCallback(() => initialScaleRef.current, []);\r\n\r\n  const [{ scale, x, y, rotate, flipX, flipY }] = useState(() => ({\r\n    flipX: motionValue(false),\r\n    flipY: motionValue(false),\r\n    rotate: motionValue(0),\r\n    scale: motionValue(initialScaleRef.current),\r\n    x: motionValue(0),\r\n    y: motionValue(0),\r\n  }));\r\n\r\n  // The ceiling has to clear the opening scale, otherwise a very large image\r\n  // (naturalScale > maxScale) is clamped below the 100% it was asked to open at.\r\n  const effectiveMaxScale = useCallback(\r\n    () => Math.max(maxScaleRef.current, initialScaleRef.current),\r\n    [],\r\n  );\r\n\r\n  const onCloseRequestRef = useRef(onCloseRequest);\r\n  onCloseRequestRef.current = onCloseRequest;\r\n\r\n  const isClosingRef = useRef(isClosing);\r\n  isClosingRef.current = isClosing;\r\n\r\n  const isTransitioningRef = useRef(isTransitioning);\r\n  isTransitioningRef.current = isTransitioning;\r\n\r\n  const closeAccumRef = useRef(0);\r\n  const disarmedRef = useRef(false);\r\n  const idleTimerRef = useRef<ReturnType<typeof setTimeout> | null>(null);\r\n\r\n  const resetCloseTracking = useCallback(() => {\r\n    if (idleTimerRef.current !== null) {\r\n      clearTimeout(idleTimerRef.current);\r\n      idleTimerRef.current = null;\r\n    }\r\n    closeAccumRef.current = 0;\r\n    disarmedRef.current = false;\r\n  }, []);\r\n\r\n  // The close FLIP spring animates these same scale/x/y values. Any of\r\n  // these entry points still firing during the ~300ms close window would\r\n  // either fight that spring visually or, for wheel/reset specifically,\r\n  // race escIntent()/isCleanState() into cancelling the close outright.\r\n  const closing = useCallback(() => isClosingRef.current?.() ?? false, []);\r\n\r\n  // Three questions that used to share one answer, and stop sharing it the\r\n  // moment the viewer can open at something other than fit:\r\n  //   isAtFitFloor       — no zoom-out left, so a further scroll down has\r\n  //                        nowhere to go and becomes the dismiss gesture.\r\n  //   isOrientationClean — no rotation/flip to lose, so dismissing is safe.\r\n  //                        Guards the wheel the same way layered Esc does:\r\n  //                        state the user built is never thrown away by a\r\n  //                        gesture that merely ran out of room.\r\n  //   isCleanState       — both of the above *and* untouched zoom, i.e. \"the\r\n  //                        user hasn't changed anything at all\", which is what\r\n  //                        lets Esc/click close outright and lets the close\r\n  //                        animation FLIP back to the thumbnail instead of fade.\r\n  // All three coincide only while initialScale === MIN_SCALE.\r\n  const isAtFitFloor = useCallback(() => scale.get() <= MIN_SCALE + CLEAN_EPSILON, [scale]);\r\n\r\n  const isOrientationClean = useCallback(\r\n    () => Math.abs(rotate.get()) < CLEAN_EPSILON && !flipX.get() && !flipY.get(),\r\n    [flipX, flipY, rotate],\r\n  );\r\n\r\n  const isCleanState = useCallback(\r\n    () => Math.abs(scale.get() - initialScaleRef.current) < CLEAN_EPSILON && isOrientationClean(),\r\n    [isOrientationClean, scale],\r\n  );\r\n\r\n  const computeDerived = useCallback((): DerivedState => {\r\n    const currentScale = scale.get();\r\n    return {\r\n      canZoomIn: currentScale < effectiveMaxScale(),\r\n      canZoomOut: currentScale > MIN_SCALE,\r\n      isClean: isCleanState(),\r\n      isZoomed: currentScale > MIN_SCALE,\r\n      rotation: normalizeRotation(rotate.get()),\r\n    };\r\n  }, [effectiveMaxScale, isCleanState, rotate, scale]);\r\n\r\n  const [derived, setDerived] = useState<DerivedState>(computeDerived);\r\n\r\n  const syncDerived = useCallback(() => {\r\n    setDerived((prev) => {\r\n      const next = computeDerived();\r\n      if (\r\n        prev.canZoomIn === next.canZoomIn &&\r\n        prev.canZoomOut === next.canZoomOut &&\r\n        prev.isClean === next.isClean &&\r\n        prev.isZoomed === next.isZoomed &&\r\n        prev.rotation === next.rotation\r\n      ) {\r\n        return prev;\r\n      }\r\n      return next;\r\n    });\r\n  }, [computeDerived]);\r\n\r\n  useEffect(() => {\r\n    const unsubscribers = [scale, rotate, flipX, flipY].map((value) =>\r\n      value.on('change', syncDerived),\r\n    );\r\n    syncDerived();\r\n    return () => {\r\n      for (const unsubscribe of unsubscribers) unsubscribe();\r\n    };\r\n  }, [flipX, flipY, rotate, scale, syncDerived]);\r\n\r\n  const getFitRect = useCallback(\r\n    () =>\r\n      computeFit(\r\n        naturalRef.current,\r\n        viewportRef.current,\r\n        normalizeRotation(rotate.get()),\r\n        fillViewportRef.current,\r\n      ),\r\n    [rotate],\r\n  );\r\n\r\n  const applyTransform = useCallback(\r\n    (next: TransformState, fitRect: Rect) => {\r\n      const clamped = clampPan(next, fitRect, viewportRef.current);\r\n      // .jump(), not .set(): a surviving spring on these same values (e.g. a\r\n      // dragEnd clamp-back or wheel snap-back still in flight) would otherwise\r\n      // keep animating toward its own target and silently overwrite this\r\n      // instant write on its next tick — motion's set() never stops an\r\n      // active animation, only jump() does.\r\n      scale.jump(next.scale);\r\n      x.jump(clamped.x);\r\n      y.jump(clamped.y);\r\n    },\r\n    [scale, x, y],\r\n  );\r\n\r\n  // Wheel/pinch stays on the instant applyTransform for 1:1 gesture tracking;\r\n  // stepped inputs (toolbar/keyboard zoom, double-click) animate instead.\r\n  const animateTransform = useCallback(\r\n    (next: TransformState, fitRect: Rect) => {\r\n      const clamped = clampPan(next, fitRect, viewportRef.current);\r\n      animate(scale, next.scale, RESET_TRANSITION);\r\n      animate(x, clamped.x, RESET_TRANSITION);\r\n      animate(y, clamped.y, RESET_TRANSITION);\r\n    },\r\n    [scale, x, y],\r\n  );\r\n\r\n  const zoomBy = useCallback(\r\n    (factor: number) => {\r\n      if (closing()) return;\r\n      const currentScale = scale.get();\r\n      const targetScale = clampScale(currentScale * factor, effectiveMaxScale());\r\n      const fitRect = getFitRect();\r\n      const anchor: Point = { x: viewportRef.current.width / 2, y: viewportRef.current.height / 2 };\r\n      const next = anchoredZoom(\r\n        { scale: currentScale, x: x.get(), y: y.get() },\r\n        targetScale,\r\n        anchor,\r\n        fitRect,\r\n      );\r\n      animateTransform(next, fitRect);\r\n    },\r\n    [animateTransform, closing, effectiveMaxScale, getFitRect, scale, x, y],\r\n  );\r\n\r\n  const zoomIn = useCallback(() => zoomBy(ZOOM_STEP), [zoomBy]);\r\n  const zoomOut = useCallback(() => zoomBy(1 / ZOOM_STEP), [zoomBy]);\r\n\r\n  const handleDoubleClick = useCallback(\r\n    (point: Point) => {\r\n      if (closing()) return;\r\n      const currentScale = scale.get();\r\n      const fitRect = getFitRect();\r\n      const target = doubleClickTarget(\r\n        currentScale,\r\n        naturalRef.current,\r\n        fitRect,\r\n        normalizeRotation(rotate.get()),\r\n      );\r\n      const targetScale = clampScale(target, effectiveMaxScale());\r\n      const next = anchoredZoom(\r\n        { scale: currentScale, x: x.get(), y: y.get() },\r\n        targetScale,\r\n        point,\r\n        fitRect,\r\n      );\r\n      animateTransform(next, fitRect);\r\n    },\r\n    [animateTransform, closing, effectiveMaxScale, getFitRect, rotate, scale, x, y],\r\n  );\r\n\r\n  const toggleActualSize = useCallback(() => {\r\n    if (closing()) return;\r\n    const currentScale = scale.get();\r\n    const fitRect = getFitRect();\r\n    const actual = naturalScale(naturalRef.current, fitRect, normalizeRotation(rotate.get()));\r\n    const atActual = Math.abs(currentScale - actual) < CLEAN_EPSILON;\r\n    const targetScale = clampScale(atActual ? MIN_SCALE : actual, effectiveMaxScale());\r\n    const anchor: Point = { x: viewportRef.current.width / 2, y: viewportRef.current.height / 2 };\r\n    const next = anchoredZoom(\r\n      { scale: currentScale, x: x.get(), y: y.get() },\r\n      targetScale,\r\n      anchor,\r\n      fitRect,\r\n    );\r\n    animateTransform(next, fitRect);\r\n  }, [animateTransform, closing, effectiveMaxScale, getFitRect, rotate, scale, x, y]);\r\n\r\n  const handleWheel = useCallback(\r\n    (event: WheelLikeEvent) => {\r\n      event.preventDefault?.();\r\n      if (closing()) return;\r\n\r\n      if (idleTimerRef.current !== null) clearTimeout(idleTimerRef.current);\r\n      idleTimerRef.current = setTimeout(() => {\r\n        idleTimerRef.current = null;\r\n        closeAccumRef.current = 0;\r\n        disarmedRef.current = false;\r\n      }, WHEEL_IDLE_MS);\r\n\r\n      const delta = normalizeWheelDelta(event.deltaY, event.deltaMode, viewportRef.current.height);\r\n\r\n      const currentScale = scale.get();\r\n      const isPinch = !!(event.ctrlKey || event.metaKey);\r\n      // Zooming in is never gated on the current scale: gating it was what made\r\n      // a plain wheel inert at the zoom floor, which reads as enormous damping.\r\n      // Only scrolling *down* while already at the floor has nowhere left to go,\r\n      // and that is precisely where the dismiss gesture takes over.\r\n      const zoomingIn = delta < 0;\r\n\r\n      if (isPinch || zoomingIn || !isAtFitFloor()) {\r\n        disarmedRef.current = true;\r\n        closeAccumRef.current = 0;\r\n\r\n        const rawTarget = currentScale * wheelZoomFactor(delta);\r\n\r\n        if (rawTarget <= MIN_SCALE) {\r\n          animate(scale, MIN_SCALE, RESET_TRANSITION);\r\n          animate(x, 0, RESET_TRANSITION);\r\n          animate(y, 0, RESET_TRANSITION);\r\n          return;\r\n        }\r\n\r\n        const targetScale = clampScale(rawTarget, effectiveMaxScale());\r\n        const fitRect = getFitRect();\r\n        const anchor: Point = { x: event.clientX, y: event.clientY };\r\n        const next = anchoredZoom(\r\n          { scale: currentScale, x: x.get(), y: y.get() },\r\n          targetScale,\r\n          anchor,\r\n          fitRect,\r\n        );\r\n        applyTransform(next, fitRect);\r\n        return;\r\n      }\r\n\r\n      // Deliberately not isCleanState(): an image that opened at 100% and was\r\n      // scrolled back down to fit has \"changed\" by that measure, yet it is\r\n      // exactly where the dismiss gesture belongs. Only orientation is worth\r\n      // protecting here.\r\n      if (disarmedRef.current || !isOrientationClean()) return;\r\n\r\n      closeAccumRef.current += Math.abs(delta);\r\n      if (closeAccumRef.current >= WHEEL_CLOSE_THRESHOLD) {\r\n        closeAccumRef.current = 0;\r\n        onCloseRequestRef.current?.();\r\n      }\r\n    },\r\n    [\r\n      applyTransform,\r\n      closing,\r\n      effectiveMaxScale,\r\n      getFitRect,\r\n      isAtFitFloor,\r\n      isOrientationClean,\r\n      scale,\r\n      x,\r\n      y,\r\n    ],\r\n  );\r\n\r\n  const rotateBy = useCallback(\r\n    (delta: 90 | -90) => {\r\n      if (closing()) return;\r\n      rotate.jump(normalizeRotation(rotate.get() + delta));\r\n      scale.jump(1);\r\n      x.jump(0);\r\n      y.jump(0);\r\n    },\r\n    [closing, rotate, scale, x, y],\r\n  );\r\n\r\n  const rotateLeft = useCallback(() => rotateBy(-90), [rotateBy]);\r\n  const rotateRight = useCallback(() => rotateBy(90), [rotateBy]);\r\n\r\n  const flipHorizontal = useCallback(() => {\r\n    if (closing()) return;\r\n    flipX.set(!flipX.get());\r\n  }, [closing, flipX]);\r\n\r\n  const flipVertical = useCallback(() => {\r\n    if (closing()) return;\r\n    flipY.set(!flipY.get());\r\n  }, [closing, flipY]);\r\n\r\n  const reset = useCallback(() => {\r\n    if (closing()) return;\r\n    // Back to how the viewer opened, which is not necessarily fit.\r\n    animate(scale, initialScaleRef.current, RESET_TRANSITION);\r\n    animate(x, 0, RESET_TRANSITION);\r\n    animate(y, 0, RESET_TRANSITION);\r\n    animate(rotate, 0, RESET_TRANSITION);\r\n    flipX.set(false);\r\n    flipY.set(false);\r\n  }, [closing, flipX, flipY, rotate, scale, x, y]);\r\n\r\n  const dragBy = useCallback(\r\n    (delta: Point) => {\r\n      // A pointer can still be down when close starts (e.g. pinch to just\r\n      // over 1x — inside isClean's epsilon, so Esc/wheel reads 'close' —\r\n      // while the same gesture is still panning). Gated for consistency\r\n      // with the other entry points even though .set() here can't cancel\r\n      // the close spring outright, only cause a self-correcting flicker.\r\n      if (closing()) return;\r\n      const fitRect = getFitRect();\r\n      const bounds = panBounds({ scale: scale.get(), x: 0, y: 0 }, fitRect, viewportRef.current);\r\n      x.set(rubberBand(x.get() + delta.x, bounds.x.min, bounds.x.max));\r\n      y.set(rubberBand(y.get() + delta.y, bounds.y.min, bounds.y.max));\r\n    },\r\n    [closing, getFitRect, scale, x, y],\r\n  );\r\n\r\n  const dragEnd = useCallback(() => {\r\n    if (closing()) return;\r\n    const fitRect = getFitRect();\r\n    const clamped = clampPan(\r\n      { scale: scale.get(), x: x.get(), y: y.get() },\r\n      fitRect,\r\n      viewportRef.current,\r\n    );\r\n    animate(x, clamped.x, RESET_TRANSITION);\r\n    animate(y, clamped.y, RESET_TRANSITION);\r\n  }, [closing, getFitRect, scale, x, y]);\r\n\r\n  const escIntent = useCallback(\r\n    (): 'reset' | 'close' => (isCleanState() ? 'close' : 'reset'),\r\n    [isCleanState],\r\n  );\r\n\r\n  const setViewport = useCallback(\r\n    (next: Size) => {\r\n      viewportRef.current = next;\r\n      const fitRect = computeFit(\r\n        naturalRef.current,\r\n        next,\r\n        normalizeRotation(rotate.get()),\r\n        fillViewportRef.current,\r\n      );\r\n      const clamped = clampPan({ scale: scale.get(), x: x.get(), y: y.get() }, fitRect, next);\r\n      x.set(clamped.x);\r\n      y.set(clamped.y);\r\n    },\r\n    [rotate, scale, x, y],\r\n  );\r\n\r\n  const setNatural = useCallback(\r\n    (next: Size) => {\r\n      const wasClean = isCleanState();\r\n      naturalRef.current = next;\r\n      const rotation = normalizeRotation(rotate.get());\r\n      initialScaleRef.current = computeInitialScale(rotation);\r\n\r\n      // A dual-source entry opens on the thumbnail's intrinsic size and only\r\n      // learns the hi-res one here, which can move the opening scale (a 400px\r\n      // stand-in is fit-sized; the 2000px original it becomes is not). Re-land\r\n      // only if the user hasn't taken over — and never mid-transition, where\r\n      // .jump() would kill the open FLIP's spring instead of joining it.\r\n      if (wasClean && !closing() && !isTransitioningRef.current?.()) {\r\n        scale.jump(initialScaleRef.current);\r\n      }\r\n\r\n      const fitRect = computeFit(next, viewportRef.current, rotation, fillViewportRef.current);\r\n      const clamped = clampPan(\r\n        { scale: scale.get(), x: x.get(), y: y.get() },\r\n        fitRect,\r\n        viewportRef.current,\r\n      );\r\n      x.set(clamped.x);\r\n      y.set(clamped.y);\r\n    },\r\n    [closing, computeInitialScale, isCleanState, rotate, scale, x, y],\r\n  );\r\n\r\n  return {\r\n    canZoomIn: derived.canZoomIn,\r\n    canZoomOut: derived.canZoomOut,\r\n    dragBy,\r\n    dragEnd,\r\n    escIntent,\r\n    flipHorizontal,\r\n    flipVertical,\r\n    flipX,\r\n    flipY,\r\n    getInitialScale,\r\n    handleDoubleClick,\r\n    handleWheel,\r\n    isClean: derived.isClean,\r\n    isZoomed: derived.isZoomed,\r\n    reset,\r\n    resetCloseTracking,\r\n    rotate,\r\n    rotateLeft,\r\n    rotateRight,\r\n    rotation: derived.rotation,\r\n    scale,\r\n    setNatural,\r\n    setViewport,\r\n    toggleActualSize,\r\n    x,\r\n    y,\r\n    zoomIn,\r\n    zoomOut,\r\n  };\r\n};\r\n\r\nexport type { Point, Rotation, Size, ZoomPolicy } from './geometry';\r\n"],"mappings":"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"}

package/es/ImageSelect/ImageSelect.d.mts

@@ -0,0 +1,6 @@
+import { ImageSelectProps } from "./type.mjs";
+//#region src/ImageSelect/ImageSelect.d.ts
+declare const ImageSelect: import("react").NamedExoticComponent<ImageSelectProps>;
+//#endregion
+export { ImageSelect as default };
+//# sourceMappingURL=ImageSelect.d.mts.map

package/es/ImageSelect/ImageSelect.mjs

@@ -0,0 +1,57 @@
+"use client";
+import FlexBasic_default from "../Flex/FlexBasic.mjs";
+import Icon from "../Icon/Icon.mjs";
+import Img from "../Img/index.mjs";
+import { styles } from "./styles.mjs";
+import { memo } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { cx } from "antd-style";
+import useMergeState from "use-merge-value";
+//#region src/ImageSelect/ImageSelect.tsx
+const ImageSelect = memo(({ ref, className, style, value, defaultValue, onChange, options, width = 144, height = 86, styles: customStyles, classNames, unoptimized, ...rest }) => {
+	const [currentValue, setCurrentValue] = useMergeState(defaultValue, {
+		defaultValue,
+		onChange,
+		value
+	});
+	return /* @__PURE__ */ jsx(FlexBasic_default, {
+		horizontal: true,
+		className,
+		gap: 16,
+		ref,
+		style,
+		...rest,
+		children: options?.map((item) => {
+			const isActive = item.value === currentValue;
+			return /* @__PURE__ */ jsxs(FlexBasic_default, {
+				align: "center",
+				className: cx(styles.container, isActive && styles.active),
+				gap: 4,
+				onClick: () => setCurrentValue(item.value),
+				children: [/* @__PURE__ */ jsx(Img, {
+					alt: item.alt || item.value,
+					className: cx(styles.img, isActive && styles.imgActive, classNames?.img),
+					height,
+					src: item.img,
+					unoptimized,
+					width,
+					style: {
+						...customStyles?.img,
+						height,
+						width
+					}
+				}), /* @__PURE__ */ jsxs(FlexBasic_default, {
+					horizontal: true,
+					align: "center",
+					gap: 4,
+					children: [item.icon && /* @__PURE__ */ jsx(Icon, { icon: item.icon }), item.label]
+				})]
+			}, item.value);
+		})
+	});
+});
+ImageSelect.displayName = "ImageSelect";
+//#endregion
+export { ImageSelect as default };
+
+//# sourceMappingURL=ImageSelect.mjs.map

package/es/ImageSelect/ImageSelect.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"ImageSelect.mjs","names":["useControlledState","Flexbox"],"sources":["../../src/ImageSelect/ImageSelect.tsx"],"sourcesContent":["'use client';\r\n\r\nimport { cx } from 'antd-style';\r\nimport { memo } from 'react';\r\nimport useControlledState from 'use-merge-value';\r\n\r\nimport { Flexbox } from '@/Flex';\r\nimport Icon from '@/Icon';\r\nimport Img from '@/Img';\r\n\r\nimport { styles } from './styles';\r\nimport type { ImageSelectProps } from './type';\r\n\r\nconst ImageSelect = memo<ImageSelectProps>(\r\n  ({\r\n    ref,\r\n    className,\r\n    style,\r\n    value,\r\n    defaultValue,\r\n    onChange,\r\n    options,\r\n    width = 144,\r\n    height = 86,\r\n    styles: customStyles,\r\n    classNames,\r\n    unoptimized,\r\n    ...rest\r\n  }) => {\r\n    const [currentValue, setCurrentValue] = useControlledState<string>(defaultValue, {\r\n      defaultValue,\r\n      onChange,\r\n      value,\r\n    });\r\n\r\n    return (\r\n      <Flexbox horizontal className={className} gap={16} ref={ref} style={style} {...rest}>\r\n        {options?.map((item) => {\r\n          const isActive = item.value === currentValue;\r\n          return (\r\n            <Flexbox\r\n              align={'center'}\r\n              className={cx(styles.container, isActive && styles.active)}\r\n              gap={4}\r\n              key={item.value}\r\n              onClick={() => setCurrentValue(item.value)}\r\n            >\r\n              <Img\r\n                alt={item.alt || item.value}\r\n                className={cx(styles.img, isActive && styles.imgActive, classNames?.img)}\r\n                height={height}\r\n                src={item.img}\r\n                unoptimized={unoptimized}\r\n                width={width}\r\n                style={{\r\n                  ...customStyles?.img,\r\n                  height,\r\n                  width,\r\n                }}\r\n              />\r\n\r\n              <Flexbox horizontal align={'center'} gap={4}>\r\n                {item.icon && <Icon icon={item.icon} />}\r\n                {item.label}\r\n              </Flexbox>\r\n            </Flexbox>\r\n          );\r\n        })}\r\n      </Flexbox>\r\n    );\r\n  },\r\n);\r\n\r\nImageSelect.displayName = 'ImageSelect';\r\n\r\nexport default ImageSelect;\r\n"],"mappings":";;;;;;;;;;AAaA,MAAM,cAAc,MACjB,EACC,KACA,WACA,OACA,OACA,cACA,UACA,SACA,QAAQ,KACR,SAAS,IACT,QAAQ,cACR,YACA,aACA,GAAG,WACC;CACJ,MAAM,CAAC,cAAc,mBAAmBA,cAA2B,cAAc;EAC/E;EACA;EACA;CACF,CAAC;CAED,OACE,oBAACC,mBAAD;EAAS,YAAA;EAAsB;EAAW,KAAK;EAAS;EAAY;EAAO,GAAI;EAC5E,UAAA,SAAS,KAAK,SAAS;GACtB,MAAM,WAAW,KAAK,UAAU;GAChC,OACE,qBAACA,mBAAD;IACE,OAAO;IACP,WAAW,GAAG,OAAO,WAAW,YAAY,OAAO,MAAM;IACzD,KAAK;IAEL,eAAe,gBAAgB,KAAK,KAAK;IAL3C,UAAA,CAOE,oBAAC,KAAD;KACE,KAAK,KAAK,OAAO,KAAK;KACtB,WAAW,GAAG,OAAO,KAAK,YAAY,OAAO,WAAW,YAAY,GAAG;KAC/D;KACR,KAAK,KAAK;KACG;KACN;KACP,OAAO;MACL,GAAG,cAAc;MACjB;MACA;KACF;IACD,CAAA,GAED,qBAACA,mBAAD;KAAS,YAAA;KAAW,OAAO;KAAU,KAAK;KAA1C,UAAA,CACG,KAAK,QAAQ,oBAAC,MAAD,EAAM,MAAM,KAAK,KAAO,CAAA,GACrC,KAAK,KACC;IACF,CAAA,CAAA;GArBF,GAAA,KAAK,KAqBH;EAEb,CAAC;CACM,CAAA;AAEb,CACF;AAEA,YAAY,cAAc"}

package/es/ImageSelect/index.d.mts

@@ -0,0 +1,3 @@
+import { ImageSelectItem, ImageSelectProps } from "./type.mjs";
+import ImageSelect from "./ImageSelect.mjs";
+export { ImageSelectItem, ImageSelectProps, ImageSelect as default };

package/es/ImageSelect/styles.mjs

@@ -0,0 +1,28 @@
+import { staticStylish } from "../styles/theme/customStylishStatic.mjs";
+import { createStaticStyles, cx } from "antd-style";
+//#region src/ImageSelect/styles.ts
+const styles = createStaticStyles(({ css, cssVar }) => {
+	return {
+		active: css`
+      color: ${cssVar.colorText};
+    `,
+		container: css`
+      cursor: pointer;
+      color: ${cssVar.colorTextDescription};
+    `,
+		img: cx(staticStylish.variantFilled, css`
+        border-radius: ${cssVar.borderRadius};
+
+        &:hover {
+          box-shadow: 0 0 0 2px ${cssVar.colorText};
+        }
+      `),
+		imgActive: cx(staticStylish.active, css`
+        box-shadow: 0 0 0 2px ${cssVar.colorTextTertiary};
+      `)
+	};
+});
+//#endregion
+export { styles };
+
+//# sourceMappingURL=styles.mjs.map

package/es/ImageSelect/styles.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"styles.mjs","names":["lobeStaticStylish"],"sources":["../../src/ImageSelect/styles.ts"],"sourcesContent":["import { createStaticStyles, cx } from 'antd-style';\r\n\r\nimport { lobeStaticStylish } from '@/styles';\r\n\r\nexport const styles = createStaticStyles(({ css, cssVar }) => {\r\n  return {\r\n    active: css`\r\n      color: ${cssVar.colorText};\r\n    `,\r\n    container: css`\r\n      cursor: pointer;\r\n      color: ${cssVar.colorTextDescription};\r\n    `,\r\n\r\n    img: cx(\r\n      lobeStaticStylish.variantFilled,\r\n      css`\r\n        border-radius: ${cssVar.borderRadius};\r\n\r\n        &:hover {\r\n          box-shadow: 0 0 0 2px ${cssVar.colorText};\r\n        }\r\n      `,\r\n    ),\r\n    imgActive: cx(\r\n      lobeStaticStylish.active,\r\n      css`\r\n        box-shadow: 0 0 0 2px ${cssVar.colorTextTertiary};\r\n      `,\r\n    ),\r\n  };\r\n});\r\n"],"mappings":";;;AAIA,MAAa,SAAS,oBAAoB,EAAE,KAAK,aAAa;CAC5D,OAAO;EACL,QAAQ,GAAG;eACA,OAAO,UAAU;;EAE5B,WAAW,GAAG;;eAEH,OAAO,qBAAqB;;EAGvC,KAAK,GACHA,cAAkB,eAClB,GAAG;yBACgB,OAAO,aAAa;;;kCAGX,OAAO,UAAU;;OAG/C;EACA,WAAW,GACTA,cAAkB,QAClB,GAAG;gCACuB,OAAO,kBAAkB;OAErD;CACF;AACF,CAAC"}

package/es/ImageSelect/type.d.mts

@@ -0,0 +1,41 @@
+import { FlexboxProps } from "../Flex/type.mjs";
+import "../Flex/index.mjs";
+import { IconProps } from "../Icon/type.mjs";
+import "../Icon/index.mjs";
+import { CSSProperties, ReactNode, Ref } from "react";
+import { SelectProps } from "antd";
+//#region src/ImageSelect/type.d.ts
+interface ImageSelectItem {
+  alt?: string;
+  icon?: IconProps['icon'];
+  img: string;
+  label: ReactNode;
+  value: string;
+}
+interface ImageSelectProps extends FlexboxProps {
+  className?: string;
+  classNames?: {
+    img?: string;
+  };
+  defaultValue?: SelectProps['defaultValue'];
+  /**
+   * @default 86
+   */
+  height?: number;
+  onChange?: (value: this['value']) => void;
+  options?: ImageSelectItem[];
+  ref?: Ref<HTMLDivElement>;
+  style?: CSSProperties;
+  styles?: {
+    img?: CSSProperties;
+  };
+  unoptimized?: boolean;
+  value?: SelectProps['value'];
+  /**
+   * @default 144
+   */
+  width?: number;
+}
+//#endregion
+export { ImageSelectItem, ImageSelectProps };
+//# sourceMappingURL=type.d.mts.map

package/es/Img/index.d.ts

@@ -0,0 +1 @@
+export * from './index.d.mts';

package/es/Img/index.js

@@ -0,0 +1 @@
+export * from './index.mjs';

package/es/Img/index.mjs

@@ -0,0 +1,20 @@
+"use client";
+import { ConfigContext } from "../ConfigProvider/index.mjs";
+import { createElement, memo, use, useMemo } from "react";
+import { jsx } from "react/jsx-runtime";
+//#region src/Img/index.tsx
+const createContainer = (as) => memo((props) => createElement(as, props));
+const Img = ({ unoptimized, ...rest }) => {
+	const config = use(ConfigContext);
+	const render = config?.imgAs || "img";
+	const ImgContainer = useMemo(() => createContainer(render), [render]);
+	return /* @__PURE__ */ jsx(ImgContainer, {
+		unoptimized: unoptimized === void 0 ? config?.imgUnoptimized : unoptimized,
+		...rest
+	});
+};
+Img.displayName = "Img";
+//#endregion
+export { Img as default };
+
+//# sourceMappingURL=index.mjs.map

package/es/Img/index.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.mjs","names":[],"sources":["../../src/Img/index.tsx"],"sourcesContent":["'use client';\r\n\r\nimport { type ImageProps } from 'antd';\r\nimport { createElement, type ElementType, type FC, memo, type Ref, use, useMemo } from 'react';\r\n\r\nimport { ConfigContext } from '@/ConfigProvider';\r\nimport { type ImgProps as HtmlImgeProps } from '@/types';\r\n\r\nconst createContainer = (as: ElementType) => memo((props: any) => createElement(as, props));\r\n\r\ntype ImgProps = HtmlImgeProps & ImageProps & { ref?: Ref<HTMLImageElement>; unoptimized?: boolean };\r\n\r\nconst Img: FC<ImgProps> = ({ unoptimized, ...rest }) => {\r\n  const config = use(ConfigContext);\r\n  const render = config?.imgAs || 'img';\r\n\r\n  const ImgContainer = useMemo(() => createContainer(render), [render]);\r\n\r\n  return (\r\n    <ImgContainer\r\n      unoptimized={unoptimized === undefined ? config?.imgUnoptimized : unoptimized}\r\n      {...rest}\r\n    />\r\n  );\r\n};\r\n\r\nImg.displayName = 'Img';\r\n\r\nexport default Img;\r\n"],"mappings":";;;;;AAQA,MAAM,mBAAmB,OAAoB,MAAM,UAAe,cAAc,IAAI,KAAK,CAAC;AAI1F,MAAM,OAAqB,EAAE,aAAa,GAAG,WAAW;CACtD,MAAM,SAAS,IAAI,aAAa;CAChC,MAAM,SAAS,QAAQ,SAAS;CAEhC,MAAM,eAAe,cAAc,gBAAgB,MAAM,GAAG,CAAC,MAAM,CAAC;CAEpE,OACE,oBAAC,cAAD;EACE,aAAa,gBAAgB,KAAA,IAAY,QAAQ,iBAAiB;EAClE,GAAI;CACL,CAAA;AAEL;AAEA,IAAI,cAAc"}

package/es/Input/Input.d.mts

@@ -0,0 +1,6 @@
+import { InputProps } from "./type.mjs";
+//#region src/Input/Input.d.ts
+declare const Input: import("react").NamedExoticComponent<InputProps>;
+//#endregion
+export { Input as default };
+//# sourceMappingURL=Input.d.mts.map