@questpie/admin 3.0.3 → 3.0.4

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

@@ -1,5 +1,6 @@
 import { useTranslation } from "../../i18n/hooks.mjs";
 import { cn } from "../../lib/utils.mjs";
+import { Button } from "../ui/button.mjs";
 import { c } from "react/compiler-runtime";
 import { Icon } from "@iconify/react";
 import * as React from "react";
@@ -47,18 +48,19 @@ function formatFileSize(bytes) {
 	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 $ = c(70);
+	const { onDrop, accept, maxSize, multiple: t1, disabled: t2, loading: t3, progress, variant: t4, label, hint, error, className, children, action, onValidationError } = t0;
 	const multiple = t1 === void 0 ? false : t1;
 	const disabled = t2 === void 0 ? false : t2;
 	const loading = t3 === void 0 ? false : t3;
+	const variant = t4 === void 0 ? "panel" : t4;
 	const { t } = useTranslation();
 	const [isDragging, setIsDragging] = React.useState(false);
 	const inputRef = React.useRef(null);
 	const dragCounterRef = React.useRef(0);
-	let t4;
+	let t5;
 	if ($[0] !== accept || $[1] !== maxSize || $[2] !== t) {
-		t4 = (files) => {
+		t5 = (files) => {
 			const valid = [];
 			const errors = [];
 			for (const file of files) {
@@ -91,12 +93,12 @@ function Dropzone(t0) {
 		$[0] = accept;
 		$[1] = maxSize;
 		$[2] = t;
-		$[3] = t4;
-	} else t4 = $[3];
-	const validateFiles = t4;
-	let t5;
+		$[3] = t5;
+	} else t5 = $[3];
+	const validateFiles = t5;
+	let t6;
 	if ($[4] !== disabled || $[5] !== loading || $[6] !== multiple || $[7] !== onDrop || $[8] !== onValidationError || $[9] !== validateFiles) {
-		t5 = (files_0) => {
+		t6 = (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));
@@ -109,12 +111,12 @@ function Dropzone(t0) {
 		$[7] = onDrop;
 		$[8] = onValidationError;
 		$[9] = validateFiles;
-		$[10] = t5;
-	} else t5 = $[10];
-	const handleFiles = t5;
-	let t6;
+		$[10] = t6;
+	} else t6 = $[10];
+	const handleFiles = t6;
+	let t7;
 	if ($[11] !== disabled || $[12] !== loading) {
-		t6 = (e) => {
+		t7 = (e) => {
 			e.preventDefault();
 			e.stopPropagation();
 			dragCounterRef.current = dragCounterRef.current + 1;
@@ -122,24 +124,24 @@ function Dropzone(t0) {
 		};
 		$[11] = disabled;
 		$[12] = loading;
-		$[13] = t6;
-	} else t6 = $[13];
-	const handleDragEnter = t6;
-	let t7;
+		$[13] = t7;
+	} else t7 = $[13];
+	const handleDragEnter = t7;
+	let t8;
 	if ($[14] === Symbol.for("react.memo_cache_sentinel")) {
-		t7 = (e_0) => {
+		t8 = (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;
+		$[14] = t8;
+	} else t8 = $[14];
+	const handleDragLeave = t8;
 	const handleDragOver = _temp;
-	let t8;
+	let t9;
 	if ($[15] !== handleFiles) {
-		t8 = (e_2) => {
+		t9 = (e_2) => {
 			e_2.preventDefault();
 			e_2.stopPropagation();
 			dragCounterRef.current = 0;
@@ -147,50 +149,51 @@ function Dropzone(t0) {
 			if (e_2.dataTransfer.files.length > 0) handleFiles(e_2.dataTransfer.files);
 		};
 		$[15] = handleFiles;
-		$[16] = t8;
-	} else t8 = $[16];
-	const handleDrop = t8;
-	let t9;
+		$[16] = t9;
+	} else t9 = $[16];
+	const handleDrop = t9;
+	let t10;
 	if ($[17] !== disabled || $[18] !== loading) {
-		t9 = () => {
+		t10 = () => {
 			if (disabled || loading) return;
 			inputRef.current?.click();
 		};
 		$[17] = disabled;
 		$[18] = loading;
-		$[19] = t9;
-	} else t9 = $[19];
-	const handleClick = t9;
-	let t10;
+		$[19] = t10;
+	} else t10 = $[19];
+	const handleClick = t10;
+	let t11;
 	if ($[20] !== handleFiles) {
-		t10 = (e_3) => {
+		t11 = (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;
+		$[21] = t11;
+	} else t11 = $[21];
+	const handleInputChange = t11;
+	let t12;
 	if ($[22] !== accept) {
-		t11 = accept?.join(",") || void 0;
+		t12 = accept?.join(",") || void 0;
 		$[22] = accept;
-		$[23] = t11;
-	} else t11 = $[23];
-	const acceptString = t11;
-	let t12;
+		$[23] = t12;
+	} else t12 = $[23];
+	const acceptString = t12;
+	const isCompact = variant === "compact";
+	let t13;
 	bb0: {
 		if (hint) {
-			t12 = hint;
+			t13 = hint;
 			break bb0;
 		}
 		let parts;
 		if ($[24] !== accept || $[25] !== maxSize || $[26] !== t) {
 			parts = [];
 			if (accept && accept.length > 0) {
-				let t13$1;
+				let t14$1;
 				if ($[28] !== t) {
-					t13$1 = (mimeType) => {
+					t14$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");
@@ -199,162 +202,192 @@ function Dropzone(t0) {
 						return mimeType;
 					};
 					$[28] = t;
-					$[29] = t13$1;
-				} else t13$1 = $[29];
-				const types = accept.map(t13$1).filter(_temp2);
+					$[29] = t14$1;
+				} else t14$1 = $[29];
+				const types = accept.map(t14$1).filter(_temp2);
 				parts.push(types.join(", "));
 			}
 			if (maxSize) {
-				let t13$1;
+				let t14$1;
 				if ($[30] !== maxSize) {
-					t13$1 = formatFileSize(maxSize);
+					t14$1 = formatFileSize(maxSize);
 					$[30] = maxSize;
-					$[31] = t13$1;
-				} else t13$1 = $[31];
-				parts.push(`Max ${t13$1}`);
+					$[31] = t14$1;
+				} else t14$1 = $[31];
+				parts.push(`Max ${t14$1}`);
 			}
 			$[24] = accept;
 			$[25] = maxSize;
 			$[26] = t;
 			$[27] = parts;
 		} else parts = $[27];
-		t12 = parts.length > 0 ? parts.join(" • ") : void 0;
+		t13 = parts.length > 0 ? parts.join(" • ") : void 0;
 	}
-	const hintText = t12;
-	const t13 = disabled || loading ? -1 : 0;
-	let t14;
+	const hintText = t13;
+	const t14 = disabled || loading ? -1 : 0;
+	let t15;
 	if ($[32] !== handleClick) {
-		t14 = (e_4) => {
+		t15 = (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);
+		$[33] = t15;
+	} else t15 = $[33];
+	const t16 = isCompact ? "min-h-16 flex-row items-center justify-start gap-3 border border-dashed p-3 text-left" : "min-h-[120px] flex-col items-center justify-center gap-2 border-2 p-6 text-center";
+	const t17 = isDragging && "border-border-strong bg-surface-high";
+	const t18 = error && "border-destructive/50 bg-destructive/5";
+	const t19 = (disabled || loading) && "pointer-events-none opacity-60";
+	let t20;
+	if ($[34] !== className || $[35] !== t16 || $[36] !== t17 || $[37] !== t18 || $[38] !== t19) {
+		t20 = cn("qa-dropzone control-surface relative flex cursor-pointer hover:bg-muted/40 rounded-lg border transition-colors", t16, t17, t18, t19, className);
 		$[34] = className;
-		$[35] = t15;
-		$[36] = t16;
-		$[37] = t17;
-		$[38] = t18;
-	} else t18 = $[38];
-	const t19 = disabled || loading;
-	const t20 = isDragging || void 0;
+		$[35] = t16;
+		$[36] = t17;
+		$[37] = t18;
+		$[38] = t19;
+		$[39] = t20;
+	} else t20 = $[39];
 	const t21 = disabled || loading;
-	let t22;
-	if ($[39] !== acceptString || $[40] !== handleInputChange || $[41] !== multiple || $[42] !== t21) {
-		t22 = /* @__PURE__ */ jsx("input", {
+	const t22 = isDragging || void 0;
+	const t23 = disabled || loading;
+	let t24;
+	if ($[40] !== acceptString || $[41] !== handleInputChange || $[42] !== multiple || $[43] !== t23) {
+		t24 = /* @__PURE__ */ jsx("input", {
 			ref: inputRef,
 			type: "file",
 			accept: acceptString,
 			multiple,
 			onChange: handleInputChange,
 			className: "sr-only",
-			disabled: t21,
+			disabled: t23,
 			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, "%"]
+		$[40] = acceptString;
+		$[41] = handleInputChange;
+		$[42] = multiple;
+		$[43] = t23;
+		$[44] = t24;
+	} else t24 = $[44];
+	let t25;
+	if ($[45] !== action || $[46] !== children || $[47] !== disabled || $[48] !== hintText || $[49] !== isCompact || $[50] !== isDragging || $[51] !== label || $[52] !== loading || $[53] !== progress || $[54] !== t) {
+		t25 = children || /* @__PURE__ */ jsxs(Fragment, { children: [
+			/* @__PURE__ */ jsx("div", {
+				className: cn("flex shrink-0 items-center justify-center", isCompact && "bg-background/70 border-border-subtle size-9 rounded border"),
+				children: loading ? /* @__PURE__ */ jsxs("div", {
+					className: "relative",
+					children: [/* @__PURE__ */ jsx(Icon, {
+						icon: "ph:spinner-gap",
+						className: cn("text-muted-foreground animate-spin", isCompact ? "size-5" : "size-10")
+					}), typeof progress === "number" && /* @__PURE__ */ jsxs("span", {
+						className: cn("text-muted-foreground absolute inset-0 flex items-center justify-center font-medium tabular-nums", isCompact ? "text-[9px]" : "text-xs"),
+						children: [progress, "%"]
+					})]
+				}) : /* @__PURE__ */ jsx(Icon, {
+					icon: "ph:cloud-arrow-up",
+					className: cn("transition-colors", isCompact ? "size-5" : "size-10", isDragging ? "text-foreground" : "text-muted-foreground")
+				})
+			}),
+			/* @__PURE__ */ jsxs("div", {
+				className: cn("min-w-0 space-y-1", isCompact && "flex-1"),
+				children: [
+					/* @__PURE__ */ jsx("p", {
+						className: cn("text-foreground text-sm font-medium", isCompact && "truncate"),
+						children: loading ? t("dropzone.uploading") : label || t("dropzone.label")
+					}),
+					hintText && !loading && /* @__PURE__ */ jsx("p", {
+						className: cn("text-muted-foreground text-xs", isCompact && "truncate"),
+						children: hintText
+					}),
+					loading && typeof progress === "number" && /* @__PURE__ */ jsx("div", {
+						className: cn("bg-muted mt-2 h-1.5 overflow-hidden rounded-full", isCompact ? "w-full" : "mx-auto w-32"),
+						children: /* @__PURE__ */ jsx("div", {
+							className: "bg-primary h-full rounded-full transition-[width] duration-300",
+							style: { width: `${progress}%` }
+						})
+					})
+				]
+			}),
+			action && !loading && !disabled && /* @__PURE__ */ jsxs(Button, {
+				type: "button",
+				variant: "outline",
+				size: "sm",
+				disabled: action.disabled,
+				onClick: (e_5) => {
+					e_5.stopPropagation();
+					action.onClick();
+				},
+				onKeyDown: _temp3,
+				className: cn("shrink-0", isCompact && "max-w-[45%] px-2.5"),
+				children: [action.icon && /* @__PURE__ */ jsx(Icon, {
+					icon: action.icon,
+					className: "size-4 shrink-0"
+				}), /* @__PURE__ */ jsx("span", {
+					className: "truncate",
+					children: action.label
 				})]
-			}) : /* @__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", {
+		] });
+		$[45] = action;
+		$[46] = children;
+		$[47] = disabled;
+		$[48] = hintText;
+		$[49] = isCompact;
+		$[50] = isDragging;
+		$[51] = label;
+		$[52] = loading;
+		$[53] = progress;
+		$[54] = t;
+		$[55] = t25;
+	} else t25 = $[55];
+	let t26;
+	if ($[56] !== error) {
+		t26 = 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", {
+		$[56] = error;
+		$[57] = t26;
+	} else t26 = $[57];
+	let t27;
+	if ($[58] !== handleClick || $[59] !== handleDragEnter || $[60] !== handleDrop || $[61] !== t14 || $[62] !== t15 || $[63] !== t20 || $[64] !== t21 || $[65] !== t22 || $[66] !== t24 || $[67] !== t25 || $[68] !== t26) {
+		t27 = /* @__PURE__ */ jsxs("div", {
 			role: "button",
-			tabIndex: t13,
+			tabIndex: t14,
 			onClick: handleClick,
-			onKeyDown: t14,
+			onKeyDown: t15,
 			onDragEnter: handleDragEnter,
 			onDragLeave: handleDragLeave,
 			onDragOver: handleDragOver,
 			onDrop: handleDrop,
-			className: t18,
-			"aria-disabled": t19,
-			"data-dragging": t20,
+			className: t20,
+			"aria-disabled": t21,
+			"data-dragging": t22,
 			children: [
-				t22,
-				t23,
-				t24
+				t24,
+				t25,
+				t26
 			]
 		});
-		$[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;
+		$[58] = handleClick;
+		$[59] = handleDragEnter;
+		$[60] = handleDrop;
+		$[61] = t14;
+		$[62] = t15;
+		$[63] = t20;
+		$[64] = t21;
+		$[65] = t22;
+		$[66] = t24;
+		$[67] = t25;
+		$[68] = t26;
+		$[69] = t27;
+	} else t27 = $[69];
+	return t27;
+}
+function _temp3(e_6) {
+	e_6.stopPropagation();
 }
 function _temp2(v, i, a) {
 	return a.indexOf(v) === i;

package/dist/client/components/primitives/field-select-control.mjs

@@ -0,0 +1,93 @@
+"use client";
+
+import { cn } from "../../lib/utils.mjs";
+import { Button } from "../ui/button.mjs";
+import { InputGroup } from "../ui/input-group.mjs";
+import { c } from "react/compiler-runtime";
+import { jsx } from "react/jsx-runtime";
+
+//#region src/client/components/primitives/field-select-control.tsx
+function FieldSelectTrigger(t0) {
+	const $ = c(13);
+	let asInputGroupControl;
+	let className;
+	let hasValue;
+	let props;
+	if ($[0] !== t0) {
+		({className, hasValue, asInputGroupControl, ...props} = t0);
+		$[0] = t0;
+		$[1] = asInputGroupControl;
+		$[2] = className;
+		$[3] = hasValue;
+		$[4] = props;
+	} else {
+		asInputGroupControl = $[1];
+		className = $[2];
+		hasValue = $[3];
+		props = $[4];
+	}
+	const t1 = asInputGroupControl ? "input-group-control" : void 0;
+	const t2 = !hasValue && "text-muted-foreground";
+	const t3 = asInputGroupControl && "h-full min-w-0 flex-1 rounded-none border-0 bg-transparent shadow-none focus-visible:ring-0";
+	let t4;
+	if ($[5] !== className || $[6] !== t2 || $[7] !== t3) {
+		t4 = cn("qa-field-select-control qa-select-single control-surface w-full justify-between px-3 py-2 font-normal", "hover:bg-surface-low focus-visible:border-border-strong focus-visible:ring-ring/20 aria-expanded:border-border-strong aria-expanded:ring-ring/20 focus-visible:ring-[3px] aria-expanded:ring-[3px]", t2, t3, className);
+		$[5] = className;
+		$[6] = t2;
+		$[7] = t3;
+		$[8] = t4;
+	} else t4 = $[8];
+	let t5;
+	if ($[9] !== props || $[10] !== t1 || $[11] !== t4) {
+		t5 = /* @__PURE__ */ jsx(Button, {
+			variant: "outline",
+			"data-slot": t1,
+			className: t4,
+			...props
+		});
+		$[9] = props;
+		$[10] = t1;
+		$[11] = t4;
+		$[12] = t5;
+	} else t5 = $[12];
+	return t5;
+}
+function FieldSelectActionGroup(t0) {
+	const $ = c(10);
+	let className;
+	let error;
+	let props;
+	if ($[0] !== t0) {
+		({className, error, ...props} = t0);
+		$[0] = t0;
+		$[1] = className;
+		$[2] = error;
+		$[3] = props;
+	} else {
+		className = $[1];
+		error = $[2];
+		props = $[3];
+	}
+	const t1 = error && "border-destructive ring-destructive/20 ring-[2px]";
+	let t2;
+	if ($[4] !== className || $[5] !== t1) {
+		t2 = cn("qa-field-select-action-group control-surface overflow-hidden p-0", t1, className);
+		$[4] = className;
+		$[5] = t1;
+		$[6] = t2;
+	} else t2 = $[6];
+	let t3;
+	if ($[7] !== props || $[8] !== t2) {
+		t3 = /* @__PURE__ */ jsx(InputGroup, {
+			className: t2,
+			...props
+		});
+		$[7] = props;
+		$[8] = t2;
+		$[9] = t3;
+	} else t3 = $[9];
+	return t3;
+}
+
+//#endregion
+export { FieldSelectActionGroup, FieldSelectTrigger };