@questpie/admin 1.1.1 → 3.0.0

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

@@ -0,0 +1,368 @@
+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 from "react";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+
+//#region src/client/components/primitives/dropzone.tsx
+/**
+* Dropzone Primitive
+*
+* A reusable drag-and-drop area for file uploads.
+* Supports file type filtering, size validation, and visual feedback.
+*
+* @example
+* ```tsx
+* <Dropzone
+*   onDrop={(files) => handleUpload(files)}
+*   accept={["image/*", "application/pdf"]}
+*   maxSize={5_000_000}
+* />
+* ```
+*/
+/**
+* Check if a file matches accepted types
+*/
+function matchesAccept(file, accept) {
+	if (!accept || accept.length === 0) return true;
+	const mimeType = file.type.toLowerCase();
+	const fileName = file.name.toLowerCase();
+	return accept.some((pattern) => {
+		const normalizedPattern = pattern.toLowerCase();
+		if (normalizedPattern.endsWith("/*")) {
+			const baseType = normalizedPattern.slice(0, -2);
+			return mimeType.startsWith(`${baseType}/`);
+		}
+		if (normalizedPattern.startsWith(".")) return fileName.endsWith(normalizedPattern);
+		return mimeType === normalizedPattern;
+	});
+}
+/**
+* Format file size for display
+*/
+function formatFileSize(bytes) {
+	if (bytes < 1024) return `${bytes} B`;
+	if (bytes < 1024 * 1024) return `${(bytes / 1024).toFixed(1)} KB`;
+	return `${(bytes / (1024 * 1024)).toFixed(1)} MB`;
+}
+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);
+			}
+			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);
+		};
+		$[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;
+		}
+		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();
+			}
+		};
+		$[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 };

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

@@ -0,0 +1,117 @@
+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";
+
+//#region src/client/components/primitives/number-input.tsx
+/**
+* Number Input Primitive
+*
+* A number input with optional increment/decrement buttons.
+*
+* @example
+* ```tsx
+* <NumberInput
+*   value={count}
+*   onChange={setCount}
+*   min={0}
+*   max={100}
+*   step={1}
+*   showButtons
+* />
+* ```
+*/
+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);
+			return;
+		}
+		let clampedValue = newValue;
+		if (min !== void 0 && clampedValue < min) clampedValue = min;
+		if (max !== void 0 && clampedValue > max) clampedValue = max;
+		onChange(clampedValue);
+	};
+	const increment = () => {
+		handleChange((value ?? 0) + step);
+	};
+	const decrement = () => {
+		handleChange((value ?? 0) - step);
+	};
+	if (showButtons) return /* @__PURE__ */ jsxs("div", {
+		className: cn("qa-number-input flex items-center gap-1", className),
+		children: [
+			/* @__PURE__ */ jsx(Button, {
+				type: "button",
+				variant: "outline",
+				size: "icon-sm",
+				onClick: decrement,
+				disabled: disabled || min !== void 0 && (value ?? 0) <= min,
+				tabIndex: -1,
+				children: /* @__PURE__ */ jsx(Icon, {
+					icon: "ph:minus",
+					className: "size-3"
+				})
+			}),
+			/* @__PURE__ */ jsx(Input, {
+				id,
+				type: "number",
+				value: value ?? "",
+				onChange: (e) => {
+					const val = e.target.value;
+					if (val === "") handleChange(null);
+					else handleChange(Number(val));
+				},
+				placeholder: resolveText(placeholder),
+				disabled,
+				readOnly,
+				min,
+				max,
+				step,
+				"aria-invalid": ariaInvalid,
+				"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",
+				variant: "outline",
+				size: "icon-sm",
+				onClick: increment,
+				disabled: disabled || max !== void 0 && (value ?? 0) >= max,
+				tabIndex: -1,
+				children: /* @__PURE__ */ jsx(Icon, {
+					icon: "ph:plus",
+					className: "size-3"
+				})
+			})
+		]
+	});
+	return /* @__PURE__ */ jsx(Input, {
+		id,
+		type: "number",
+		value: value ?? "",
+		onChange: (e_0) => {
+			const val_0 = e_0.target.value;
+			if (val_0 === "") handleChange(null);
+			else handleChange(Number(val_0));
+		},
+		placeholder: resolveText(placeholder),
+		disabled,
+		readOnly,
+		min,
+		max,
+		step,
+		"aria-invalid": ariaInvalid,
+		"aria-describedby": ariaDescribedBy,
+		className: cn("qa-number-input", className)
+	});
+}
+
+//#endregion
+export { NumberInput };