@object-ui/plugin-detail 3.1.5 → 3.3.1

package/CHANGELOG.md

@@ -1,5 +1,36 @@
 # @object-ui/plugin-detail
 
+## 3.3.1
+
+### Patch Changes
+
+- Updated dependencies [b429568]
+  - @object-ui/components@3.3.1
+  - @object-ui/fields@3.3.1
+  - @object-ui/types@3.3.1
+  - @object-ui/core@3.3.1
+  - @object-ui/react@3.3.1
+
+## 3.3.0
+
+### Patch Changes
+
+- @object-ui/types@3.3.0
+- @object-ui/core@3.3.0
+- @object-ui/react@3.3.0
+- @object-ui/components@3.3.0
+- @object-ui/fields@3.3.0
+
+## 3.2.0
+
+### Patch Changes
+
+- @object-ui/types@3.2.0
+- @object-ui/core@3.2.0
+- @object-ui/react@3.2.0
+- @object-ui/components@3.2.0
+- @object-ui/fields@3.2.0
+
 ## 3.1.5
 
 ### Patch Changes

package/README.md

@@ -192,6 +192,26 @@ Tab navigation for organizing content into different views.
 
 Displays related records in list, grid, or table format.
 
+<!-- release-metadata:v3.3.0 -->
+
+## Compatibility
+
+- **React:** 18.x or 19.x
+- **Node.js:** ≥ 18
+- **TypeScript:** ≥ 5.0 (strict mode)
+- **`@objectstack/spec`:** ^3.3.0
+- **`@objectstack/client`:** ^3.3.0
+- **Tailwind CSS:** ≥ 3.4 (for packages with UI)
+
+## Links
+
+- 📚 [Documentation](https://www.objectui.org/docs/plugins/plugin-detail)
+- 📦 [npm package](https://www.npmjs.com/package/@object-ui/plugin-detail)
+- 📝 [Changelog](./CHANGELOG.md)
+- 🐛 [Report an issue](https://github.com/objectstack-ai/objectui/issues)
+- 🤝 [Contributing Guide](https://github.com/objectstack-ai/objectui/blob/main/CONTRIBUTING.md)
+- 🗺️ [Roadmap](https://github.com/objectstack-ai/objectui/blob/main/ROADMAP.md)
+
 ## License
 
-MIT
+MIT — see [LICENSE](./LICENSE).

package/dist/AddressField-LgHnO2Lk.js

@@ -0,0 +1,98 @@
+import { n as e } from "./rolldown-runtime-DnwLefa7.js";
+import { O as t, k as n, t as r } from "./src-DyUKLvMN.js";
+import "react";
+import { jsx as i, jsxs as a } from "react/jsx-runtime";
+//#region ../fields/src/widgets/AddressField.tsx
+var o = /* @__PURE__ */ e({ AddressField: () => s });
+function s({ value: e, onChange: o, field: s, readonly: c, ...l }) {
+	let u = e || {}, d = (e, t) => {
+		o({
+			...u,
+			[e]: t
+		});
+	}, f = (e) => [
+		e.street,
+		e.city,
+		[e.state, e.zipCode].filter(Boolean).join(" "),
+		e.country
+	].filter(Boolean).join(", ");
+	if (c) {
+		let e = f(u);
+		return e ? /* @__PURE__ */ i("span", {
+			className: "text-sm",
+			children: e
+		}) : /* @__PURE__ */ i(r, {});
+	}
+	return /* @__PURE__ */ a("div", {
+		className: "space-y-3",
+		children: [
+			/* @__PURE__ */ a("div", { children: [/* @__PURE__ */ i(n, {
+				htmlFor: "street",
+				className: "text-xs",
+				children: "Street Address"
+			}), /* @__PURE__ */ i(t, {
+				id: "street",
+				type: "text",
+				value: u.street || "",
+				onChange: (e) => d("street", e.target.value),
+				placeholder: "123 Main St",
+				disabled: c || l.disabled,
+				className: l.className
+			})] }),
+			/* @__PURE__ */ a("div", {
+				className: "grid grid-cols-2 gap-3",
+				children: [/* @__PURE__ */ a("div", { children: [/* @__PURE__ */ i(n, {
+					htmlFor: "city",
+					className: "text-xs",
+					children: "City"
+				}), /* @__PURE__ */ i(t, {
+					id: "city",
+					type: "text",
+					value: u.city || "",
+					onChange: (e) => d("city", e.target.value),
+					placeholder: "San Francisco",
+					disabled: c || l.disabled
+				})] }), /* @__PURE__ */ a("div", { children: [/* @__PURE__ */ i(n, {
+					htmlFor: "state",
+					className: "text-xs",
+					children: "State / Province"
+				}), /* @__PURE__ */ i(t, {
+					id: "state",
+					type: "text",
+					value: u.state || "",
+					onChange: (e) => d("state", e.target.value),
+					placeholder: "CA",
+					disabled: c || l.disabled
+				})] })]
+			}),
+			/* @__PURE__ */ a("div", {
+				className: "grid grid-cols-2 gap-3",
+				children: [/* @__PURE__ */ a("div", { children: [/* @__PURE__ */ i(n, {
+					htmlFor: "zipCode",
+					className: "text-xs",
+					children: "ZIP / Postal Code"
+				}), /* @__PURE__ */ i(t, {
+					id: "zipCode",
+					type: "text",
+					value: u.zipCode || "",
+					onChange: (e) => d("zipCode", e.target.value),
+					placeholder: "94102",
+					disabled: c || l.disabled
+				})] }), /* @__PURE__ */ a("div", { children: [/* @__PURE__ */ i(n, {
+					htmlFor: "country",
+					className: "text-xs",
+					children: "Country"
+				}), /* @__PURE__ */ i(t, {
+					id: "country",
+					type: "text",
+					value: u.country || "",
+					onChange: (e) => d("country", e.target.value),
+					placeholder: "United States",
+					disabled: c || l.disabled
+				})] })]
+			})
+		]
+	});
+}
+//#endregion
+export { o as t };

package/dist/AutoNumberField-xZCrU0eW.js

@@ -0,0 +1,14 @@
+import { n as e } from "./rolldown-runtime-DnwLefa7.js";
+import { t } from "./src-DyUKLvMN.js";
+import "react";
+import { jsx as n } from "react/jsx-runtime";
+//#region ../fields/src/widgets/AutoNumberField.tsx
+var r = /* @__PURE__ */ e({ AutoNumberField: () => i });
+function i({ value: e, field: r, ...i }) {
+	return e == null ? /* @__PURE__ */ n(t, { className: i.className }) : /* @__PURE__ */ n("span", {
+		className: `text-sm font-mono text-gray-700 ${i.className || ""}`,
+		children: String(e)
+	});
+}
+//#endregion
+export { r as t };

package/dist/{AvatarField-YGj51ozd.js → AvatarField-Dy2XGlPz.js}

@@ -1,9 +1,10 @@
-import { $ as e, J as t, X as n, Y as r, Z as i, et as a, hn as o } from "./src-CXr1-vVl.js";
+import { n as e } from "./rolldown-runtime-DnwLefa7.js";
+import { G as t, K as n, W as r, X as i, Z as a, q as o } from "./src-DyUKLvMN.js";
 import s from "react";
 import { jsx as c, jsxs as l } from "react/jsx-runtime";
 //#region ../fields/src/widgets/AvatarField.tsx
-var u = /* @__PURE__ */ o({ AvatarField: () => d });
-function d({ value: o, onChange: u, field: d, readonly: f, ...p }) {
+var u = /* @__PURE__ */ e({ AvatarField: () => d });
+function d({ value: e, onChange: u, field: d, readonly: f, ...p }) {
 	let [m, h] = s.useState(!1), g = s.useRef(null), _ = d || p.schema, v = (e) => {
 		let t = e.target.files?.[0];
 		if (!t) return;
@@ -22,29 +23,29 @@ function d({ value: o, onChange: u, field: d, readonly: f, ...p }) {
 	}, y = () => {
 		u("");
 	}, b = () => (_?.defaultName || _?.label || "User").split(" ").map((e) => e[0]).join("").toUpperCase().slice(0, 2);
-	return f ? /* @__PURE__ */ l(t, {
+	return f ? /* @__PURE__ */ l(r, {
 		className: "w-16 h-16",
-		children: [o && /* @__PURE__ */ c(n, {
-			src: o,
+		children: [e && /* @__PURE__ */ c(n, {
+			src: e,
 			alt: _?.label
-		}), /* @__PURE__ */ c(r, { children: b() })]
+		}), /* @__PURE__ */ c(t, { children: b() })]
 	}) : /* @__PURE__ */ l("div", {
 		className: "flex items-center gap-4",
 		children: [/* @__PURE__ */ l("div", {
 			className: "relative",
 			onMouseEnter: () => h(!0),
 			onMouseLeave: () => h(!1),
-			children: [/* @__PURE__ */ l(t, {
+			children: [/* @__PURE__ */ l(r, {
 				className: "w-16 h-16",
-				children: [o && /* @__PURE__ */ c(n, {
-					src: o,
+				children: [e && /* @__PURE__ */ c(n, {
+					src: e,
 					alt: _?.label
-				}), /* @__PURE__ */ c(r, { children: b() })]
-			}), !f && m && o && /* @__PURE__ */ c("button", {
+				}), /* @__PURE__ */ c(t, { children: b() })]
+			}), !f && m && e && /* @__PURE__ */ c("button", {
 				type: "button",
 				onClick: y,
 				className: "absolute -top-1 -right-1 bg-destructive text-destructive-foreground rounded-full p-1 hover:bg-destructive/90",
-				children: /* @__PURE__ */ c(e, { className: "w-3 h-3" })
+				children: /* @__PURE__ */ c(i, { className: "w-3 h-3" })
 			})]
 		}), /* @__PURE__ */ l("div", {
 			className: "flex flex-col gap-2",
@@ -56,7 +57,7 @@ function d({ value: o, onChange: u, field: d, readonly: f, ...p }) {
 					onChange: v,
 					className: "hidden"
 				}),
-				/* @__PURE__ */ l(i, {
+				/* @__PURE__ */ l(o, {
 					type: "button",
 					variant: "outline",
 					size: "sm",
@@ -64,7 +65,7 @@ function d({ value: o, onChange: u, field: d, readonly: f, ...p }) {
 					disabled: f || p.disabled,
 					children: [
 						/* @__PURE__ */ c(a, { className: "w-4 h-4 mr-2" }),
-						o ? "Change" : "Upload",
+						e ? "Change" : "Upload",
 						" Avatar"
 					]
 				}),

package/dist/{BooleanField-CaA898Tk.js → BooleanField-C0Clfka5.js}

@@ -1,36 +1,37 @@
-import { H as e, O as t, f as n, hn as r } from "./src-CXr1-vVl.js";
+import { n as e } from "./rolldown-runtime-DnwLefa7.js";
+import { R as t, k as n, p as r } from "./src-DyUKLvMN.js";
 import { useId as i } from "react";
 import { jsx as a, jsxs as o } from "react/jsx-runtime";
 //#region ../fields/src/widgets/BooleanField.tsx
-var s = /* @__PURE__ */ r({ BooleanField: () => c });
-function c({ value: r, onChange: s, field: c, readonly: l, ...u }) {
+var s = /* @__PURE__ */ e({ BooleanField: () => c });
+function c({ value: e, onChange: s, field: c, readonly: l, ...u }) {
 	let d = c || u.schema, f = d?.widget, p = i(), m = d?.name || p, h = d?.label || "Checkbox";
 	if (l) return /* @__PURE__ */ a("span", {
 		className: "text-sm",
-		children: r ? "Yes" : "No"
+		children: e ? "Yes" : "No"
 	});
 	let { inputType: g, ..._ } = u;
 	return f === "checkbox" ? /* @__PURE__ */ o("div", {
 		className: "flex items-center space-x-2",
-		children: [/* @__PURE__ */ a(e, {
+		children: [/* @__PURE__ */ a(t, {
 			..._,
 			id: m,
-			checked: !!r,
+			checked: !!e,
 			onCheckedChange: (e) => s(!!e),
 			disabled: l || _.disabled
-		}), /* @__PURE__ */ a(t, {
+		}), /* @__PURE__ */ a(n, {
 			htmlFor: m,
 			children: h
 		})]
 	}) : /* @__PURE__ */ o("div", {
 		className: "flex items-center space-x-2",
-		children: [/* @__PURE__ */ a(n, {
+		children: [/* @__PURE__ */ a(r, {
 			..._,
 			id: m,
-			checked: !!r,
+			checked: !!e,
 			onCheckedChange: s,
 			disabled: l || _.disabled
-		}), /* @__PURE__ */ a(t, {
+		}), /* @__PURE__ */ a(n, {
 			htmlFor: m,
 			children: h
 		})]

package/dist/CodeField-CHUa07B6.js

@@ -0,0 +1,23 @@
+import { n as e } from "./rolldown-runtime-DnwLefa7.js";
+import { an as t, n, t as r } from "./src-DyUKLvMN.js";
+import "react";
+import { jsx as i } from "react/jsx-runtime";
+//#region ../fields/src/widgets/CodeField.tsx
+var a = /* @__PURE__ */ e({ CodeField: () => o });
+function o({ value: e, onChange: a, field: o, readonly: s, ...c }) {
+	let l = o || c.schema, u = l?.language ?? "javascript";
+	return s ? /* @__PURE__ */ i("pre", {
+		className: t("text-sm bg-muted p-2 rounded overflow-x-auto border", c.className),
+		children: /* @__PURE__ */ i("code", { children: e || /* @__PURE__ */ i(r, {}) })
+	}) : /* @__PURE__ */ i(n, {
+		value: e || "",
+		onChange: (e) => a(e.target.value),
+		placeholder: l?.placeholder || `// Write ${u} code here...`,
+		disabled: s || c.disabled,
+		className: t("font-mono text-sm", c.className),
+		rows: 12,
+		spellCheck: !1
+	});
+}
+//#endregion
+export { a as t };

package/dist/ColorField-vxHqEhcS.js

@@ -0,0 +1,38 @@
+import { n as e } from "./rolldown-runtime-DnwLefa7.js";
+import { O as t, t as n } from "./src-DyUKLvMN.js";
+import "react";
+import { jsx as r, jsxs as i } from "react/jsx-runtime";
+//#region ../fields/src/widgets/ColorField.tsx
+var a = /* @__PURE__ */ e({ ColorField: () => o });
+function o({ value: e, onChange: a, field: o, readonly: s, ...c }) {
+	let l = o || c.schema;
+	return s ? /* @__PURE__ */ i("div", {
+		className: "flex items-center gap-2",
+		children: [/* @__PURE__ */ r("div", {
+			className: "w-6 h-6 rounded border border-input",
+			style: { backgroundColor: e || "#000000" }
+		}), /* @__PURE__ */ r("span", {
+			className: "text-sm",
+			children: e || /* @__PURE__ */ r(n, {})
+		})]
+	}) : /* @__PURE__ */ i("div", {
+		className: "flex items-center gap-2",
+		children: [/* @__PURE__ */ r("input", {
+			type: "color",
+			value: e || "#000000",
+			onChange: (e) => a(e.target.value),
+			disabled: s || c.disabled,
+			className: "w-10 h-10 rounded border border-input cursor-pointer"
+		}), /* @__PURE__ */ r(t, {
+			type: "text",
+			value: e || "",
+			onChange: (e) => a(e.target.value),
+			placeholder: l?.placeholder || "#000000",
+			disabled: s || c.disabled,
+			className: c.className,
+			pattern: "^#([A-Fa-f0-9]{6}|[A-Fa-f0-9]{3})$"
+		})]
+	});
+}
+//#endregion
+export { a as t };

package/dist/CurrencyField-DiWjYWDo.js

@@ -0,0 +1,49 @@
+import { n as e } from "./rolldown-runtime-DnwLefa7.js";
+import { O as t, t as n } from "./src-DyUKLvMN.js";
+import "react";
+import { jsx as r, jsxs as i } from "react/jsx-runtime";
+//#region ../fields/src/widgets/CurrencyField.tsx
+var a = /* @__PURE__ */ e({ CurrencyField: () => s });
+function o(e, t = "USD") {
+	try {
+		return new Intl.NumberFormat("en-US", {
+			style: "currency",
+			currency: t
+		}).format(e);
+	} catch {
+		return `${t} ${e.toFixed(2)}`;
+	}
+}
+function s({ value: e, onChange: a, field: s, readonly: c, errorMessage: l, className: u, ...d }) {
+	let f = s || d.schema, p = f?.currency || "USD", m = f?.precision ?? 2;
+	if (c) return e == null ? /* @__PURE__ */ r(n, {}) : /* @__PURE__ */ r("span", {
+		className: "text-sm font-medium tabular-nums",
+		children: o(Number(e), p)
+	});
+	let h = (e) => {
+		let t = parseFloat(e.target.value);
+		isNaN(t) || a(parseFloat(t.toFixed(m)));
+	};
+	return /* @__PURE__ */ i("div", {
+		className: "relative",
+		children: [/* @__PURE__ */ r("span", {
+			className: "absolute left-3 top-1/2 -translate-y-1/2 text-sm text-gray-500",
+			children: p === "USD" ? "$" : p
+		}), /* @__PURE__ */ r(t, {
+			...d,
+			type: "number",
+			value: e ?? "",
+			onChange: (e) => {
+				a(e.target.value === "" ? null : parseFloat(e.target.value));
+			},
+			onBlur: h,
+			placeholder: f?.placeholder || "0.00",
+			disabled: c || d.disabled,
+			className: `pl-8 ${u || ""}`,
+			step: (10 ** -m).toFixed(m),
+			"aria-invalid": !!l
+		})]
+	});
+}
+//#endregion
+export { a as t };

package/dist/DateField-DGaRPM4P.js

@@ -0,0 +1,22 @@
+import { n as e } from "./rolldown-runtime-DnwLefa7.js";
+import { O as t, t as n } from "./src-DyUKLvMN.js";
+import "react";
+import { jsx as r } from "react/jsx-runtime";
+//#region ../fields/src/widgets/DateField.tsx
+var i = /* @__PURE__ */ e({ DateField: () => a });
+function a({ value: e, onChange: i, field: a, readonly: o, ...s }) {
+	if (o) return e ? /* @__PURE__ */ r("span", {
+		className: "text-sm",
+		children: new Date(e).toLocaleDateString()
+	}) : /* @__PURE__ */ r(n, {});
+	let { inputType: c, ...l } = s;
+	return /* @__PURE__ */ r(t, {
+		...l,
+		type: "date",
+		value: e || "",
+		onChange: (e) => i(e.target.value),
+		disabled: o || l.disabled
+	});
+}
+//#endregion
+export { i as t };

package/dist/DateTimeField-8QnpsI_h.js

@@ -0,0 +1,30 @@
+import { n as e } from "./rolldown-runtime-DnwLefa7.js";
+import { O as t, t as n } from "./src-DyUKLvMN.js";
+import "react";
+import { jsx as r, jsxs as i } from "react/jsx-runtime";
+//#region ../fields/src/widgets/DateTimeField.tsx
+var a = /* @__PURE__ */ e({ DateTimeField: () => o });
+function o({ value: e, onChange: a, field: o, readonly: s, ...c }) {
+	if (s) {
+		if (!e) return /* @__PURE__ */ r(n, {});
+		let t = new Date(e);
+		return /* @__PURE__ */ i("span", {
+			className: "text-sm",
+			children: [
+				t.toLocaleDateString(),
+				" ",
+				t.toLocaleTimeString()
+			]
+		});
+	}
+	let { inputType: l, ...u } = c;
+	return /* @__PURE__ */ r(t, {
+		...u,
+		type: "datetime-local",
+		value: e || "",
+		onChange: (e) => a(e.target.value),
+		disabled: s || u.disabled
+	});
+}
+//#endregion
+export { a as t };

package/dist/EmailField-CkVgMbpI.js

@@ -0,0 +1,26 @@
+import { n as e } from "./rolldown-runtime-DnwLefa7.js";
+import { O as t, t as n } from "./src-DyUKLvMN.js";
+import "react";
+import { jsx as r } from "react/jsx-runtime";
+//#region ../fields/src/widgets/EmailField.tsx
+var i = /* @__PURE__ */ e({ EmailField: () => a });
+function a({ value: e, onChange: i, field: a, readonly: o, errorMessage: s, ...c }) {
+	let l = a || c.schema;
+	if (o) return e ? /* @__PURE__ */ r("a", {
+		href: `mailto:${e}`,
+		className: "text-sm text-blue-600 hover:text-blue-800 hover:underline",
+		children: e
+	}) : /* @__PURE__ */ r(n, {});
+	let { inputType: u, ...d } = c;
+	return /* @__PURE__ */ r(t, {
+		...d,
+		type: "email",
+		value: e || "",
+		onChange: (e) => i(e.target.value),
+		placeholder: l?.placeholder || "email@example.com",
+		disabled: o || d.disabled,
+		"aria-invalid": !!s
+	});
+}
+//#endregion
+export { i as t };

package/dist/FileField-5UPV7uek.js

@@ -0,0 +1,149 @@
+import { n as e } from "./rolldown-runtime-DnwLefa7.js";
+import { Et as t, Ot as n, X as r, Z as i, q as a, t as o } from "./src-DyUKLvMN.js";
+import { useCallback as s, useRef as c, useState as l } from "react";
+import { jsx as u, jsxs as d } from "react/jsx-runtime";
+//#region ../fields/src/widgets/FileField.tsx
+var f = /* @__PURE__ */ e({ FileField: () => p });
+function p({ value: e, onChange: f, field: p, readonly: m, ...h }) {
+	let g = c(null), _ = p || h.schema, v = _?.multiple || !1, y = _?.accept ? _.accept.join(",") : void 0, b = _?.maxSize, [x, S] = l(!1), [C, w] = l([]), T = e ? Array.isArray(e) ? e : [e] : [], E = s((e) => {
+		if (e.length === 0) return;
+		let t = [], n = e.filter((e) => {
+			if (b && e.size > b) {
+				let n = (b / (1024 * 1024)).toFixed(1);
+				return t.push(`"${e.name}" exceeds max size (${n} MB)`), !1;
+			}
+			return !0;
+		});
+		if (w(t), n.length === 0) return;
+		let r = n.map((e) => ({
+			name: e.name,
+			original_name: e.name,
+			size: e.size,
+			mime_type: e.type,
+			url: URL.createObjectURL(e)
+		}));
+		f(v ? [...T, ...r] : r[0]);
+	}, [
+		T,
+		v,
+		f,
+		b
+	]), D = s((e) => {
+		e.preventDefault(), e.stopPropagation(), S(!0);
+	}, []), O = s((e) => {
+		e.preventDefault(), e.stopPropagation(), S(!1);
+	}, []), k = s((e) => {
+		e.preventDefault(), e.stopPropagation(), S(!1);
+		let t = Array.from(e.dataTransfer.files);
+		if (y) {
+			let e = y.split(",").map((e) => e.trim().toLowerCase());
+			E(t.filter((t) => {
+				let n = t.name.split("."), r = n.length > 1 ? "." + n.pop()?.toLowerCase() : "";
+				return e.some((e) => e === t.type || r && e === r || e.endsWith("/*") && t.type.startsWith(e.replace("/*", "/")));
+			}));
+		} else E(t);
+	}, [y, E]);
+	if (m) return e ? /* @__PURE__ */ u("div", {
+		className: "flex flex-wrap gap-2",
+		children: (Array.isArray(e) ? e : [e]).map((e, t) => /* @__PURE__ */ u("span", {
+			className: "text-sm truncate max-w-xs",
+			children: e.name || e.original_name || "File"
+		}, t))
+	}) : /* @__PURE__ */ u(o, {});
+	let A = (e) => {
+		E(Array.from(e.target.files || []));
+	}, j = (e) => {
+		if (v) {
+			let t = T.filter((t, n) => n !== e);
+			f(t.length > 0 ? t : null);
+		} else f(null);
+	}, M = (e) => (e.mime_type || "").startsWith("image/");
+	return /* @__PURE__ */ d("div", {
+		className: h.className,
+		children: [/* @__PURE__ */ u("input", {
+			ref: g,
+			type: "file",
+			multiple: v,
+			accept: y,
+			onChange: A,
+			className: "hidden"
+		}), /* @__PURE__ */ d("div", {
+			className: "space-y-2",
+			children: [
+				/* @__PURE__ */ d("div", {
+					onDragOver: D,
+					onDragLeave: O,
+					onDrop: k,
+					onClick: () => g.current?.click(),
+					className: `
+            flex flex-col items-center justify-center gap-2 p-6 
+            border-2 border-dashed rounded-lg cursor-pointer
+            transition-colors duration-200
+            ${x ? "border-primary bg-primary/5 text-primary" : "border-muted-foreground/25 hover:border-primary/50 text-muted-foreground hover:text-foreground"}
+          `,
+					role: "button",
+					tabIndex: 0,
+					onKeyDown: (e) => {
+						(e.key === "Enter" || e.key === " ") && (e.preventDefault(), g.current?.click());
+					},
+					children: [/* @__PURE__ */ u(i, { className: `size-8 ${x ? "text-primary" : "text-muted-foreground"}` }), /* @__PURE__ */ d("div", {
+						className: "text-center",
+						children: [/* @__PURE__ */ u("p", {
+							className: "text-sm font-medium",
+							children: x ? "Drop files here" : "Drag & drop files here"
+						}), /* @__PURE__ */ u("p", {
+							className: "text-xs text-muted-foreground mt-1",
+							children: "or click to browse"
+						})]
+					})]
+				}),
+				C.length > 0 && /* @__PURE__ */ u("div", {
+					className: "space-y-0.5",
+					children: C.map((e, t) => /* @__PURE__ */ u("p", {
+						className: "text-xs text-destructive",
+						children: e
+					}, t))
+				}),
+				T.length > 0 && /* @__PURE__ */ u("div", {
+					className: "space-y-1",
+					children: T.map((e, i) => /* @__PURE__ */ d("div", {
+						className: "flex items-center justify-between gap-2 p-2 bg-muted/50 rounded-md border",
+						children: [/* @__PURE__ */ d("div", {
+							className: "flex items-center gap-2 flex-1 min-w-0",
+							children: [
+								M(e) && e.url ? /* @__PURE__ */ u("img", {
+									src: e.url,
+									alt: e.name,
+									className: "size-8 object-cover rounded flex-shrink-0"
+								}) : M(e) ? /* @__PURE__ */ u(t, { className: "size-4 text-muted-foreground flex-shrink-0" }) : /* @__PURE__ */ u(n, { className: "size-4 text-muted-foreground flex-shrink-0" }),
+								/* @__PURE__ */ u("span", {
+									className: "text-sm truncate",
+									children: e.name || e.original_name || "File"
+								}),
+								e.size && /* @__PURE__ */ d("span", {
+									className: "text-xs text-muted-foreground",
+									children: [
+										"(",
+										(e.size / 1024).toFixed(1),
+										" KB)"
+									]
+								})
+							]
+						}), /* @__PURE__ */ u(a, {
+							type: "button",
+							variant: "ghost",
+							size: "sm",
+							onClick: (e) => {
+								e.stopPropagation(), j(i);
+							},
+							className: "h-6 w-6 p-0",
+							children: /* @__PURE__ */ u(r, { className: "size-3" })
+						})]
+					}, i))
+				})
+			]
+		})]
+	});
+}
+//#endregion
+export { f as t };

package/dist/FormulaField-BUgt6-Pi.js

@@ -0,0 +1,17 @@
+import { n as e } from "./rolldown-runtime-DnwLefa7.js";
+import { t } from "./src-DyUKLvMN.js";
+import "react";
+import { jsx as n } from "react/jsx-runtime";
+//#region ../fields/src/widgets/FormulaField.tsx
+var r = /* @__PURE__ */ e({ FormulaField: () => i });
+function i({ value: e, field: r, ...i }) {
+	let a = (r || i.schema)?.return_type || "text";
+	if (e == null) return /* @__PURE__ */ n(t, { className: i.className });
+	let o;
+	return o = a === "number" || a === "currency" ? typeof e == "number" ? e.toFixed(2) : String(e) : a === "boolean" ? e ? "Yes" : "No" : a === "date" ? new Date(e).toLocaleDateString() : String(e), /* @__PURE__ */ n("span", {
+		className: `text-sm font-mono text-gray-700 ${i.className || ""}`,
+		children: o
+	});
+}
+//#endregion
+export { r as t };