@_tc/template-core 0.1.16 → 0.2.0-bate.1

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

@@ -1,61 +1,28 @@
-import type { MOmit } from '../../../types';
-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';
+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[];
-        /**
-         * 是否必填（仅用于显示，实际验证通过 rules 配置）
-         */
         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;
-        /**
-         * field label 布局方向
-         */
         layout?: Required<LabelLayout>['layout'];
-        /**
-         * 插入到控件后边
-         */
         affterNode?: ReactNode;
     };
 }[keyof T];
@@ -67,82 +34,22 @@ type GroupField<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>;
-    /**
-     * 获取当前使用的form实例  只有挂载后会调用一次
-     */
     getForm?: (formInstance: FormInstance<T>) => void;
-    /**
-     * 表单配置方案
-     */
     schemas: FormFieldSchema<T>[];
-    /**
-     * 表单类名
-     */
     className?: string;
-    /**
-     * 提交回调
-     */
     onFinish?: (values: T) => void;
-    /**
-     * 提交失败回调
-     */
     onFinishFailed?: (errorInfo: any) => void;
-    /**
-     * 初始值
-     */
     initialValues?: T;
-    /**
-     * form 布局方向
-     *
-     * tips: horizontal 需自行实现提交按钮
-     */
     layout?: Required<LabelLayout>['layout'];
-    /**
-     * 统一配置 field layout
-     */
     fieldLayout?: Required<LabelLayout>['layout'];
-    /**
-     * - 是否显示提交和取消按钮
-     * - 或自定义按钮
-     * - tips button type submit 可直接触发提交
-     * @default true
-     */
     footerButtons?: boolean | ReactNode;
-    /**
-     * 提交按钮文本
-     * @default '提交'
-     */
     submitText?: ReactNode;
-    /**
-     * 取消按钮文本
-     * @default '取消'
-     */
     cancelText?: ReactNode;
-    /**
-     * 取消按钮回调
-     */
     onCancel?: () => void;
-    /**
-     * 按钮容器类名
-     */
     buttonClassName?: string;
-    /**
-     * 提交按钮属性
-     */
     submitButtonProps?: Omit<ButtonElementProps, 'type' | 'onClick' | 'children'>;
-    /**
-     * 取消按钮属性
-     */
     cancelButtonProps?: Omit<ButtonElementProps, 'onClick' | 'children'>;
-    /**
-     * 移除字段时保留值
-     *
-     * @default false
-     */
     preserve?: boolean;
 }
 export declare const SchemaForm: {
@@ -150,4 +57,3 @@ export declare const SchemaForm: {
     displayName: string;
 };
 export default SchemaForm;
-//# sourceMappingURL=index.d.ts.map

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/{ui/react → react/ui}/components/ImagePreview/ImagePreview.d.ts

@@ -5,4 +5,3 @@ export type ImagePreviewControllerProps = {
     onClose: () => void;
 };
 export declare function ImagePreviewController({ open, images, initialIndex, onClose }: ImagePreviewControllerProps): import("react/jsx-runtime").JSX.Element | null;
-//# sourceMappingURL=ImagePreview.d.ts.map

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/{ui/react → react/ui}/components/ImagePreview/PreviewImage.d.ts

@@ -1,11 +1,7 @@
-import type { MOmit } from '../../types';
-import { type ImagePreviewControllerProps } from './ImagePreview';
+import type { MOmit } from "../../types/index";
+import { type ImagePreviewControllerProps } from "./ImagePreview";
 export type PreviewImageProps = MOmit<ImagePreviewControllerProps, 'open' | 'onClose'> & Pick<Partial<ImagePreviewControllerProps>, 'onClose'> & {
-    /**
-     * 缩略图边长，默认 80px
-     */
     thumbSize?: number | string;
     direction?: 'horizontal' | 'vertical';
 };
 export declare function PreviewImage(props: PreviewImageProps): import("react/jsx-runtime").JSX.Element | null;
-//# sourceMappingURL=PreviewImage.d.ts.map

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

@@ -0,0 +1,56 @@
+import { useI18n } from "../../i18n/useI18n.js";
+import "../../i18n/index.js";
+import { Button } from "../Button/Button.js";
+import "../Button/index.js";
+import { ImagePreviewController } from "./ImagePreview.js";
+import { useMemo, useState } from "react";
+import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
+//#region packages/react/ui/components/ImagePreview/PreviewImage.tsx
+function PreviewImage(props) {
+	const t = useI18n();
+	const { onClose, images, thumbSize = 80, direction = "horizontal", ...ext } = props;
+	const [open, setOpen] = useState(false);
+	const [currentIndex, setCurrentIndex] = useState(ext.initialIndex ?? 0);
+	const sizeClass = useMemo(() => {
+		const value = typeof thumbSize === "number" ? `${thumbSize}px` : thumbSize;
+		return `w-[${value}] h-[${value}]`;
+	}, [thumbSize]);
+	const sizeStyle = useMemo(() => {
+		const value = typeof thumbSize === "number" ? `${thumbSize}px` : thumbSize;
+		return {
+			width: value,
+			height: value
+		};
+	}, [thumbSize]);
+	if (!images?.length) return null;
+	return /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsx("div", {
+		className: `flex gap-2 ${direction === "vertical" ? "flex-col" : ""}`,
+		children: images.map((src, idx) => /* @__PURE__ */ jsx(Button, {
+			variant: "text",
+			type: "button",
+			className: `relative aspect-square overflow-hidden rounded-lg border border-border/60 bg-card shadow-[inset_0_1px_0_hsl(var(--foreground)/0.04)] transition-colors duration-200 hover:border-border/80 active:border-theme/60 focus-visible:ring-theme/30 ${sizeClass}`,
+			style: sizeStyle,
+			onClick: () => {
+				setCurrentIndex(idx);
+				setOpen(true);
+			},
+			"aria-label": t("components.imagePreview.previewImage", { index: idx + 1 }),
+			children: /* @__PURE__ */ jsx("img", {
+				src,
+				alt: "",
+				className: "h-full w-full object-cover"
+			})
+		}, src + idx))
+	}), /* @__PURE__ */ jsx(ImagePreviewController, {
+		...ext,
+		images,
+		initialIndex: currentIndex,
+		open,
+		onClose: () => {
+			setOpen(false);
+			onClose?.();
+		}
+	})] });
+}
+//#endregion
+export { PreviewImage };

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

@@ -0,0 +1,2 @@
+export * from "./ImagePreview";
+export * from "./PreviewImage";