@questpie/admin 1.1.1 → 2.0.0

package/dist/client/components/fields/relation/displays/table-display.mjs

@@ -0,0 +1,134 @@
+import { Button } from "../../../ui/button.mjs";
+import { Skeleton } from "../../../ui/skeleton.mjs";
+import { formatColumnHeader, resolveCellForColumn } from "./types.mjs";
+import { CollectionEditLink } from "../../../admin-link.mjs";
+import { Icon } from "@iconify/react";
+import * as React$1 from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+
+//#region src/client/components/fields/relation/displays/table-display.tsx
+/**
+* Table Display - table with columns
+*
+* Uses the same cell components as TableView for consistent rendering.
+*/
+function TableSkeleton({ count = 3, columns = ["_title"], hasActions = false }) {
+	const skeletonKeys = React$1.useMemo(() => Array.from({ length: count }, () => crypto.randomUUID()), [count]);
+	return /* @__PURE__ */ jsx("div", {
+		className: "rounded-md border",
+		children: /* @__PURE__ */ jsxs("table", {
+			className: "w-full text-sm",
+			children: [/* @__PURE__ */ jsx("thead", { children: /* @__PURE__ */ jsxs("tr", {
+				className: "border-b border-border/40 bg-card/10 backdrop-blur-sm",
+				children: [columns.map((col) => /* @__PURE__ */ jsx("th", {
+					className: "px-3 py-2 text-left font-medium",
+					children: formatColumnHeader(col)
+				}, col)), hasActions && /* @__PURE__ */ jsx("th", { className: "px-3 py-2 w-20" })]
+			}) }), /* @__PURE__ */ jsx("tbody", { children: skeletonKeys.map((key) => /* @__PURE__ */ jsxs("tr", {
+				className: "border-b last:border-0",
+				children: [columns.map((col) => /* @__PURE__ */ jsx("td", {
+					className: "px-3 py-2",
+					children: /* @__PURE__ */ jsx(Skeleton, { className: "h-4 w-24 rounded" })
+				}, col)), hasActions && /* @__PURE__ */ jsx("td", {
+					className: "px-3 py-2",
+					children: /* @__PURE__ */ jsx("div", {
+						className: "flex items-center justify-end gap-1",
+						children: /* @__PURE__ */ jsx(Skeleton, { className: "h-7 w-7 rounded" })
+					})
+				})]
+			}, key)) })]
+		})
+	});
+}
+/**
+* Cell renderer that uses resolved cell components from field registry
+*/
+function CellRenderer({ item, column, collectionConfig }) {
+	const resolved = React$1.useMemo(() => resolveCellForColumn(column, collectionConfig), [column, collectionConfig]);
+	const value = item[resolved.accessorKey];
+	const { component: CellComponent, fieldDef, needsFieldDef } = resolved;
+	if (needsFieldDef) return /* @__PURE__ */ jsx(CellComponent, {
+		value,
+		row: item,
+		fieldDef
+	});
+	return /* @__PURE__ */ jsx(CellComponent, {
+		value,
+		row: item
+	});
+}
+function TableDisplay({ items, collection, actions, editable = false, columns = ["_title"], linkToDetail = false, collectionConfig, isLoading = false, loadingCount = 3 }) {
+	const hasActions = editable || linkToDetail || !!actions?.onEdit;
+	if (isLoading && items.length === 0) return /* @__PURE__ */ jsx(TableSkeleton, {
+		count: loadingCount,
+		columns,
+		hasActions
+	});
+	return /* @__PURE__ */ jsx("div", {
+		className: "rounded-md border",
+		children: /* @__PURE__ */ jsxs("table", {
+			className: "w-full text-sm",
+			children: [/* @__PURE__ */ jsx("thead", { children: /* @__PURE__ */ jsxs("tr", {
+				className: "border-b border-border/40 bg-card/10 backdrop-blur-sm",
+				children: [columns.map((col) => /* @__PURE__ */ jsx("th", {
+					className: "px-3 py-2 text-left font-medium",
+					children: formatColumnHeader(col)
+				}, col)), hasActions && /* @__PURE__ */ jsx("th", { className: "px-3 py-2 w-20" })]
+			}) }), /* @__PURE__ */ jsx("tbody", { children: items.map((item) => /* @__PURE__ */ jsxs("tr", {
+				className: "border-b last:border-0",
+				children: [columns.map((col) => /* @__PURE__ */ jsx("td", {
+					className: "px-3 py-2",
+					children: /* @__PURE__ */ jsx(CellRenderer, {
+						item,
+						column: col,
+						collectionConfig
+					})
+				}, col)), hasActions && /* @__PURE__ */ jsx("td", {
+					className: "px-3 py-2",
+					children: /* @__PURE__ */ jsxs("div", {
+						className: "flex items-center justify-end gap-1",
+						children: [
+							actions?.onEdit && /* @__PURE__ */ jsx(Button, {
+								type: "button",
+								variant: "ghost",
+								size: "icon",
+								className: "h-7 w-7",
+								onClick: () => actions.onEdit?.(item),
+								"aria-label": "Edit item",
+								children: /* @__PURE__ */ jsx(Icon, {
+									icon: "ph:pencil",
+									className: "size-4"
+								})
+							}),
+							editable && actions?.onRemove && /* @__PURE__ */ jsx(Button, {
+								type: "button",
+								variant: "ghost",
+								size: "icon",
+								className: "h-7 w-7",
+								onClick: () => actions.onRemove?.(item),
+								"aria-label": "Remove item",
+								children: /* @__PURE__ */ jsx(Icon, {
+									icon: "ph:x",
+									className: "size-4"
+								})
+							}),
+							!editable && linkToDetail && !actions?.onEdit && /* @__PURE__ */ jsx(CollectionEditLink, {
+								collection,
+								id: item.id,
+								className: "text-primary hover:underline",
+								children: /* @__PURE__ */ jsx(Icon, {
+									icon: "ph:arrow-right",
+									className: "size-4"
+								})
+							})
+						]
+					})
+				})]
+			}, item.id)) })]
+		})
+	});
+}
+
+//#endregion
+export { TableDisplay };
+//# sourceMappingURL=table-display.mjs.map

package/dist/client/components/fields/relation/displays/table-display.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"table-display.mjs","names":["React"],"sources":["../../../../../../src/client/components/fields/relation/displays/table-display.tsx"],"sourcesContent":["/**\n * Table Display - table with columns\n *\n * Uses the same cell components as TableView for consistent rendering.\n */\n\nimport { Icon } from \"@iconify/react\";\nimport * as React from \"react\";\nimport { CollectionEditLink } from \"../../../admin-link\";\nimport { Button } from \"../../../ui/button\";\nimport { Skeleton } from \"../../../ui/skeleton\";\nimport {\n\tformatColumnHeader,\n\ttype RelationDisplayProps,\n\tresolveCellForColumn,\n} from \"./types\";\n\nfunction TableSkeleton({\n\tcount = 3,\n\tcolumns = [\"_title\"],\n\thasActions = false,\n}: {\n\tcount?: number;\n\tcolumns?: string[];\n\thasActions?: boolean;\n}) {\n\tconst skeletonKeys = React.useMemo(\n\t\t() => Array.from({ length: count }, () => crypto.randomUUID()),\n\t\t[count],\n\t);\n\n\treturn (\n\t\t<div className=\"rounded-md border\">\n\t\t\t<table className=\"w-full text-sm\">\n\t\t\t\t<thead>\n\t\t\t\t\t<tr className=\"border-b border-border/40 bg-card/10 backdrop-blur-sm\">\n\t\t\t\t\t\t{columns.map((col) => (\n\t\t\t\t\t\t\t<th key={col} className=\"px-3 py-2 text-left font-medium\">\n\t\t\t\t\t\t\t\t{formatColumnHeader(col)}\n\t\t\t\t\t\t\t</th>\n\t\t\t\t\t\t))}\n\t\t\t\t\t\t{hasActions && <th className=\"px-3 py-2 w-20\" />}\n\t\t\t\t\t</tr>\n\t\t\t\t</thead>\n\t\t\t\t<tbody>\n\t\t\t\t\t{skeletonKeys.map((key) => (\n\t\t\t\t\t\t<tr key={key} className=\"border-b last:border-0\">\n\t\t\t\t\t\t\t{columns.map((col) => (\n\t\t\t\t\t\t\t\t<td key={col} className=\"px-3 py-2\">\n\t\t\t\t\t\t\t\t\t<Skeleton className=\"h-4 w-24 rounded\" />\n\t\t\t\t\t\t\t\t</td>\n\t\t\t\t\t\t\t))}\n\t\t\t\t\t\t\t{hasActions && (\n\t\t\t\t\t\t\t\t<td className=\"px-3 py-2\">\n\t\t\t\t\t\t\t\t\t<div className=\"flex items-center justify-end gap-1\">\n\t\t\t\t\t\t\t\t\t\t<Skeleton className=\"h-7 w-7 rounded\" />\n\t\t\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t\t\t</td>\n\t\t\t\t\t\t\t)}\n\t\t\t\t\t\t</tr>\n\t\t\t\t\t))}\n\t\t\t\t</tbody>\n\t\t\t</table>\n\t\t</div>\n\t);\n}\n\n/**\n * Cell renderer that uses resolved cell components from field registry\n */\nfunction CellRenderer({\n\titem,\n\tcolumn,\n\tcollectionConfig,\n}: {\n\titem: any;\n\tcolumn: string;\n\tcollectionConfig?: RelationDisplayProps[\"collectionConfig\"];\n}) {\n\tconst resolved = React.useMemo(\n\t\t() => resolveCellForColumn(column, collectionConfig),\n\t\t[column, collectionConfig],\n\t);\n\n\tconst value = item[resolved.accessorKey];\n\tconst { component: CellComponent, fieldDef, needsFieldDef } = resolved;\n\n\tif (needsFieldDef) {\n\t\treturn <CellComponent value={value} row={item} fieldDef={fieldDef} />;\n\t}\n\n\treturn <CellComponent value={value} row={item} />;\n}\n\nexport function TableDisplay({\n\titems,\n\tcollection,\n\tactions,\n\teditable = false,\n\tcolumns = [\"_title\"],\n\tlinkToDetail = false,\n\tcollectionConfig,\n\tisLoading = false,\n\tloadingCount = 3,\n}: RelationDisplayProps) {\n\tconst hasActions = editable || linkToDetail || !!actions?.onEdit;\n\n\t// Show skeleton when loading and no items\n\tif (isLoading && items.length === 0) {\n\t\treturn (\n\t\t\t<TableSkeleton\n\t\t\t\tcount={loadingCount}\n\t\t\t\tcolumns={columns}\n\t\t\t\thasActions={hasActions}\n\t\t\t/>\n\t\t);\n\t}\n\n\treturn (\n\t\t<div className=\"rounded-md border\">\n\t\t\t<table className=\"w-full text-sm\">\n\t\t\t\t<thead>\n\t\t\t\t\t<tr className=\"border-b border-border/40 bg-card/10 backdrop-blur-sm\">\n\t\t\t\t\t\t{columns.map((col) => (\n\t\t\t\t\t\t\t<th key={col} className=\"px-3 py-2 text-left font-medium\">\n\t\t\t\t\t\t\t\t{formatColumnHeader(col)}\n\t\t\t\t\t\t\t</th>\n\t\t\t\t\t\t))}\n\t\t\t\t\t\t{hasActions && <th className=\"px-3 py-2 w-20\" />}\n\t\t\t\t\t</tr>\n\t\t\t\t</thead>\n\t\t\t\t<tbody>\n\t\t\t\t\t{items.map((item) => (\n\t\t\t\t\t\t<tr key={item.id} className=\"border-b last:border-0\">\n\t\t\t\t\t\t\t{columns.map((col) => (\n\t\t\t\t\t\t\t\t<td key={col} className=\"px-3 py-2\">\n\t\t\t\t\t\t\t\t\t<CellRenderer\n\t\t\t\t\t\t\t\t\t\titem={item}\n\t\t\t\t\t\t\t\t\t\tcolumn={col}\n\t\t\t\t\t\t\t\t\t\tcollectionConfig={collectionConfig}\n\t\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t\t</td>\n\t\t\t\t\t\t\t))}\n\t\t\t\t\t\t\t{hasActions && (\n\t\t\t\t\t\t\t\t<td className=\"px-3 py-2\">\n\t\t\t\t\t\t\t\t\t<div className=\"flex items-center justify-end gap-1\">\n\t\t\t\t\t\t\t\t\t\t{/* Edit button */}\n\t\t\t\t\t\t\t\t\t\t{actions?.onEdit && (\n\t\t\t\t\t\t\t\t\t\t\t<Button\n\t\t\t\t\t\t\t\t\t\t\t\ttype=\"button\"\n\t\t\t\t\t\t\t\t\t\t\t\tvariant=\"ghost\"\n\t\t\t\t\t\t\t\t\t\t\t\tsize=\"icon\"\n\t\t\t\t\t\t\t\t\t\t\t\tclassName=\"h-7 w-7\"\n\t\t\t\t\t\t\t\t\t\t\t\tonClick={() => actions.onEdit?.(item)}\n\t\t\t\t\t\t\t\t\t\t\t\taria-label=\"Edit item\"\n\t\t\t\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t\t\t\t<Icon icon=\"ph:pencil\" className=\"size-4\" />\n\t\t\t\t\t\t\t\t\t\t\t</Button>\n\t\t\t\t\t\t\t\t\t\t)}\n\n\t\t\t\t\t\t\t\t\t\t{/* Remove button (editable mode) */}\n\t\t\t\t\t\t\t\t\t\t{editable && actions?.onRemove && (\n\t\t\t\t\t\t\t\t\t\t\t<Button\n\t\t\t\t\t\t\t\t\t\t\t\ttype=\"button\"\n\t\t\t\t\t\t\t\t\t\t\t\tvariant=\"ghost\"\n\t\t\t\t\t\t\t\t\t\t\t\tsize=\"icon\"\n\t\t\t\t\t\t\t\t\t\t\t\tclassName=\"h-7 w-7\"\n\t\t\t\t\t\t\t\t\t\t\t\tonClick={() => actions.onRemove?.(item)}\n\t\t\t\t\t\t\t\t\t\t\t\taria-label=\"Remove item\"\n\t\t\t\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t\t\t\t<Icon icon=\"ph:x\" className=\"size-4\" />\n\t\t\t\t\t\t\t\t\t\t\t</Button>\n\t\t\t\t\t\t\t\t\t\t)}\n\n\t\t\t\t\t\t\t\t\t\t{/* Link to detail (non-editable mode) */}\n\t\t\t\t\t\t\t\t\t\t{!editable && linkToDetail && !actions?.onEdit && (\n\t\t\t\t\t\t\t\t\t\t\t<CollectionEditLink\n\t\t\t\t\t\t\t\t\t\t\t\tcollection={collection as any}\n\t\t\t\t\t\t\t\t\t\t\t\tid={item.id}\n\t\t\t\t\t\t\t\t\t\t\t\tclassName=\"text-primary hover:underline\"\n\t\t\t\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t\t\t\t<Icon icon=\"ph:arrow-right\" className=\"size-4\" />\n\t\t\t\t\t\t\t\t\t\t\t</CollectionEditLink>\n\t\t\t\t\t\t\t\t\t\t)}\n\t\t\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t\t\t</td>\n\t\t\t\t\t\t\t)}\n\t\t\t\t\t\t</tr>\n\t\t\t\t\t))}\n\t\t\t\t</tbody>\n\t\t\t</table>\n\t\t</div>\n\t);\n}\n"],"mappings":";;;;;;;;;;;;;;AAiBA,SAAS,cAAc,EACtB,QAAQ,GACR,UAAU,CAAC,SAAS,EACpB,aAAa,SAKX;CACF,MAAM,eAAeA,QAAM,cACpB,MAAM,KAAK,EAAE,QAAQ,OAAO,QAAQ,OAAO,YAAY,CAAC,EAC9D,CAAC,MAAM,CACP;AAED,QACC,oBAAC;EAAI,WAAU;YACd,qBAAC;GAAM,WAAU;cAChB,oBAAC,qBACA,qBAAC;IAAG,WAAU;eACZ,QAAQ,KAAK,QACb,oBAAC;KAAa,WAAU;eACtB,mBAAmB,IAAI;OADhB,IAEJ,CACJ,EACD,cAAc,oBAAC,QAAG,WAAU,mBAAmB;KAC5C,GACE,EACR,oBAAC,qBACC,aAAa,KAAK,QAClB,qBAAC;IAAa,WAAU;eACtB,QAAQ,KAAK,QACb,oBAAC;KAAa,WAAU;eACvB,oBAAC,YAAS,WAAU,qBAAqB;OADjC,IAEJ,CACJ,EACD,cACA,oBAAC;KAAG,WAAU;eACb,oBAAC;MAAI,WAAU;gBACd,oBAAC,YAAS,WAAU,oBAAoB;OACnC;MACF;MAXE,IAaJ,CACJ,GACK;IACD;GACH;;;;;AAOR,SAAS,aAAa,EACrB,MACA,QACA,oBAKE;CACF,MAAM,WAAWA,QAAM,cAChB,qBAAqB,QAAQ,iBAAiB,EACpD,CAAC,QAAQ,iBAAiB,CAC1B;CAED,MAAM,QAAQ,KAAK,SAAS;CAC5B,MAAM,EAAE,WAAW,eAAe,UAAU,kBAAkB;AAE9D,KAAI,cACH,QAAO,oBAAC;EAAqB;EAAO,KAAK;EAAgB;GAAY;AAGtE,QAAO,oBAAC;EAAqB;EAAO,KAAK;GAAQ;;AAGlD,SAAgB,aAAa,EAC5B,OACA,YACA,SACA,WAAW,OACX,UAAU,CAAC,SAAS,EACpB,eAAe,OACf,kBACA,YAAY,OACZ,eAAe,KACS;CACxB,MAAM,aAAa,YAAY,gBAAgB,CAAC,CAAC,SAAS;AAG1D,KAAI,aAAa,MAAM,WAAW,EACjC,QACC,oBAAC;EACA,OAAO;EACE;EACG;GACX;AAIJ,QACC,oBAAC;EAAI,WAAU;YACd,qBAAC;GAAM,WAAU;cAChB,oBAAC,qBACA,qBAAC;IAAG,WAAU;eACZ,QAAQ,KAAK,QACb,oBAAC;KAAa,WAAU;eACtB,mBAAmB,IAAI;OADhB,IAEJ,CACJ,EACD,cAAc,oBAAC,QAAG,WAAU,mBAAmB;KAC5C,GACE,EACR,oBAAC,qBACC,MAAM,KAAK,SACX,qBAAC;IAAiB,WAAU;eAC1B,QAAQ,KAAK,QACb,oBAAC;KAAa,WAAU;eACvB,oBAAC;MACM;MACN,QAAQ;MACU;OACjB;OALM,IAMJ,CACJ,EACD,cACA,oBAAC;KAAG,WAAU;eACb,qBAAC;MAAI,WAAU;;OAEb,SAAS,UACT,oBAAC;QACA,MAAK;QACL,SAAQ;QACR,MAAK;QACL,WAAU;QACV,eAAe,QAAQ,SAAS,KAAK;QACrC,cAAW;kBAEX,oBAAC;SAAK,MAAK;SAAY,WAAU;UAAW;SACpC;OAIT,YAAY,SAAS,YACrB,oBAAC;QACA,MAAK;QACL,SAAQ;QACR,MAAK;QACL,WAAU;QACV,eAAe,QAAQ,WAAW,KAAK;QACvC,cAAW;kBAEX,oBAAC;SAAK,MAAK;SAAO,WAAU;UAAW;SAC/B;OAIT,CAAC,YAAY,gBAAgB,CAAC,SAAS,UACvC,oBAAC;QACY;QACZ,IAAI,KAAK;QACT,WAAU;kBAEV,oBAAC;SAAK,MAAK;SAAiB,WAAU;UAAW;SAC7B;;OAEjB;MACF;MApDE,KAAK,GAsDT,CACJ,GACK;IACD;GACH"}

package/dist/client/components/fields/relation/displays/types.d.mts

@@ -0,0 +1,22 @@
+import "../../../../../server/index.mjs";
+import "../../../../builder/field/field.mjs";
+import "react";
+
+//#region src/client/components/fields/relation/displays/types.d.ts
+
+/**
+ * Display mode for relation items
+ */
+type RelationDisplayMode = "chips" | "list" | "table" | "cards" | "grid";
+/**
+ * Field mapping for cards/grid display
+ */
+interface RelationDisplayFields {
+  title?: string;
+  subtitle?: string;
+  image?: string;
+  meta?: string[];
+}
+//#endregion
+export { RelationDisplayFields, RelationDisplayMode };
+//# sourceMappingURL=types.d.mts.map

package/dist/client/components/fields/relation/displays/types.d.mts.map

@@ -0,0 +1 @@
+{"version":3,"file":"types.d.mts","names":[],"sources":["../../../../../../src/client/components/fields/relation/displays/types.ts"],"sourcesContent":[],"mappings":";;;;;;;;;KAqBY,mBAAA;;;;UAcK,qBAAA"}

package/dist/client/components/fields/relation/displays/types.mjs

@@ -0,0 +1,73 @@
+import { formatLabel } from "../../../../lib/utils.mjs";
+import { DefaultCell } from "../../../../views/collection/cells/primitive-cells.mjs";
+
+//#region src/client/components/fields/relation/displays/types.ts
+/**
+* Get display value from item (_title fallback chain)
+*/
+function getItemDisplayValue(item) {
+	return item?._title || item?.name || item?.title || item?.id || "";
+}
+/**
+* Format column header (camelCase to Title Case)
+*/
+function formatColumnHeader(column) {
+	if (column === "_title") return "Name";
+	return formatLabel(column);
+}
+/**
+* Format cell value for display
+*/
+function formatCellValue(value) {
+	if (value === null || value === void 0) return "-";
+	if (typeof value === "boolean") return value ? "Yes" : "No";
+	if (value instanceof Date) return value.toLocaleDateString();
+	if (typeof value === "object") return JSON.stringify(value);
+	return String(value);
+}
+/**
+* Get image URL from item field
+*/
+function getImageUrl(item, imageField) {
+	if (!imageField) return null;
+	const imageValue = item[imageField];
+	if (typeof imageValue === "string") return imageValue;
+	if (imageValue?.url) return imageValue.url;
+	if (imageValue?.key) return imageValue.key;
+	return null;
+}
+/**
+* Field types that need fieldDef passed to their cell component
+*/
+const FIELD_TYPES_NEEDING_FIELD_DEF = new Set([
+	"object",
+	"array",
+	"relation",
+	"reverseRelation"
+]);
+/**
+* Resolve cell component for a column based on field config
+* Uses the same priority as buildColumns:
+* 1. Cell from field registry (fieldDef.cell.component)
+* 2. DefaultCell fallback
+*/
+function resolveCellForColumn(column, collectionConfig) {
+	const fieldDef = collectionConfig?.fields?.[column];
+	const fieldType = fieldDef?.name ?? "text";
+	const fieldOptions = fieldDef?.["~options"] ?? {};
+	let component;
+	if (fieldDef?.cell?.component) component = fieldDef.cell.component;
+	else component = DefaultCell;
+	const needsFieldDef = FIELD_TYPES_NEEDING_FIELD_DEF.has(fieldType);
+	const accessorKey = fieldType === "relation" && fieldOptions.relationName ? fieldOptions.relationName : column;
+	return {
+		component,
+		fieldDef,
+		needsFieldDef,
+		accessorKey
+	};
+}
+
+//#endregion
+export { formatCellValue, formatColumnHeader, getImageUrl, getItemDisplayValue, resolveCellForColumn };
+//# sourceMappingURL=types.mjs.map

package/dist/client/components/fields/relation/displays/types.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"types.mjs","names":["component: React.ComponentType<{\n\t\tvalue: unknown;\n\t\trow?: unknown;\n\t\tfieldDef?: FieldDefinition;\n\t}>","accessorKey: string"],"sources":["../../../../../../src/client/components/fields/relation/displays/types.ts"],"sourcesContent":["/**\n * Shared types for relation display components\n */\n\nimport type * as React from \"react\";\nimport type { ComponentReference } from \"#questpie/admin/server\";\nimport type { FieldDefinition } from \"../../../../builder/field/field\";\nimport { formatLabel } from \"../../../../lib/utils\";\nimport { DefaultCell } from \"../../../../views/collection/cells\";\n\n/**\n * Icon type that can be a React component or a server-defined ComponentReference\n */\nexport type IconType =\n\t| React.ComponentType<{ className?: string }>\n\t| ComponentReference\n\t| undefined;\n\n/**\n * Display mode for relation items\n */\nexport type RelationDisplayMode = \"chips\" | \"list\" | \"table\" | \"cards\" | \"grid\";\n\n/**\n * Action handlers for relation items\n */\nexport interface RelationItemActions {\n\tonEdit?: (item: any) => void;\n\tonRemove?: (item: any) => void;\n\tonNavigate?: (item: any) => void;\n}\n\n/**\n * Field mapping for cards/grid display\n */\nexport interface RelationDisplayFields {\n\ttitle?: string;\n\tsubtitle?: string;\n\timage?: string;\n\tmeta?: string[];\n}\n\n/**\n * Collection field definitions for cell rendering\n */\nexport interface CollectionFieldsConfig {\n\tfields?: Record<string, FieldDefinition>;\n}\n\n/**\n * Common props for all display components\n */\nexport interface RelationDisplayProps {\n\t/**\n\t * Items to display\n\t */\n\titems: any[];\n\n\t/**\n\t * Collection name for navigation links\n\t */\n\tcollection: string;\n\n\t/**\n\t * Collection icon (React component or server ComponentReference)\n\t */\n\tcollectionIcon?: IconType;\n\n\t/**\n\t * Action handlers\n\t */\n\tactions?: RelationItemActions;\n\n\t/**\n\t * Whether items are editable (shows edit/remove buttons)\n\t */\n\teditable?: boolean;\n\n\t/**\n\t * Whether items are orderable (shows drag handle)\n\t */\n\torderable?: boolean;\n\n\t/**\n\t * Columns to show in table display\n\t */\n\tcolumns?: string[];\n\n\t/**\n\t * Field mapping for cards/grid display\n\t */\n\tfields?: RelationDisplayFields;\n\n\t/**\n\t * Number of columns for grid/cards layout\n\t */\n\tgridColumns?: 1 | 2 | 3 | 4;\n\n\t/**\n\t * Whether to show navigation link to detail page\n\t */\n\tlinkToDetail?: boolean;\n\n\t/**\n\t * Custom render function for items\n\t */\n\trenderItem?: (item: any, index: number) => React.ReactNode;\n\n\t/**\n\t * Collection config for cell rendering (enables proper cell components)\n\t */\n\tcollectionConfig?: CollectionFieldsConfig;\n\n\t/**\n\t * Whether items are being loaded\n\t */\n\tisLoading?: boolean;\n\n\t/**\n\t * Number of skeleton items to show when loading\n\t */\n\tloadingCount?: number;\n}\n\n/**\n * Get display value from item (_title fallback chain)\n */\nexport function getItemDisplayValue(item: any): string {\n\treturn item?._title || item?.name || item?.title || item?.id || \"\";\n}\n\n/**\n * Format column header (camelCase to Title Case)\n */\nexport function formatColumnHeader(column: string): string {\n\tif (column === \"_title\") return \"Name\";\n\treturn formatLabel(column);\n}\n\n/**\n * Format cell value for display\n */\nexport function formatCellValue(value: unknown): string {\n\tif (value === null || value === undefined) return \"-\";\n\tif (typeof value === \"boolean\") return value ? \"Yes\" : \"No\";\n\tif (value instanceof Date) return value.toLocaleDateString();\n\tif (typeof value === \"object\") return JSON.stringify(value);\n\treturn String(value);\n}\n\n/**\n * Get image URL from item field\n */\nexport function getImageUrl(item: any, imageField?: string): string | null {\n\tif (!imageField) return null;\n\tconst imageValue = item[imageField];\n\tif (typeof imageValue === \"string\") return imageValue;\n\tif (imageValue?.url) return imageValue.url;\n\tif (imageValue?.key) return imageValue.key;\n\treturn null;\n}\n\n/**\n * Field types that need fieldDef passed to their cell component\n */\nconst FIELD_TYPES_NEEDING_FIELD_DEF = new Set([\n\t\"object\",\n\t\"array\",\n\t\"relation\",\n\t\"reverseRelation\",\n]);\n\n/**\n * Resolved cell info for rendering\n */\nexport interface ResolvedCell {\n\tcomponent: React.ComponentType<{\n\t\tvalue: unknown;\n\t\trow?: unknown;\n\t\tfieldDef?: FieldDefinition;\n\t}>;\n\tfieldDef?: FieldDefinition;\n\tneedsFieldDef: boolean;\n\taccessorKey: string;\n}\n\n/**\n * Resolve cell component for a column based on field config\n * Uses the same priority as buildColumns:\n * 1. Cell from field registry (fieldDef.cell.component)\n * 2. DefaultCell fallback\n */\nexport function resolveCellForColumn(\n\tcolumn: string,\n\tcollectionConfig?: CollectionFieldsConfig,\n): ResolvedCell {\n\tconst fieldDef = collectionConfig?.fields?.[column];\n\tconst fieldType = fieldDef?.name ?? \"text\";\n\tconst fieldOptions = (fieldDef as any)?.[\"~options\"] ?? {};\n\n\t// Resolve cell component\n\tlet component: React.ComponentType<{\n\t\tvalue: unknown;\n\t\trow?: unknown;\n\t\tfieldDef?: FieldDefinition;\n\t}>;\n\n\tif (fieldDef?.cell?.component) {\n\t\t// Cell from field registry\n\t\tcomponent = fieldDef.cell.component as React.ComponentType<{\n\t\t\tvalue: unknown;\n\t\t\trow?: unknown;\n\t\t\tfieldDef?: FieldDefinition;\n\t\t}>;\n\t} else {\n\t\t// DefaultCell fallback\n\t\tcomponent = DefaultCell;\n\t}\n\n\tconst needsFieldDef = FIELD_TYPES_NEEDING_FIELD_DEF.has(fieldType);\n\n\t// For relation fields, use relationName as accessor if specified\n\tconst accessorKey: string =\n\t\tfieldType === \"relation\" && fieldOptions.relationName\n\t\t\t? fieldOptions.relationName\n\t\t\t: column;\n\n\treturn {\n\t\tcomponent,\n\t\tfieldDef,\n\t\tneedsFieldDef,\n\t\taccessorKey,\n\t};\n}\n"],"mappings":";;;;;;;AA+HA,SAAgB,oBAAoB,MAAmB;AACtD,QAAO,MAAM,UAAU,MAAM,QAAQ,MAAM,SAAS,MAAM,MAAM;;;;;AAMjE,SAAgB,mBAAmB,QAAwB;AAC1D,KAAI,WAAW,SAAU,QAAO;AAChC,QAAO,YAAY,OAAO;;;;;AAM3B,SAAgB,gBAAgB,OAAwB;AACvD,KAAI,UAAU,QAAQ,UAAU,OAAW,QAAO;AAClD,KAAI,OAAO,UAAU,UAAW,QAAO,QAAQ,QAAQ;AACvD,KAAI,iBAAiB,KAAM,QAAO,MAAM,oBAAoB;AAC5D,KAAI,OAAO,UAAU,SAAU,QAAO,KAAK,UAAU,MAAM;AAC3D,QAAO,OAAO,MAAM;;;;;AAMrB,SAAgB,YAAY,MAAW,YAAoC;AAC1E,KAAI,CAAC,WAAY,QAAO;CACxB,MAAM,aAAa,KAAK;AACxB,KAAI,OAAO,eAAe,SAAU,QAAO;AAC3C,KAAI,YAAY,IAAK,QAAO,WAAW;AACvC,KAAI,YAAY,IAAK,QAAO,WAAW;AACvC,QAAO;;;;;AAMR,MAAM,gCAAgC,IAAI,IAAI;CAC7C;CACA;CACA;CACA;CACA,CAAC;;;;;;;AAsBF,SAAgB,qBACf,QACA,kBACe;CACf,MAAM,WAAW,kBAAkB,SAAS;CAC5C,MAAM,YAAY,UAAU,QAAQ;CACpC,MAAM,eAAgB,WAAmB,eAAe,EAAE;CAG1D,IAAIA;AAMJ,KAAI,UAAU,MAAM,UAEnB,aAAY,SAAS,KAAK;KAO1B,aAAY;CAGb,MAAM,gBAAgB,8BAA8B,IAAI,UAAU;CAGlE,MAAMC,cACL,cAAc,cAAc,aAAa,eACtC,aAAa,eACb;AAEJ,QAAO;EACN;EACA;EACA;EACA;EACA"}

package/dist/client/components/fields/relation/index.d.mts

@@ -0,0 +1,3 @@
+import { RelationDisplayFields, RelationDisplayMode } from "./displays/types.mjs";
+import "./displays/index.mjs";
+import "./relation-items-display.mjs";

package/dist/client/components/fields/relation/relation-items-display.d.mts

@@ -0,0 +1,5 @@
+import "../../../i18n/types.mjs";
+import { RelationDisplayFields, RelationDisplayMode } from "./displays/types.mjs";
+import "./displays/index.mjs";
+import "react";
+import "react/jsx-runtime";

package/dist/client/components/fields/relation/relation-items-display.mjs

@@ -0,0 +1,47 @@
+import { useResolveText } from "../../../i18n/hooks.mjs";
+import { ChipsDisplay } from "./displays/chips-display.mjs";
+import { ListDisplay } from "./displays/list-display.mjs";
+import { TableDisplay } from "./displays/table-display.mjs";
+import { CardsDisplay } from "./displays/cards-display.mjs";
+import { GridDisplay } from "./displays/grid-display.mjs";
+import { jsx } from "react/jsx-runtime";
+
+//#region src/client/components/fields/relation/relation-items-display.tsx
+function RelationItemsDisplay({ display = "list", items, collection, collectionIcon, actions, editable = false, orderable = false, columns, fields, gridColumns, linkToDetail = false, renderItem, emptyMessage = "No items", collectionConfig, isLoading = false, loadingCount }) {
+	const resolvedEmptyMessage = useResolveText()(emptyMessage ?? "No items");
+	const displayProps = {
+		items,
+		collection,
+		collectionIcon,
+		actions,
+		editable,
+		orderable,
+		columns: columns || ["_title"],
+		fields,
+		gridColumns,
+		linkToDetail,
+		renderItem,
+		collectionConfig,
+		isLoading,
+		loadingCount
+	};
+	if (!isLoading && (!items || items.length === 0)) return /* @__PURE__ */ jsx("div", {
+		className: "rounded-lg border border-dashed p-4 text-center",
+		children: /* @__PURE__ */ jsx("p", {
+			className: "text-sm text-muted-foreground",
+			children: resolvedEmptyMessage
+		})
+	});
+	switch (display) {
+		case "chips": return /* @__PURE__ */ jsx(ChipsDisplay, { ...displayProps });
+		case "table": return /* @__PURE__ */ jsx(TableDisplay, { ...displayProps });
+		case "cards": return /* @__PURE__ */ jsx(CardsDisplay, { ...displayProps });
+		case "grid": return /* @__PURE__ */ jsx(GridDisplay, { ...displayProps });
+		case "list":
+		default: return /* @__PURE__ */ jsx(ListDisplay, { ...displayProps });
+	}
+}
+
+//#endregion
+export { RelationItemsDisplay };
+//# sourceMappingURL=relation-items-display.mjs.map

package/dist/client/components/fields/relation/relation-items-display.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"relation-items-display.mjs","names":["displayProps: RelationDisplayProps"],"sources":["../../../../../src/client/components/fields/relation/relation-items-display.tsx"],"sourcesContent":["/**\n * RelationItemsDisplay Component\n *\n * Unified display component for relation items.\n * Renders items using the specified display mode.\n *\n * Used by:\n * - RelationPicker (editable M:N relations)\n * - ReverseRelationField (read-only reverse relations)\n */\n\nimport type * as React from \"react\";\nimport { useResolveText } from \"../../../i18n/hooks\";\nimport type { I18nText } from \"../../../i18n/types\";\nimport type {\n\tCollectionFieldsConfig,\n\tIconType,\n\tRelationDisplayFields,\n\tRelationDisplayMode,\n\tRelationDisplayProps,\n\tRelationItemActions,\n} from \"./displays\";\nimport { CardsDisplay } from \"./displays/cards-display\";\nimport { ChipsDisplay } from \"./displays/chips-display\";\nimport { GridDisplay } from \"./displays/grid-display\";\nimport { ListDisplay } from \"./displays/list-display\";\nimport { TableDisplay } from \"./displays/table-display\";\n\nexport interface RelationItemsDisplayProps {\n\t/**\n\t * Display mode\n\t */\n\tdisplay?: RelationDisplayMode;\n\n\t/**\n\t * Items to display\n\t */\n\titems: any[];\n\n\t/**\n\t * Collection name\n\t */\n\tcollection: string;\n\n\t/**\n\t * Collection icon (React component or server ComponentReference)\n\t */\n\tcollectionIcon?: IconType;\n\n\t/**\n\t * Action handlers\n\t */\n\tactions?: RelationItemActions;\n\n\t/**\n\t * Whether items are editable (shows edit/remove buttons inline)\n\t */\n\teditable?: boolean;\n\n\t/**\n\t * Whether items can be reordered (shows drag handle)\n\t */\n\torderable?: boolean;\n\n\t/**\n\t * Columns for table display\n\t */\n\tcolumns?: string[];\n\n\t/**\n\t * Field mapping for cards/grid display\n\t */\n\tfields?: RelationDisplayFields;\n\n\t/**\n\t * Number of columns for grid/cards layout\n\t */\n\tgridColumns?: 1 | 2 | 3 | 4;\n\n\t/**\n\t * Show link to detail page (for read-only displays)\n\t */\n\tlinkToDetail?: boolean;\n\n\t/**\n\t * Custom render function for list items\n\t */\n\trenderItem?: (item: any, index: number) => React.ReactNode;\n\n\t/**\n\t * Message to show when no items\n\t */\n\temptyMessage?: I18nText;\n\n\t/**\n\t * Collection config for cell rendering (enables proper cell components in table mode)\n\t */\n\tcollectionConfig?: CollectionFieldsConfig;\n\n\t/**\n\t * Whether items are being loaded\n\t */\n\tisLoading?: boolean;\n\n\t/**\n\t * Number of skeleton items to show when loading\n\t */\n\tloadingCount?: number;\n}\n\nexport function RelationItemsDisplay({\n\tdisplay = \"list\",\n\titems,\n\tcollection,\n\tcollectionIcon,\n\tactions,\n\teditable = false,\n\torderable = false,\n\tcolumns,\n\tfields,\n\tgridColumns,\n\tlinkToDetail = false,\n\trenderItem,\n\temptyMessage = \"No items\",\n\tcollectionConfig,\n\tisLoading = false,\n\tloadingCount,\n}: RelationItemsDisplayProps) {\n\tconst resolveText = useResolveText();\n\tconst resolvedEmptyMessage = resolveText(emptyMessage ?? \"No items\");\n\n\t// Show loading state (skeletons) when loading\n\t// Pass to display components so they can render skeletons\n\tconst displayProps: RelationDisplayProps = {\n\t\titems,\n\t\tcollection,\n\t\tcollectionIcon,\n\t\tactions,\n\t\teditable,\n\t\torderable,\n\t\tcolumns: columns || [\"_title\"],\n\t\tfields,\n\t\tgridColumns,\n\t\tlinkToDetail,\n\t\trenderItem,\n\t\tcollectionConfig,\n\t\tisLoading,\n\t\tloadingCount,\n\t};\n\n\t// Empty state - only show when not loading and no items\n\tif (!isLoading && (!items || items.length === 0)) {\n\t\treturn (\n\t\t\t<div className=\"rounded-lg border border-dashed p-4 text-center\">\n\t\t\t\t<p className=\"text-sm text-muted-foreground\">{resolvedEmptyMessage}</p>\n\t\t\t</div>\n\t\t);\n\t}\n\n\tswitch (display) {\n\t\tcase \"chips\":\n\t\t\treturn <ChipsDisplay {...displayProps} />;\n\t\tcase \"table\":\n\t\t\treturn <TableDisplay {...displayProps} />;\n\t\tcase \"cards\":\n\t\t\treturn <CardsDisplay {...displayProps} />;\n\t\tcase \"grid\":\n\t\t\treturn <GridDisplay {...displayProps} />;\n\t\tcase \"list\":\n\t\tdefault:\n\t\t\treturn <ListDisplay {...displayProps} />;\n\t}\n}\n\n// Re-export types for convenience\nexport type {\n\tCollectionFieldsConfig,\n\tRelationDisplayFields,\n\tRelationDisplayMode,\n\tRelationDisplayProps,\n\tRelationItemActions,\n} from \"./displays\";\n"],"mappings":";;;;;;;;;AA8GA,SAAgB,qBAAqB,EACpC,UAAU,QACV,OACA,YACA,gBACA,SACA,WAAW,OACX,YAAY,OACZ,SACA,QACA,aACA,eAAe,OACf,YACA,eAAe,YACf,kBACA,YAAY,OACZ,gBAC6B;CAE7B,MAAM,uBADc,gBAAgB,CACK,gBAAgB,WAAW;CAIpE,MAAMA,eAAqC;EAC1C;EACA;EACA;EACA;EACA;EACA;EACA,SAAS,WAAW,CAAC,SAAS;EAC9B;EACA;EACA;EACA;EACA;EACA;EACA;EACA;AAGD,KAAI,CAAC,cAAc,CAAC,SAAS,MAAM,WAAW,GAC7C,QACC,oBAAC;EAAI,WAAU;YACd,oBAAC;GAAE,WAAU;aAAiC;IAAyB;GAClE;AAIR,SAAQ,SAAR;EACC,KAAK,QACJ,QAAO,oBAAC,gBAAa,GAAI,eAAgB;EAC1C,KAAK,QACJ,QAAO,oBAAC,gBAAa,GAAI,eAAgB;EAC1C,KAAK,QACJ,QAAO,oBAAC,gBAAa,GAAI,eAAgB;EAC1C,KAAK,OACJ,QAAO,oBAAC,eAAY,GAAI,eAAgB;EACzC,KAAK;EACL,QACC,QAAO,oBAAC,eAAY,GAAI,eAAgB"}

package/dist/client/components/fields/relation-field.d.mts

@@ -0,0 +1,134 @@
+import * as React$1 from "react";
+import { Control } from "react-hook-form";
+import * as react_jsx_runtime217 from "react/jsx-runtime";
+import { Questpie } from "questpie";
+
+//#region src/client/components/fields/relation-field.d.ts
+
+type RelationFieldProps<T extends Questpie<any>> = {
+  /**
+   * Field name (for react-hook-form)
+   */
+  name: string;
+  /**
+   * Target collection name
+   */
+  targetCollection: string;
+  /**
+   * Relation type:
+   * - "single" (one-to-one) - uses RelationSelect
+   * - "multiple" (one-to-many, many-to-many) - uses RelationPicker
+   */
+  type: "single" | "multiple";
+  /**
+   * Label for the field
+   */
+  label?: string;
+  /**
+   * Description/help text
+   */
+  description?: string;
+  /**
+   * Localized field
+   */
+  localized?: boolean;
+  /**
+   * Active locale
+   */
+  locale?: string;
+  /**
+   * Filter options based on form values
+   */
+  filter?: (formValues: any) => any;
+  /**
+   * Is the field required
+   */
+  required?: boolean;
+  /**
+   * Is the field disabled
+   */
+  disabled?: boolean;
+  /**
+   * Is the field readonly
+   */
+  readOnly?: boolean;
+  /**
+   * Placeholder text
+   */
+  placeholder?: string;
+  /**
+   * Enable drag-and-drop reordering (only for multiple type)
+   */
+  orderable?: boolean;
+  /**
+   * Maximum number of items (only for multiple type)
+   */
+  maxItems?: number;
+  /**
+   * Custom render function for dropdown options
+   */
+  renderOption?: (item: any) => React$1.ReactNode;
+  /**
+   * Custom render function for selected value (single) or items (multiple)
+   */
+  renderValue?: (item: any) => React$1.ReactNode;
+  /**
+   * Custom render function for selected items (only for multiple type)
+   */
+  renderItem?: (item: any, index: number) => React$1.ReactNode;
+  /**
+   * Form control (optional, will use useFormContext if not provided)
+   */
+  control?: Control<any>;
+};
+/**
+ * Unified relation field component that integrates with react-hook-form.
+ *
+ * Automatically chooses between RelationSelect (single) and RelationPicker (multiple)
+ * based on the `type` prop.
+ *
+ * @example
+ * ```tsx
+ * // Single relation (one-to-one)
+ * <RelationField
+ *   name="author"
+ *   targetCollection="users"
+ *   type="single"
+ *   label="Author"
+ *   required
+ * />
+ *
+ * // Multiple relations (many-to-many)
+ * <RelationField
+ *   name="tags"
+ *   targetCollection="tags"
+ *   type="multiple"
+ *   label="Tags"
+ *   maxItems={5}
+ *   orderable
+ * />
+ * ```
+ */
+declare function RelationField<T extends Questpie<any>>({
+  name,
+  targetCollection,
+  type,
+  label,
+  description,
+  localized,
+  locale,
+  filter,
+  required,
+  disabled,
+  readOnly,
+  placeholder,
+  orderable,
+  maxItems,
+  renderOption,
+  renderValue,
+  renderItem,
+  control: controlProp
+}: RelationFieldProps<T>): react_jsx_runtime217.JSX.Element | null;
+//#endregion
+export { RelationField, RelationFieldProps };
+//# sourceMappingURL=relation-field.d.mts.map

package/dist/client/components/fields/relation-field.d.mts.map

@@ -0,0 +1 @@
+{"version":3,"file":"relation-field.d.mts","names":[],"sources":["../../../../src/client/components/fields/relation-field.tsx"],"sourcesContent":[],"mappings":";;;;;;;AA4GmB,KA3FP,kBA2FO,CAAA,UA3FsB,QA2FtB,CAAA,GAAA,CAAA,CAAA,GAAA;EA+BH;;;EAEd,IAAA,EAAA,MAAA;EACA;;;EAGA,gBAAA,EAAA,MAAA;EACA;;;;;EAKA,IAAA,EAAA,QAAA,GAAA,UAAA;EACA;;;EAGA,KAAA,CAAA,EAAA,MAAA;EACA;;;EAEC,WAAA,CAAA,EAAA,MAAA;EAAqB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;gCAjEQ,OAAA,CAAM;;;;+BAKP,OAAA,CAAM;;;;6CAKQ,OAAA,CAAM;;;;YAKvC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;iBA+BI,wBAAwB;;;;;;;;;;;;;;;;;;WAkB7B;GACR,mBAAmB,KAAE,oBAAA,CAAA,GAAA,CAAA,OAAA"}

package/dist/client/components/fields/relation-field.mjs

@@ -0,0 +1,106 @@
+import { useResolveText } from "../../i18n/hooks.mjs";
+import { RelationPicker } from "./relation-picker.mjs";
+import { RelationSelect } from "./relation-select.mjs";
+import { Controller, useFormContext } from "react-hook-form";
+import { jsx, jsxs } from "react/jsx-runtime";
+
+//#region src/client/components/fields/relation-field.tsx
+/**
+* Unified relation field component that integrates with react-hook-form.
+*
+* Automatically chooses between RelationSelect (single) and RelationPicker (multiple)
+* based on the `type` prop.
+*
+* @example
+* ```tsx
+* // Single relation (one-to-one)
+* <RelationField
+*   name="author"
+*   targetCollection="users"
+*   type="single"
+*   label="Author"
+*   required
+* />
+*
+* // Multiple relations (many-to-many)
+* <RelationField
+*   name="tags"
+*   targetCollection="tags"
+*   type="multiple"
+*   label="Tags"
+*   maxItems={5}
+*   orderable
+* />
+* ```
+*/
+function RelationField({ name, targetCollection, type, label, description, localized, locale, filter, required, disabled, readOnly, placeholder, orderable, maxItems, renderOption, renderValue, renderItem, control: controlProp }) {
+	const resolveText = useResolveText();
+	const resolvedLabel = label ? resolveText(label) : void 0;
+	const resolvedDescription = description ? resolveText(description) : void 0;
+	const formContext = useFormContext();
+	const control = controlProp ?? formContext?.control;
+	if (!control) {
+		if (process.env.NODE_ENV !== "production") console.warn("RelationField: No form control found. Make sure to use within FormProvider or pass control prop.");
+		return null;
+	}
+	return /* @__PURE__ */ jsx(Controller, {
+		name,
+		control,
+		rules: { required: required ? `${resolvedLabel || name} is required` : void 0 },
+		render: ({ field, fieldState }) => {
+			const error = fieldState.error?.message;
+			if (type === "single") return /* @__PURE__ */ jsxs("div", {
+				className: "space-y-1",
+				children: [/* @__PURE__ */ jsx(RelationSelect, {
+					name,
+					value: field.value,
+					onChange: field.onChange,
+					targetCollection,
+					label: resolvedLabel,
+					localized,
+					locale,
+					filter,
+					required,
+					disabled,
+					readOnly,
+					placeholder,
+					error,
+					renderOption,
+					renderValue
+				}), resolvedDescription && !error && /* @__PURE__ */ jsx("p", {
+					className: "text-muted-foreground text-xs",
+					children: resolvedDescription
+				})]
+			});
+			return /* @__PURE__ */ jsxs("div", {
+				className: "space-y-1",
+				children: [/* @__PURE__ */ jsx(RelationPicker, {
+					name,
+					value: field.value,
+					onChange: field.onChange,
+					targetCollection,
+					label: resolvedLabel,
+					localized,
+					locale,
+					filter,
+					required,
+					disabled,
+					readOnly,
+					placeholder,
+					error,
+					orderable,
+					maxItems,
+					renderOption,
+					renderItem
+				}), resolvedDescription && !error && /* @__PURE__ */ jsx("p", {
+					className: "text-muted-foreground text-xs",
+					children: resolvedDescription
+				})]
+			});
+		}
+	});
+}
+
+//#endregion
+export { RelationField };
+//# sourceMappingURL=relation-field.mjs.map

package/dist/client/components/fields/relation-field.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"relation-field.mjs","names":[],"sources":["../../../../src/client/components/fields/relation-field.tsx"],"sourcesContent":["/**\n * RelationField Component\n *\n * Unified relation field that automatically chooses between:\n * - RelationSelect (single relation / one-to-one)\n * - RelationPicker (multiple relations / one-to-many, many-to-many)\n *\n * Integrates with react-hook-form via Controller.\n */\n\nimport type { Questpie } from \"questpie\";\nimport type * as React from \"react\";\nimport { type Control, Controller, useFormContext } from \"react-hook-form\";\nimport { useResolveText } from \"../../i18n/hooks\";\nimport { RelationPicker, type RelationPickerProps } from \"./relation-picker\";\nimport { RelationSelect, type RelationSelectProps } from \"./relation-select\";\n\nexport type RelationFieldProps<T extends Questpie<any>> = {\n  /**\n   * Field name (for react-hook-form)\n   */\n  name: string;\n\n  /**\n   * Target collection name\n   */\n  targetCollection: string;\n\n  /**\n   * Relation type:\n   * - \"single\" (one-to-one) - uses RelationSelect\n   * - \"multiple\" (one-to-many, many-to-many) - uses RelationPicker\n   */\n  type: \"single\" | \"multiple\";\n\n  /**\n   * Label for the field\n   */\n  label?: string;\n\n  /**\n   * Description/help text\n   */\n  description?: string;\n\n  /**\n   * Localized field\n   */\n  localized?: boolean;\n\n  /**\n   * Active locale\n   */\n  locale?: string;\n\n  /**\n   * Filter options based on form values\n   */\n  filter?: (formValues: any) => any;\n\n  /**\n   * Is the field required\n   */\n  required?: boolean;\n\n  /**\n   * Is the field disabled\n   */\n  disabled?: boolean;\n\n  /**\n   * Is the field readonly\n   */\n  readOnly?: boolean;\n\n  /**\n   * Placeholder text\n   */\n  placeholder?: string;\n\n  /**\n   * Enable drag-and-drop reordering (only for multiple type)\n   */\n  orderable?: boolean;\n\n  /**\n   * Maximum number of items (only for multiple type)\n   */\n  maxItems?: number;\n\n  /**\n   * Custom render function for dropdown options\n   */\n  renderOption?: (item: any) => React.ReactNode;\n\n  /**\n   * Custom render function for selected value (single) or items (multiple)\n   */\n  renderValue?: (item: any) => React.ReactNode;\n\n  /**\n   * Custom render function for selected items (only for multiple type)\n   */\n  renderItem?: (item: any, index: number) => React.ReactNode;\n\n  /**\n   * Form control (optional, will use useFormContext if not provided)\n   */\n  control?: Control<any>;\n};\n\n/**\n * Unified relation field component that integrates with react-hook-form.\n *\n * Automatically chooses between RelationSelect (single) and RelationPicker (multiple)\n * based on the `type` prop.\n *\n * @example\n * ```tsx\n * // Single relation (one-to-one)\n * <RelationField\n *   name=\"author\"\n *   targetCollection=\"users\"\n *   type=\"single\"\n *   label=\"Author\"\n *   required\n * />\n *\n * // Multiple relations (many-to-many)\n * <RelationField\n *   name=\"tags\"\n *   targetCollection=\"tags\"\n *   type=\"multiple\"\n *   label=\"Tags\"\n *   maxItems={5}\n *   orderable\n * />\n * ```\n */\nexport function RelationField<T extends Questpie<any>>({\n  name,\n  targetCollection,\n  type,\n  label,\n  description,\n  localized,\n  locale,\n  filter,\n  required,\n  disabled,\n  readOnly,\n  placeholder,\n  orderable,\n  maxItems,\n  renderOption,\n  renderValue,\n  renderItem,\n  control: controlProp,\n}: RelationFieldProps<T>) {\n  const resolveText = useResolveText();\n  const resolvedLabel = label ? resolveText(label) : undefined;\n  const resolvedDescription = description\n    ? resolveText(description)\n    : undefined;\n  const formContext = useFormContext();\n  const control = controlProp ?? formContext?.control;\n\n  if (!control) {\n    if (process.env.NODE_ENV !== \"production\") {\n      console.warn(\n        \"RelationField: No form control found. Make sure to use within FormProvider or pass control prop.\",\n      );\n    }\n    return null;\n  }\n\n  return (\n    <Controller\n      name={name}\n      control={control}\n      rules={{\n        required: required ? `${resolvedLabel || name} is required` : undefined,\n      }}\n      render={({ field, fieldState }) => {\n        const error = fieldState.error?.message;\n\n        if (type === \"single\") {\n          return (\n            <div className=\"space-y-1\">\n              <RelationSelect<T>\n                name={name}\n                value={field.value as string | null}\n                onChange={field.onChange}\n                targetCollection={targetCollection}\n                label={resolvedLabel}\n                localized={localized}\n                locale={locale}\n                filter={filter}\n                required={required}\n                disabled={disabled}\n                readOnly={readOnly}\n                placeholder={placeholder}\n                error={error}\n                renderOption={renderOption}\n                renderValue={renderValue}\n              />\n              {resolvedDescription && !error && (\n                <p className=\"text-muted-foreground text-xs\">\n                  {resolvedDescription}\n                </p>\n              )}\n            </div>\n          );\n        }\n\n        return (\n          <div className=\"space-y-1\">\n            <RelationPicker<T>\n              name={name}\n              value={field.value as string[] | null}\n              onChange={field.onChange}\n              targetCollection={targetCollection}\n              label={resolvedLabel}\n              localized={localized}\n              locale={locale}\n              filter={filter}\n              required={required}\n              disabled={disabled}\n              readOnly={readOnly}\n              placeholder={placeholder}\n              error={error}\n              orderable={orderable}\n              maxItems={maxItems}\n              renderOption={renderOption}\n              renderItem={renderItem}\n            />\n            {resolvedDescription && !error && (\n              <p className=\"text-muted-foreground text-xs\">\n                {resolvedDescription}\n              </p>\n            )}\n          </div>\n        );\n      }}\n    />\n  );\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA2IA,SAAgB,cAAuC,EACrD,MACA,kBACA,MACA,OACA,aACA,WACA,QACA,QACA,UACA,UACA,UACA,aACA,WACA,UACA,cACA,aACA,YACA,SAAS,eACe;CACxB,MAAM,cAAc,gBAAgB;CACpC,MAAM,gBAAgB,QAAQ,YAAY,MAAM,GAAG;CACnD,MAAM,sBAAsB,cACxB,YAAY,YAAY,GACxB;CACJ,MAAM,cAAc,gBAAgB;CACpC,MAAM,UAAU,eAAe,aAAa;AAE5C,KAAI,CAAC,SAAS;AACZ,MAAI,QAAQ,IAAI,aAAa,aAC3B,SAAQ,KACN,mGACD;AAEH,SAAO;;AAGT,QACE,oBAAC;EACO;EACG;EACT,OAAO,EACL,UAAU,WAAW,GAAG,iBAAiB,KAAK,gBAAgB,QAC/D;EACD,SAAS,EAAE,OAAO,iBAAiB;GACjC,MAAM,QAAQ,WAAW,OAAO;AAEhC,OAAI,SAAS,SACX,QACE,qBAAC;IAAI,WAAU;eACb,oBAAC;KACO;KACN,OAAO,MAAM;KACb,UAAU,MAAM;KACE;KAClB,OAAO;KACI;KACH;KACA;KACE;KACA;KACA;KACG;KACN;KACO;KACD;MACb,EACD,uBAAuB,CAAC,SACvB,oBAAC;KAAE,WAAU;eACV;MACC;KAEF;AAIV,UACE,qBAAC;IAAI,WAAU;eACb,oBAAC;KACO;KACN,OAAO,MAAM;KACb,UAAU,MAAM;KACE;KAClB,OAAO;KACI;KACH;KACA;KACE;KACA;KACA;KACG;KACN;KACI;KACD;KACI;KACF;MACZ,EACD,uBAAuB,CAAC,SACvB,oBAAC;KAAE,WAAU;eACV;MACC;KAEF;;GAGV"}

package/dist/client/components/fields/relation-picker.d.mts

@@ -0,0 +1,4 @@
+import "./relation/index.mjs";
+import "react";
+import "react/jsx-runtime";
+import { Questpie } from "questpie";