@_tc/template-core 0.0.1-bate.5 → 0.0.1-bate.50

package/fe/packages/react/ui/components/Form/FormItem.js

@@ -0,0 +1,60 @@
+import { cn } from "../../lib/utils.js";
+import { Label } from "../Label/Label.js";
+import "../Label/index.js";
+import React, { forwardRef } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { Field } from "rc-field-form";
+//#region packages/react/ui/components/Form/FormItem.tsx
+var FormItemFN = forwardRef(({ className, label, labelClassName, required, children, errorClassName, showError = true, name, rules, layout, ...props }, ref) => {
+	return /* @__PURE__ */ jsx(Field, {
+		name,
+		rules,
+		...props,
+		children: (control, meta) => {
+			const { value, onChange, ...restControl } = control;
+			const { errors, warnings } = meta;
+			const hasError = errors.length > 0;
+			const hasWarning = warnings.length > 0;
+			const childNode = typeof children === "function" ? children(value, onChange, meta) : children;
+			const childWithProps = childNode && typeof childNode === "object" && "props" in childNode ? React.cloneElement(childNode, {
+				value,
+				onChange: (val) => {
+					if (typeof val === "string") onChange(val);
+					else if (val?.target?.value !== void 0) onChange(val.target.value);
+					else onChange(val);
+				},
+				...restControl
+			}) : childNode;
+			const content = /* @__PURE__ */ jsx("div", {
+				className: hasError || hasWarning ? "relative" : "",
+				children: childWithProps
+			});
+			return /* @__PURE__ */ jsxs("div", {
+				ref,
+				className: cn("tc-ui-form-item", className),
+				children: [
+					label ? /* @__PURE__ */ jsx(Label, {
+						htmlFor: name,
+						label,
+						layout,
+						required,
+						labelClassName: cn(labelClassName, hasError && "text-destructive"),
+						children: content
+					}) : content,
+					showError && hasError && /* @__PURE__ */ jsx("div", {
+						className: cn("text-sm text-destructive", errorClassName),
+						children: errors[0]
+					}),
+					hasWarning && /* @__PURE__ */ jsx("div", {
+						className: "text-sm text-yellow-600",
+						children: warnings[0]
+					})
+				]
+			});
+		}
+	});
+});
+FormItemFN.displayName = "FormItem";
+var FormItem = FormItemFN;
+//#endregion
+export { FormItem };

package/fe/packages/react/ui/components/Form/SchemaForm/data.d.ts

@@ -0,0 +1,39 @@
+import React from "react";
+import { CheckboxProps } from "../../Checkbox";
+import { type DatePickerProps } from "../../Date";
+import { type InputProps } from "../../Input";
+import { InputNumberProps } from "../../InputNumber";
+import { type SelectProps } from "../../Select";
+import { type SwitchProps } from "../../Switch";
+import { type TextareaProps } from "../../Textarea";
+export type SchemaFormComponentPropsMap = {
+    input: InputProps;
+    inputNumber: InputNumberProps;
+    select: SelectProps;
+    textarea: TextareaProps;
+    switch: SwitchProps;
+    date: DatePickerProps;
+    checkbox: CheckboxProps;
+};
+export type SchemaFormFieldType = keyof SchemaFormComponentPropsMap;
+export declare namespace SchemaFormNamespace {
+    interface FieldTypes {
+    }
+    interface PropsMap {
+    }
+}
+export type ExtendedFieldType = Extract<keyof SchemaFormNamespace.FieldTypes | keyof SchemaFormNamespace.PropsMap, string>;
+export type SchemaFormAllFieldType = SchemaFormFieldType | ExtendedFieldType;
+export type SchemaFormAllPropsMap = SchemaFormComponentPropsMap & SchemaFormNamespace.PropsMap;
+export type SchemaFormComponent = React.ComponentType<any> | React.LazyExoticComponent<React.ComponentType<any>>;
+export declare const componentsMap: Record<SchemaFormAllFieldType, SchemaFormComponent>;
+export type SchemaFormComponentsMap = Partial<Record<ExtendedFieldType, SchemaFormComponent>>;
+export type FieldProps = {
+    [K in SchemaFormAllFieldType]: {
+        type: K;
+        fieldProps?: K extends keyof SchemaFormAllPropsMap ? SchemaFormAllPropsMap[K] : unknown;
+    };
+}[SchemaFormAllFieldType] | {
+    type?: 'input';
+    fieldProps?: InputProps;
+};

package/fe/packages/react/ui/components/Form/SchemaForm/data.js

@@ -0,0 +1,16 @@
+import defaultAlias_default from "../../../../../../bundler/defaultAlias.js";
+import frameComponentsMap from "../../../../../../frontend/extended/SchemaForm/data.js";
+import React from "react";
+var componentsMap = {
+	input: React.lazy(async () => ({ default: (await import("../../Input/index.js")).Input })),
+	inputNumber: React.lazy(async () => ({ default: (await import("../../InputNumber/index.js")).InputNumber })),
+	select: React.lazy(async () => ({ default: (await import("../../Select/index.js")).Select })),
+	textarea: React.lazy(async () => ({ default: (await import("../../Textarea/index.js")).Textarea })),
+	switch: React.lazy(async () => ({ default: (await import("../../Switch/index.js")).Switch })),
+	date: React.lazy(async () => ({ default: (await import("../../Date/index.js")).DatePicker })),
+	checkbox: React.lazy(async () => ({ default: (await import("../../Checkbox/index.js")).Checkbox })),
+	...frameComponentsMap,
+	...defaultAlias_default
+};
+//#endregion
+export { componentsMap };

package/fe/packages/react/ui/components/Form/SchemaForm/defaultComponentsMap.d.ts

@@ -0,0 +1,3 @@
+export {};
+declare const _default: {};
+export default _default;

package/fe/packages/react/ui/components/Form/SchemaForm/defaultComponentsMap.js

@@ -0,0 +1,4 @@
+//#region packages/react/ui/components/Form/SchemaForm/defaultComponentsMap.ts
+var defaultComponentsMap_default = {};
+//#endregion
+export { defaultComponentsMap_default as default };

package/fe/packages/react/ui/components/Form/SchemaForm/index.d.ts

@@ -0,0 +1,59 @@
+import type { MOmit } from "../../../types/index";
+import { type FormInstance } from "rc-field-form";
+import type { Rule } from "rc-field-form/es/interface";
+import { type ReactNode } from "react";
+import { type FormProps } from "..";
+import { type ButtonElementProps } from "../../Button";
+import type { LabelLayout } from "../../Label";
+import { type FieldProps, type SchemaFormAllFieldType } from "./data";
+export type { FieldProps, SchemaFormAllFieldType, SchemaFormAllPropsMap, SchemaFormComponent, SchemaFormComponentsMap, SchemaFormComponentPropsMap, SchemaFormFieldType, SchemaFormNamespace, } from "./data";
+export type FormFieldType = SchemaFormAllFieldType;
+type BaseField<T> = {
+    [K in keyof T]: {
+        key: K | number | (K | number)[];
+        label?: ReactNode;
+        rules?: Rule[];
+        required?: boolean;
+        className?: string;
+        labelClassName?: string;
+        errorClassName?: string;
+        showError?: boolean;
+        render?: (value: T[K], onChange: (value: T[K]) => void, meta: {
+            errors: string[];
+            warnings: string[];
+        }) => ReactNode;
+        layout?: Required<LabelLayout>['layout'];
+        affterNode?: ReactNode;
+    };
+}[keyof T];
+type GroupField<T> = {
+    type: 'group';
+    childrens: FormFieldSchema<T>[];
+    fieldProps: React.HTMLAttributes<HTMLDivElement>;
+} & BaseField<T>;
+type NotGroupField<T> = FieldProps & BaseField<T>;
+export type FormFieldSchema<T> = GroupField<T> | NotGroupField<T>;
+export interface SchemaFormProps<T = object> extends MOmit<FormProps<T>, 'initialValues' | 'children' | 'preserve'> {
+    form?: FormInstance<T>;
+    getForm?: (formInstance: FormInstance<T>) => void;
+    schemas: FormFieldSchema<T>[];
+    className?: string;
+    onFinish?: (values: T) => void;
+    onFinishFailed?: (errorInfo: any) => void;
+    initialValues?: T;
+    layout?: Required<LabelLayout>['layout'];
+    fieldLayout?: Required<LabelLayout>['layout'];
+    footerButtons?: boolean | ReactNode;
+    submitText?: ReactNode;
+    cancelText?: ReactNode;
+    onCancel?: () => void;
+    buttonClassName?: string;
+    submitButtonProps?: Omit<ButtonElementProps, 'type' | 'onClick' | 'children'>;
+    cancelButtonProps?: Omit<ButtonElementProps, 'onClick' | 'children'>;
+    preserve?: boolean;
+}
+export declare const SchemaForm: {
+    <T extends object>({ form, getForm, schemas, className, onFinish, onFinishFailed, initialValues, footerButtons, submitText, cancelText, onCancel, buttonClassName, submitButtonProps, layout, fieldLayout, cancelButtonProps, ...formProps }: SchemaFormProps<T>): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
+};
+export default SchemaForm;

package/fe/packages/react/ui/components/Form/SchemaForm/index.js

@@ -0,0 +1,119 @@
+import { useI18n } from "../../../i18n/useI18n.js";
+import "../../../i18n/index.js";
+import { cn } from "../../../lib/utils.js";
+import { Button } from "../../Button/Button.js";
+import "../../Button/index.js";
+import { Skeleton } from "../../Skeleton/Skeleton.js";
+import "../../Skeleton/index.js";
+import { Form } from "../Form.js";
+import { FormItem } from "../FormItem.js";
+import { useForm } from "../useForm.js";
+import { componentsMap } from "./data.js";
+import "../index.js";
+import { Suspense, useEffect, useMemo, useRef } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region packages/react/ui/components/Form/SchemaForm/index.tsx
+var renderField = (schema) => {
+	return (value, onChange, meta) => {
+		if (schema.render) return schema.render(value, onChange, meta);
+		const { type = "input" } = schema;
+		const Component = componentsMap[type];
+		const { fieldProps } = schema;
+		if (!Component) {
+			console.error(" SchemaForm/FormIrem/renderField 非法的 组件类型");
+			return value;
+		}
+		return /* @__PURE__ */ jsxs(Suspense, {
+			fallback: /* @__PURE__ */ jsx(Skeleton, {
+				mode: "componentsloading",
+				rows: 2
+			}),
+			children: [/* @__PURE__ */ jsx(Component, {
+				value,
+				onChange,
+				...fieldProps
+			}), schema.affterNode]
+		});
+	};
+};
+var SchemaForm = ({ form, getForm, schemas, className, onFinish, onFinishFailed, initialValues, footerButtons = true, submitText, cancelText, onCancel, buttonClassName, submitButtonProps, layout = "vertical", fieldLayout = "vertical", cancelButtonProps, ...formProps }) => {
+	const t = useI18n();
+	const [f] = useForm();
+	const getFormRef = useRef(getForm);
+	getFormRef.current = getForm;
+	const usedForm = useMemo(() => form ?? f, [f, form]);
+	useEffect(() => {
+		getFormRef.current?.(usedForm);
+	}, [usedForm]);
+	const handleCancel = () => {
+		if (onCancel) onCancel();
+		else usedForm?.resetFields();
+	};
+	const { formClassName, fieldClassName, isHorizontal } = useMemo(() => {
+		return {
+			formClassName: cn(layout === "horizontal" ? "flex gap-4 items-start flex-wrap" : ""),
+			fieldClassName: cn("min-w-[255px]", layout === "horizontal" ? "" : "mb-5"),
+			isHorizontal: layout === "horizontal"
+		};
+	}, [layout]);
+	const renderSchemas = (schemas) => {
+		return schemas.map((schema, index) => {
+			const { type = "input" } = schema;
+			if (type !== "group") {
+				const { key: fieldKey, label, rules, required, className: itemClassName, labelClassName, errorClassName, showError, layout: schemaFieldLayout } = schema;
+				const fLayout = schemaFieldLayout ?? fieldLayout;
+				const fRequired = required ?? rules?.some((r) => {
+					return (typeof r === "function" ? r(usedForm) : r).required;
+				});
+				const fiKey = Array.isArray(fieldKey) ? `field-${index}-${fieldKey.join("_")}` : fieldKey;
+				return /* @__PURE__ */ jsx(FormItem, {
+					name: fieldKey,
+					label,
+					rules,
+					layout: fLayout,
+					required: fRequired,
+					className: cn(fieldClassName, itemClassName),
+					labelClassName,
+					errorClassName,
+					showError,
+					children: renderField(schema)
+				}, fiKey);
+			} else if (type === "group") {
+				const s = schema;
+				const { key: fieldKey } = s;
+				const fiKey = Array.isArray(fieldKey) ? `field-group-${index}-${fieldKey.join("_")}` : fieldKey;
+				return /* @__PURE__ */ jsx("div", {
+					className: "field-group-container",
+					...s.fieldProps,
+					children: renderSchemas(s.childrens)
+				}, fiKey);
+			}
+			return null;
+		});
+	};
+	return /* @__PURE__ */ jsxs(Form, {
+		form: usedForm,
+		onFinish,
+		onFinishFailed,
+		initialValues,
+		className: cn("tc-ui-schema-form", formClassName, className),
+		...formProps,
+		children: [renderSchemas(schemas), footerButtons && !isHorizontal ? typeof footerButtons === "boolean" ? /* @__PURE__ */ jsxs("div", {
+			className: cn("flex items-center gap-4", buttonClassName),
+			children: [/* @__PURE__ */ jsx(Button, {
+				type: "button",
+				onClick: handleCancel,
+				...cancelButtonProps,
+				children: cancelText ?? t("components.form.cancel")
+			}), /* @__PURE__ */ jsx(Button, {
+				type: "submit",
+				variant: "primary",
+				...submitButtonProps,
+				children: submitText ?? t("components.form.submit")
+			})]
+		}) : footerButtons : void 0]
+	});
+};
+SchemaForm.displayName = "SchemaForm";
+//#endregion
+export { SchemaForm, SchemaForm as default };

package/fe/packages/react/ui/components/Form/index.d.ts

@@ -0,0 +1,4 @@
+export * from "./Form";
+export * from "./FormItem";
+export * from "./useForm";
+export * from "./SchemaForm";

package/fe/packages/react/ui/components/Form/index.js

@@ -0,0 +1,5 @@
+import { Form } from "./Form.js";
+import { FormItem } from "./FormItem.js";
+import { useForm } from "./useForm.js";
+import { SchemaForm } from "./SchemaForm/index.js";
+export { Form, FormItem, SchemaForm, useForm };

package/fe/packages/react/ui/components/Form/useForm.d.ts

@@ -0,0 +1,2 @@
+export { useForm } from "rc-field-form";
+export type { FormInstance } from "rc-field-form";

package/fe/packages/react/ui/components/Form/useForm.js

@@ -0,0 +1,2 @@
+import { useForm } from "rc-field-form";
+export { useForm };

package/fe/packages/react/ui/components/ImagePreview/ImagePreview.d.ts

@@ -0,0 +1,7 @@
+export type ImagePreviewControllerProps = {
+    open: boolean;
+    images: string[];
+    initialIndex?: number;
+    onClose: () => void;
+};
+export declare function ImagePreviewController({ open, images, initialIndex, onClose }: ImagePreviewControllerProps): import("react/jsx-runtime").JSX.Element | null;

package/fe/packages/react/ui/components/ImagePreview/ImagePreview.js

@@ -0,0 +1,307 @@
+import { useI18n } from "../../i18n/useI18n.js";
+import "../../i18n/index.js";
+import { Button } from "../Button/Button.js";
+import "../Button/index.js";
+import { useCallback, useEffect, useMemo, useRef, useState } from "react";
+import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
+import { ArrowLeft, ArrowRight, FlipHorizontal, FlipVertical, RefreshCw, RotateCcw, RotateCw, X, ZoomIn, ZoomOut } from "lucide-react";
+import { createPortal } from "react-dom";
+//#region packages/react/ui/components/ImagePreview/ImagePreview.tsx
+var clamp = (value, min, max) => Math.min(max, Math.max(min, value));
+function PreviewCore({ images, initialIndex, onClose }) {
+	const t = useI18n();
+	const [index, setIndex] = useState(initialIndex);
+	const [scale, _setScale] = useState(1);
+	const scaleRef = useRef(scale);
+	const [rotation, setRotation] = useState(0);
+	const [flipX, setFlipX] = useState(false);
+	const [flipY, setFlipY] = useState(false);
+	const imgRef = useRef(null);
+	const lastScaleBeforeNatural = useRef(null);
+	const [position, setPosition] = useState({
+		x: 0,
+		y: 0
+	});
+	const [isDragging, setIsDragging] = useState(false);
+	const dragStart = useRef({
+		x: 0,
+		y: 0
+	});
+	const positionRef = useRef({
+		x: 0,
+		y: 0
+	});
+	const setScale = useCallback((newValue) => {
+		let newState = newValue;
+		if (typeof newValue === "function") newState = newValue(scaleRef.current || 1);
+		scaleRef.current = newState;
+		_setScale(newState);
+	}, []);
+	const hasImages = images.length > 0;
+	const currentIndex = useMemo(() => clamp(index, 0, Math.max(images.length - 1, 0)), [index, images.length]);
+	const currentImage = hasImages ? images[currentIndex] : "";
+	const reset = useCallback(() => {
+		setScale(1);
+		setRotation(0);
+		setFlipX(false);
+		setFlipY(false);
+		setPosition({
+			x: 0,
+			y: 0
+		});
+		positionRef.current = {
+			x: 0,
+			y: 0
+		};
+		lastScaleBeforeNatural.current = null;
+	}, [setScale]);
+	const handleMouseDown = useCallback((e) => {
+		setIsDragging(true);
+		dragStart.current = {
+			x: e.clientX - positionRef.current.x,
+			y: e.clientY - positionRef.current.y
+		};
+	}, []);
+	const handleMouseMove = useCallback((e) => {
+		if (!isDragging) return;
+		const newX = e.clientX - dragStart.current.x;
+		const newY = e.clientY - dragStart.current.y;
+		positionRef.current = {
+			x: newX,
+			y: newY
+		};
+		setPosition({
+			x: newX,
+			y: newY
+		});
+	}, [isDragging]);
+	const handleMouseUp = useCallback(() => {
+		setIsDragging(false);
+	}, []);
+	const toPrev = () => {
+		if (!hasImages) return;
+		setIndex((prev) => (prev - 1 + images.length) % images.length);
+		reset();
+	};
+	const toNext = () => {
+		if (!hasImages) return;
+		setIndex((prev) => (prev + 1) % images.length);
+		reset();
+	};
+	const zoomIn = () => setScale((prev) => clamp(prev + .2, .2, 5));
+	const zoomOut = () => setScale((prev) => clamp(prev - .2, .2, 5));
+	const rotateLeft = () => setRotation((prev) => prev - 90);
+	const rotateRight = () => setRotation((prev) => prev + 90);
+	useEffect(() => {
+		const handleKey = (e) => {
+			if (e.key === "Escape") {
+				onClose();
+				return;
+			}
+			if (e.key === "ArrowLeft") {
+				if (!hasImages) return;
+				setIndex((prev) => (prev - 1 + images.length) % images.length);
+				reset();
+				return;
+			}
+			if (e.key === "ArrowRight") {
+				if (!hasImages) return;
+				setIndex((prev) => (prev + 1) % images.length);
+				reset();
+			}
+		};
+		document.addEventListener("keydown", handleKey);
+		return () => document.removeEventListener("keydown", handleKey);
+	}, [
+		onClose,
+		hasImages,
+		images.length,
+		reset
+	]);
+	useEffect(() => {
+		if (!imgRef.current) return;
+		const transform = `translate(calc(-50% + ${position.x}px), calc(-50% + ${position.y}px)) rotate(${rotation}deg) scale(${flipX ? -scale : scale}, ${flipY ? -scale : scale})`;
+		imgRef.current.style.transform = transform;
+	}, [
+		rotation,
+		scale,
+		flipX,
+		flipY,
+		position
+	]);
+	if (!hasImages) return null;
+	const floatingIconButtonClassName = "z-10 rounded-full border border-border/60 bg-popover text-popover-foreground shadow-[var(--shadow-floating)] transition-colors duration-200 hover:bg-muted/80 active:bg-muted focus-visible:ring-theme/30";
+	const toolbarButtonClassName = "flex items-center gap-2 rounded-md px-3 py-2 text-sm text-popover-foreground transition-colors duration-200 hover:bg-foreground/8 active:bg-foreground/12 focus-visible:ring-theme/30";
+	return createPortal(/* @__PURE__ */ jsxs("div", {
+		className: "tc-ui-image-preview fixed inset-0 z-[1100] bg-background/80 text-foreground",
+		onClick: onClose,
+		children: [
+			/* @__PURE__ */ jsx(Button, {
+				variant: "text",
+				type: "button",
+				onClick: onClose,
+				className: `absolute right-6 top-6 p-2 ${floatingIconButtonClassName}`,
+				"aria-label": t("components.imagePreview.closePreview"),
+				children: /* @__PURE__ */ jsx(X, { size: 20 })
+			}),
+			images.length > 1 && /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsx(Button, {
+				variant: "text",
+				type: "button",
+				onClick: (e) => {
+					e.stopPropagation();
+					toPrev();
+				},
+				className: `absolute left-4 top-1/2 -translate-y-1/2 p-3 ${floatingIconButtonClassName}`,
+				"aria-label": t("components.imagePreview.previousImage"),
+				children: /* @__PURE__ */ jsx(ArrowLeft, { size: 20 })
+			}), /* @__PURE__ */ jsx(Button, {
+				variant: "text",
+				type: "button",
+				onClick: (e) => {
+					e.stopPropagation();
+					toNext();
+				},
+				className: `absolute right-4 top-1/2 -translate-y-1/2 p-3 ${floatingIconButtonClassName}`,
+				"aria-label": t("components.imagePreview.nextImage"),
+				children: /* @__PURE__ */ jsx(ArrowRight, { size: 20 })
+			})] }),
+			/* @__PURE__ */ jsx("div", {
+				className: "absolute inset-0 flex items-center justify-center overflow-hidden",
+				onClick: (e) => e.stopPropagation(),
+				onWheel: (e) => {
+					e.preventDefault();
+					if (e.deltaY < 0) zoomIn();
+					else zoomOut();
+				},
+				onMouseDown: handleMouseDown,
+				onMouseMove: handleMouseMove,
+				onMouseUp: handleMouseUp,
+				onMouseLeave: handleMouseUp,
+				style: { cursor: isDragging ? "grabbing" : scale > 1 ? "grab" : "default" },
+				children: /* @__PURE__ */ jsx("div", {
+					className: "relative max-h-[85vh] max-w-[90vw]",
+					children: /* @__PURE__ */ jsx("img", {
+						ref: imgRef,
+						src: currentImage,
+						alt: "",
+						draggable: false,
+						className: " select-none max-h-[85vh] max-w-[90vw] absolute left-1/2 top-1/2 origin-center"
+					})
+				})
+			}),
+			/* @__PURE__ */ jsxs("div", {
+				className: "absolute bottom-6 left-1/2 flex -translate-x-1/2 items-center gap-2 rounded-xl border border-border/60 bg-popover px-3 py-2 text-popover-foreground shadow-[var(--shadow-floating)]",
+				children: [
+					/* @__PURE__ */ jsx(Button, {
+						variant: "text",
+						type: "button",
+						onClick: (e) => {
+							e.stopPropagation();
+							zoomOut();
+						},
+						className: toolbarButtonClassName,
+						"aria-label": t("components.imagePreview.zoomOut"),
+						children: /* @__PURE__ */ jsx(ZoomOut, { size: 16 })
+					}),
+					/* @__PURE__ */ jsx(Button, {
+						variant: "text",
+						type: "button",
+						onClick: (e) => {
+							e.stopPropagation();
+							zoomIn();
+						},
+						className: toolbarButtonClassName,
+						"aria-label": t("components.imagePreview.zoomIn"),
+						children: /* @__PURE__ */ jsx(ZoomIn, { size: 16 })
+					}),
+					/* @__PURE__ */ jsx(Button, {
+						variant: "text",
+						type: "button",
+						onClick: (e) => {
+							e.stopPropagation();
+							if (!imgRef.current) return;
+							const { naturalWidth, naturalHeight, clientWidth, clientHeight } = imgRef.current;
+							if (lastScaleBeforeNatural.current === null) {
+								const scaleToNatural = Math.max(naturalWidth / Math.max(clientWidth, 1), naturalHeight / Math.max(clientHeight, 1), 1);
+								lastScaleBeforeNatural.current = scaleRef.current;
+								setScale(scaleToNatural);
+							} else {
+								setScale(lastScaleBeforeNatural.current);
+								lastScaleBeforeNatural.current = null;
+							}
+						},
+						className: toolbarButtonClassName,
+						"aria-label": "1:1",
+						children: "1:1"
+					}),
+					/* @__PURE__ */ jsx(Button, {
+						variant: "text",
+						type: "button",
+						onClick: (e) => {
+							e.stopPropagation();
+							reset();
+						},
+						className: toolbarButtonClassName,
+						"aria-label": t("components.imagePreview.reset"),
+						children: /* @__PURE__ */ jsx(RefreshCw, { size: 16 })
+					}),
+					/* @__PURE__ */ jsx(Button, {
+						variant: "text",
+						type: "button",
+						onClick: (e) => {
+							e.stopPropagation();
+							rotateLeft();
+						},
+						className: toolbarButtonClassName,
+						"aria-label": t("components.imagePreview.rotateLeft"),
+						children: /* @__PURE__ */ jsx(RotateCcw, { size: 16 })
+					}),
+					/* @__PURE__ */ jsx(Button, {
+						variant: "text",
+						type: "button",
+						onClick: (e) => {
+							e.stopPropagation();
+							rotateRight();
+						},
+						className: toolbarButtonClassName,
+						"aria-label": t("components.imagePreview.rotateRight"),
+						children: /* @__PURE__ */ jsx(RotateCw, { size: 16 })
+					}),
+					/* @__PURE__ */ jsx(Button, {
+						variant: "text",
+						type: "button",
+						onClick: (e) => {
+							e.stopPropagation();
+							setFlipX((prev) => !prev);
+						},
+						className: toolbarButtonClassName,
+						"aria-label": t("components.imagePreview.flipHorizontal"),
+						children: /* @__PURE__ */ jsx(FlipHorizontal, { size: 16 })
+					}),
+					/* @__PURE__ */ jsx(Button, {
+						variant: "text",
+						type: "button",
+						onClick: (e) => {
+							e.stopPropagation();
+							setFlipY((prev) => !prev);
+						},
+						className: toolbarButtonClassName,
+						"aria-label": t("components.imagePreview.flipVertical"),
+						children: /* @__PURE__ */ jsx(FlipVertical, { size: 16 })
+					})
+				]
+			})
+		]
+	}), document.body);
+}
+function ImagePreviewController({ open, images, initialIndex = 0, onClose }) {
+	if (!open || images.length === 0) return null;
+	const key = `${images.join("|")}-${initialIndex}`;
+	return /* @__PURE__ */ jsx(PreviewCore, {
+		images,
+		initialIndex,
+		onClose
+	}, key);
+}
+//#endregion
+export { ImagePreviewController };

package/fe/packages/react/ui/components/ImagePreview/PreviewImage.d.ts

@@ -0,0 +1,7 @@
+import type { MOmit } from "../../types/index";
+import { type ImagePreviewControllerProps } from "./ImagePreview";
+export type PreviewImageProps = MOmit<ImagePreviewControllerProps, 'open' | 'onClose'> & Pick<Partial<ImagePreviewControllerProps>, 'onClose'> & {
+    thumbSize?: number | string;
+    direction?: 'horizontal' | 'vertical';
+};
+export declare function PreviewImage(props: PreviewImageProps): import("react/jsx-runtime").JSX.Element | null;