@questpie/admin 2.0.0 → 3.0.1

package/dist/client/components/primitives/dropzone.mjs

@@ -1,6 +1,8 @@
+import { useTranslation } from "../../i18n/hooks.mjs";
 import { cn } from "../../lib/utils.mjs";
+import { c } from "react/compiler-runtime";
 import { Icon } from "@iconify/react";
-import * as React$1 from "react";
+import * as React from "react";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 
 //#region src/client/components/primitives/dropzone.tsx
@@ -44,196 +46,323 @@ function formatFileSize(bytes) {
 	if (bytes < 1024 * 1024) return `${(bytes / 1024).toFixed(1)} KB`;
 	return `${(bytes / (1024 * 1024)).toFixed(1)} MB`;
 }
-function Dropzone({ onDrop, accept, maxSize, multiple = false, disabled = false, loading = false, progress, label = "Drop files here or click to browse", hint, error, className, children, onValidationError }) {
-	const [isDragging, setIsDragging] = React$1.useState(false);
-	const inputRef = React$1.useRef(null);
-	const dragCounterRef = React$1.useRef(0);
-	/**
-	* Validate files and return valid ones + errors
-	*/
-	const validateFiles = React$1.useCallback((files) => {
-		const valid = [];
-		const errors = [];
-		for (const file of files) {
-			if (!matchesAccept(file, accept)) {
-				errors.push({
-					file,
-					type: "type",
-					message: `"${file.name}" is not an accepted file type`
-				});
-				continue;
-			}
-			if (maxSize && file.size > maxSize) {
-				errors.push({
-					file,
-					type: "size",
-					message: `"${file.name}" exceeds maximum size of ${formatFileSize(maxSize)}`
-				});
-				continue;
+function Dropzone(t0) {
+	const $ = c(66);
+	const { onDrop, accept, maxSize, multiple: t1, disabled: t2, loading: t3, progress, label, hint, error, className, children, onValidationError } = t0;
+	const multiple = t1 === void 0 ? false : t1;
+	const disabled = t2 === void 0 ? false : t2;
+	const loading = t3 === void 0 ? false : t3;
+	const { t } = useTranslation();
+	const [isDragging, setIsDragging] = React.useState(false);
+	const inputRef = React.useRef(null);
+	const dragCounterRef = React.useRef(0);
+	let t4;
+	if ($[0] !== accept || $[1] !== maxSize || $[2] !== t) {
+		t4 = (files) => {
+			const valid = [];
+			const errors = [];
+			for (const file of files) {
+				if (!matchesAccept(file, accept)) {
+					errors.push({
+						file,
+						type: "type",
+						message: t("dropzone.invalidType", { name: file.name })
+					});
+					continue;
+				}
+				if (maxSize && file.size > maxSize) {
+					errors.push({
+						file,
+						type: "size",
+						message: t("dropzone.tooLarge", {
+							name: file.name,
+							maxSize: formatFileSize(maxSize)
+						})
+					});
+					continue;
+				}
+				valid.push(file);
 			}
-			valid.push(file);
-		}
-		return {
-			valid,
-			errors
+			return {
+				valid,
+				errors
+			};
+		};
+		$[0] = accept;
+		$[1] = maxSize;
+		$[2] = t;
+		$[3] = t4;
+	} else t4 = $[3];
+	const validateFiles = t4;
+	let t5;
+	if ($[4] !== disabled || $[5] !== loading || $[6] !== multiple || $[7] !== onDrop || $[8] !== onValidationError || $[9] !== validateFiles) {
+		t5 = (files_0) => {
+			if (disabled || loading) return;
+			const fileArray = Array.from(files_0);
+			const { valid: valid_0, errors: errors_0 } = validateFiles(multiple ? fileArray : fileArray.slice(0, 1));
+			if (errors_0.length > 0) onValidationError?.(errors_0);
+			if (valid_0.length > 0) onDrop(valid_0);
+		};
+		$[4] = disabled;
+		$[5] = loading;
+		$[6] = multiple;
+		$[7] = onDrop;
+		$[8] = onValidationError;
+		$[9] = validateFiles;
+		$[10] = t5;
+	} else t5 = $[10];
+	const handleFiles = t5;
+	let t6;
+	if ($[11] !== disabled || $[12] !== loading) {
+		t6 = (e) => {
+			e.preventDefault();
+			e.stopPropagation();
+			dragCounterRef.current = dragCounterRef.current + 1;
+			if (e.dataTransfer.items.length > 0 && !disabled && !loading) setIsDragging(true);
 		};
-	}, [accept, maxSize]);
-	/**
-	* Handle file selection
-	*/
-	const handleFiles = React$1.useCallback((files) => {
-		if (disabled || loading) return;
-		const fileArray = Array.from(files);
-		const { valid, errors } = validateFiles(multiple ? fileArray : fileArray.slice(0, 1));
-		if (errors.length > 0) onValidationError?.(errors);
-		if (valid.length > 0) onDrop(valid);
-	}, [
-		disabled,
-		loading,
-		multiple,
-		validateFiles,
-		onDrop,
-		onValidationError
-	]);
-	/**
-	* Handle drag events
-	*/
-	const handleDragEnter = React$1.useCallback((e) => {
-		e.preventDefault();
-		e.stopPropagation();
-		dragCounterRef.current += 1;
-		if (e.dataTransfer.items.length > 0 && !disabled && !loading) setIsDragging(true);
-	}, [disabled, loading]);
-	const handleDragLeave = React$1.useCallback((e) => {
-		e.preventDefault();
-		e.stopPropagation();
-		dragCounterRef.current -= 1;
-		if (dragCounterRef.current === 0) setIsDragging(false);
-	}, []);
-	const handleDragOver = React$1.useCallback((e) => {
-		e.preventDefault();
-		e.stopPropagation();
-	}, []);
-	const handleDrop = React$1.useCallback((e) => {
-		e.preventDefault();
-		e.stopPropagation();
-		dragCounterRef.current = 0;
-		setIsDragging(false);
-		if (e.dataTransfer.files.length > 0) handleFiles(e.dataTransfer.files);
-	}, [handleFiles]);
-	/**
-	* Handle click to open file dialog
-	*/
-	const handleClick = React$1.useCallback(() => {
-		if (disabled || loading) return;
-		inputRef.current?.click();
-	}, [disabled, loading]);
-	/**
-	* Handle file input change
-	*/
-	const handleInputChange = React$1.useCallback((e) => {
-		if (e.target.files && e.target.files.length > 0) handleFiles(e.target.files);
-		e.target.value = "";
-	}, [handleFiles]);
-	/**
-	* Build accept string for input
-	*/
-	const acceptString = accept?.join(",") || void 0;
-	/**
-	* Build hint text
-	*/
-	const hintText = React$1.useMemo(() => {
-		if (hint) return hint;
-		const parts = [];
-		if (accept && accept.length > 0) {
-			const types = accept.map((t) => {
-				if (t.startsWith("image/")) return "Images";
-				if (t.startsWith("video/")) return "Videos";
-				if (t.startsWith("audio/")) return "Audio";
-				if (t === "application/pdf") return "PDF";
-				if (t.startsWith(".")) return t.toUpperCase();
-				return t;
-			}).filter((v, i, a) => a.indexOf(v) === i);
-			parts.push(types.join(", "));
+		$[11] = disabled;
+		$[12] = loading;
+		$[13] = t6;
+	} else t6 = $[13];
+	const handleDragEnter = t6;
+	let t7;
+	if ($[14] === Symbol.for("react.memo_cache_sentinel")) {
+		t7 = (e_0) => {
+			e_0.preventDefault();
+			e_0.stopPropagation();
+			dragCounterRef.current = dragCounterRef.current - 1;
+			if (dragCounterRef.current === 0) setIsDragging(false);
+		};
+		$[14] = t7;
+	} else t7 = $[14];
+	const handleDragLeave = t7;
+	const handleDragOver = _temp;
+	let t8;
+	if ($[15] !== handleFiles) {
+		t8 = (e_2) => {
+			e_2.preventDefault();
+			e_2.stopPropagation();
+			dragCounterRef.current = 0;
+			setIsDragging(false);
+			if (e_2.dataTransfer.files.length > 0) handleFiles(e_2.dataTransfer.files);
+		};
+		$[15] = handleFiles;
+		$[16] = t8;
+	} else t8 = $[16];
+	const handleDrop = t8;
+	let t9;
+	if ($[17] !== disabled || $[18] !== loading) {
+		t9 = () => {
+			if (disabled || loading) return;
+			inputRef.current?.click();
+		};
+		$[17] = disabled;
+		$[18] = loading;
+		$[19] = t9;
+	} else t9 = $[19];
+	const handleClick = t9;
+	let t10;
+	if ($[20] !== handleFiles) {
+		t10 = (e_3) => {
+			if (e_3.target.files && e_3.target.files.length > 0) handleFiles(e_3.target.files);
+			e_3.target.value = "";
+		};
+		$[20] = handleFiles;
+		$[21] = t10;
+	} else t10 = $[21];
+	const handleInputChange = t10;
+	let t11;
+	if ($[22] !== accept) {
+		t11 = accept?.join(",") || void 0;
+		$[22] = accept;
+		$[23] = t11;
+	} else t11 = $[23];
+	const acceptString = t11;
+	let t12;
+	bb0: {
+		if (hint) {
+			t12 = hint;
+			break bb0;
 		}
-		if (maxSize) parts.push(`Max ${formatFileSize(maxSize)}`);
-		return parts.length > 0 ? parts.join(" • ") : void 0;
-	}, [
-		hint,
-		accept,
-		maxSize
-	]);
-	return /* @__PURE__ */ jsxs("div", {
-		role: "button",
-		tabIndex: disabled || loading ? -1 : 0,
-		onClick: handleClick,
-		onKeyDown: (e) => {
-			if (e.key === "Enter" || e.key === " ") {
-				e.preventDefault();
+		let parts;
+		if ($[24] !== accept || $[25] !== maxSize || $[26] !== t) {
+			parts = [];
+			if (accept && accept.length > 0) {
+				let t13$1;
+				if ($[28] !== t) {
+					t13$1 = (mimeType) => {
+						if (mimeType.startsWith("image/")) return t("dropzone.typeImages");
+						if (mimeType.startsWith("video/")) return t("dropzone.typeVideos");
+						if (mimeType.startsWith("audio/")) return t("dropzone.typeAudio");
+						if (mimeType === "application/pdf") return t("dropzone.typePDF");
+						if (mimeType.startsWith(".")) return mimeType.toUpperCase();
+						return mimeType;
+					};
+					$[28] = t;
+					$[29] = t13$1;
+				} else t13$1 = $[29];
+				const types = accept.map(t13$1).filter(_temp2);
+				parts.push(types.join(", "));
+			}
+			if (maxSize) {
+				let t13$1;
+				if ($[30] !== maxSize) {
+					t13$1 = formatFileSize(maxSize);
+					$[30] = maxSize;
+					$[31] = t13$1;
+				} else t13$1 = $[31];
+				parts.push(`Max ${t13$1}`);
+			}
+			$[24] = accept;
+			$[25] = maxSize;
+			$[26] = t;
+			$[27] = parts;
+		} else parts = $[27];
+		t12 = parts.length > 0 ? parts.join(" • ") : void 0;
+	}
+	const hintText = t12;
+	const t13 = disabled || loading ? -1 : 0;
+	let t14;
+	if ($[32] !== handleClick) {
+		t14 = (e_4) => {
+			if (e_4.key === "Enter" || e_4.key === " ") {
+				e_4.preventDefault();
 				handleClick();
 			}
-		},
-		onDragEnter: handleDragEnter,
-		onDragLeave: handleDragLeave,
-		onDragOver: handleDragOver,
-		onDrop: handleDrop,
-		className: cn("relative flex min-h-[120px] cursor-pointer flex-col items-center justify-center gap-2 rounded-lg border-2 border-dashed p-6 text-center transition-colors", "border-border/60 bg-muted/30 hover:border-border hover:bg-muted/50", isDragging && "border-primary bg-primary/5", error && "border-destructive/50 bg-destructive/5", (disabled || loading) && "pointer-events-none opacity-60", className),
-		"aria-disabled": disabled || loading,
-		"data-dragging": isDragging || void 0,
-		children: [
-			/* @__PURE__ */ jsx("input", {
-				ref: inputRef,
-				type: "file",
-				accept: acceptString,
-				multiple,
-				onChange: handleInputChange,
-				className: "sr-only",
-				disabled: disabled || loading,
-				tabIndex: -1
-			}),
-			children || /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx("div", {
-				className: "flex items-center justify-center",
-				children: loading ? /* @__PURE__ */ jsxs("div", {
-					className: "relative",
-					children: [/* @__PURE__ */ jsx(Icon, {
-						icon: "ph:spinner-gap",
-						className: "text-muted-foreground size-10 animate-spin"
-					}), typeof progress === "number" && /* @__PURE__ */ jsxs("span", {
-						className: "text-muted-foreground absolute inset-0 flex items-center justify-center text-xs font-medium",
-						children: [progress, "%"]
-					})]
-				}) : /* @__PURE__ */ jsx(Icon, {
-					icon: "ph:cloud-arrow-up",
-					className: cn("size-10 transition-colors", isDragging ? "text-primary" : "text-muted-foreground")
-				})
-			}), /* @__PURE__ */ jsxs("div", {
-				className: "space-y-1",
-				children: [
-					/* @__PURE__ */ jsx("p", {
-						className: cn("text-sm font-medium", isDragging ? "text-primary" : "text-foreground"),
-						children: loading ? "Uploading..." : label
-					}),
-					hintText && !loading && /* @__PURE__ */ jsx("p", {
-						className: "text-muted-foreground text-xs",
-						children: hintText
-					}),
-					loading && typeof progress === "number" && /* @__PURE__ */ jsx("div", {
-						className: "bg-muted mx-auto mt-2 h-1.5 w-32 overflow-hidden rounded-full",
-						children: /* @__PURE__ */ jsx("div", {
-							className: "bg-primary h-full rounded-full transition-all duration-300",
-							style: { width: `${progress}%` }
-						})
-					})
-				]
-			})] }),
-			error && /* @__PURE__ */ jsx("p", {
-				className: "text-destructive absolute bottom-2 left-0 right-0 text-center text-xs",
-				children: error
+		};
+		$[32] = handleClick;
+		$[33] = t14;
+	} else t14 = $[33];
+	const t15 = isDragging && "border-primary bg-primary/5";
+	const t16 = error && "border-destructive/50 bg-destructive/5";
+	const t17 = (disabled || loading) && "pointer-events-none opacity-60";
+	let t18;
+	if ($[34] !== className || $[35] !== t15 || $[36] !== t16 || $[37] !== t17) {
+		t18 = cn("qa-dropzone relative flex min-h-[120px] cursor-pointer flex-col items-center justify-center gap-2 border-2 border-dashed p-6 text-center transition-colors", "border-border bg-muted hover:border-border hover:bg-muted", t15, t16, t17, className);
+		$[34] = className;
+		$[35] = t15;
+		$[36] = t16;
+		$[37] = t17;
+		$[38] = t18;
+	} else t18 = $[38];
+	const t19 = disabled || loading;
+	const t20 = isDragging || void 0;
+	const t21 = disabled || loading;
+	let t22;
+	if ($[39] !== acceptString || $[40] !== handleInputChange || $[41] !== multiple || $[42] !== t21) {
+		t22 = /* @__PURE__ */ jsx("input", {
+			ref: inputRef,
+			type: "file",
+			accept: acceptString,
+			multiple,
+			onChange: handleInputChange,
+			className: "sr-only",
+			disabled: t21,
+			tabIndex: -1
+		});
+		$[39] = acceptString;
+		$[40] = handleInputChange;
+		$[41] = multiple;
+		$[42] = t21;
+		$[43] = t22;
+	} else t22 = $[43];
+	let t23;
+	if ($[44] !== children || $[45] !== hintText || $[46] !== isDragging || $[47] !== label || $[48] !== loading || $[49] !== progress || $[50] !== t) {
+		t23 = children || /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx("div", {
+			className: "flex items-center justify-center",
+			children: loading ? /* @__PURE__ */ jsxs("div", {
+				className: "relative",
+				children: [/* @__PURE__ */ jsx(Icon, {
+					icon: "ph:spinner-gap",
+					className: "text-muted-foreground size-10 animate-spin"
+				}), typeof progress === "number" && /* @__PURE__ */ jsxs("span", {
+					className: "text-muted-foreground absolute inset-0 flex items-center justify-center text-xs font-medium",
+					children: [progress, "%"]
+				})]
+			}) : /* @__PURE__ */ jsx(Icon, {
+				icon: "ph:cloud-arrow-up",
+				className: cn("size-10 transition-colors", isDragging ? "text-primary" : "text-muted-foreground")
 			})
-		]
-	});
+		}), /* @__PURE__ */ jsxs("div", {
+			className: "space-y-1",
+			children: [
+				/* @__PURE__ */ jsx("p", {
+					className: cn("text-sm font-medium", isDragging ? "text-primary" : "text-foreground"),
+					children: loading ? t("dropzone.uploading") : label || t("dropzone.label")
+				}),
+				hintText && !loading && /* @__PURE__ */ jsx("p", {
+					className: "text-muted-foreground text-xs",
+					children: hintText
+				}),
+				loading && typeof progress === "number" && /* @__PURE__ */ jsx("div", {
+					className: "bg-muted mx-auto mt-2 h-1.5 w-32 overflow-hidden rounded-full",
+					children: /* @__PURE__ */ jsx("div", {
+						className: "bg-primary h-full rounded-full transition-all duration-300",
+						style: { width: `${progress}%` }
+					})
+				})
+			]
+		})] });
+		$[44] = children;
+		$[45] = hintText;
+		$[46] = isDragging;
+		$[47] = label;
+		$[48] = loading;
+		$[49] = progress;
+		$[50] = t;
+		$[51] = t23;
+	} else t23 = $[51];
+	let t24;
+	if ($[52] !== error) {
+		t24 = error && /* @__PURE__ */ jsx("p", {
+			className: "text-destructive absolute right-0 bottom-2 left-0 text-center text-xs",
+			children: error
+		});
+		$[52] = error;
+		$[53] = t24;
+	} else t24 = $[53];
+	let t25;
+	if ($[54] !== handleClick || $[55] !== handleDragEnter || $[56] !== handleDrop || $[57] !== t13 || $[58] !== t14 || $[59] !== t18 || $[60] !== t19 || $[61] !== t20 || $[62] !== t22 || $[63] !== t23 || $[64] !== t24) {
+		t25 = /* @__PURE__ */ jsxs("div", {
+			role: "button",
+			tabIndex: t13,
+			onClick: handleClick,
+			onKeyDown: t14,
+			onDragEnter: handleDragEnter,
+			onDragLeave: handleDragLeave,
+			onDragOver: handleDragOver,
+			onDrop: handleDrop,
+			className: t18,
+			"aria-disabled": t19,
+			"data-dragging": t20,
+			children: [
+				t22,
+				t23,
+				t24
+			]
+		});
+		$[54] = handleClick;
+		$[55] = handleDragEnter;
+		$[56] = handleDrop;
+		$[57] = t13;
+		$[58] = t14;
+		$[59] = t18;
+		$[60] = t19;
+		$[61] = t20;
+		$[62] = t22;
+		$[63] = t23;
+		$[64] = t24;
+		$[65] = t25;
+	} else t25 = $[65];
+	return t25;
+}
+function _temp2(v, i, a) {
+	return a.indexOf(v) === i;
+}
+function _temp(e_1) {
+	e_1.preventDefault();
+	e_1.stopPropagation();
 }
 
 //#endregion
-export { Dropzone };
-//# sourceMappingURL=dropzone.mjs.map
+export { Dropzone };

package/dist/client/components/primitives/number-input.mjs

@@ -2,6 +2,7 @@ import { useResolveText } from "../../i18n/hooks.mjs";
 import { cn } from "../../lib/utils.mjs";
 import { Button } from "../ui/button.mjs";
 import { Input } from "../ui/input.mjs";
+import { useFieldIds } from "../ui/field.mjs";
 import { Icon } from "@iconify/react";
 import { jsx, jsxs } from "react/jsx-runtime";
 
@@ -23,8 +24,10 @@ import { jsx, jsxs } from "react/jsx-runtime";
 * />
 * ```
 */
-function NumberInput({ value, onChange, min, max, step = 1, showButtons = false, placeholder, disabled, readOnly, className, id, "aria-invalid": ariaInvalid }) {
+function NumberInput({ value, onChange, min, max, step = 1, showButtons = false, placeholder, disabled, readOnly, className, id, "aria-invalid": ariaInvalid, "aria-describedby": ariaDescribedByProp }) {
 	const resolveText = useResolveText();
+	const fieldIds = useFieldIds();
+	const ariaDescribedBy = ariaDescribedByProp ?? ([fieldIds?.hasError ? fieldIds.errorId : null, fieldIds?.hasDescription ? fieldIds.descriptionId : null].filter(Boolean).join(" ") || void 0);
 	const handleChange = (newValue) => {
 		if (newValue === null) {
 			onChange(null);
@@ -42,7 +45,7 @@ function NumberInput({ value, onChange, min, max, step = 1, showButtons = false,
 		handleChange((value ?? 0) - step);
 	};
 	if (showButtons) return /* @__PURE__ */ jsxs("div", {
-		className: cn("flex items-center gap-1", className),
+		className: cn("qa-number-input flex items-center gap-1", className),
 		children: [
 			/* @__PURE__ */ jsx(Button, {
 				type: "button",
@@ -72,7 +75,8 @@ function NumberInput({ value, onChange, min, max, step = 1, showButtons = false,
 				max,
 				step,
 				"aria-invalid": ariaInvalid,
-				className: "text-center [appearance:textfield] [&::-webkit-inner-spin-button]:appearance-none [&::-webkit-outer-spin-button]:appearance-none"
+				"aria-describedby": ariaDescribedBy,
+				className: "[appearance:textfield] text-center [&::-webkit-inner-spin-button]:appearance-none [&::-webkit-outer-spin-button]:appearance-none"
 			}),
 			/* @__PURE__ */ jsx(Button, {
 				type: "button",
@@ -92,10 +96,10 @@ function NumberInput({ value, onChange, min, max, step = 1, showButtons = false,
 		id,
 		type: "number",
 		value: value ?? "",
-		onChange: (e) => {
-			const val = e.target.value;
-			if (val === "") handleChange(null);
-			else handleChange(Number(val));
+		onChange: (e_0) => {
+			const val_0 = e_0.target.value;
+			if (val_0 === "") handleChange(null);
+			else handleChange(Number(val_0));
 		},
 		placeholder: resolveText(placeholder),
 		disabled,
@@ -104,10 +108,10 @@ function NumberInput({ value, onChange, min, max, step = 1, showButtons = false,
 		max,
 		step,
 		"aria-invalid": ariaInvalid,
-		className
+		"aria-describedby": ariaDescribedBy,
+		className: cn("qa-number-input", className)
 	});
 }
 
 //#endregion
-export { NumberInput };
-//# sourceMappingURL=number-input.mjs.map
+export { NumberInput };