@object-ui/plugin-aggrid 0.4.1 → 2.0.0

package/dist/AgGridImpl-3Mmf2qrR.js

@@ -0,0 +1,229 @@
+import { j as f } from "./index-B87wd1E0.js";
+import { useRef as Z, useMemo as C, useCallback as d } from "react";
+import { AgGridReact as _ } from "ag-grid-react";
+function G({
+  rowData: i = [],
+  columnDefs: v = [],
+  gridOptions: c = {},
+  pagination: A = !1,
+  paginationPageSize: y = 10,
+  domLayout: R = "normal",
+  animateRows: N = !0,
+  rowSelection: E,
+  theme: O = "quartz",
+  height: h = 500,
+  className: Q = "",
+  editable: g = !1,
+  editType: F,
+  singleClickEdit: V = !1,
+  stopEditingWhenCellsLoseFocus: j = !0,
+  exportConfig: l,
+  statusBar: x,
+  callbacks: n,
+  columnConfig: o,
+  enableRangeSelection: z = !1,
+  enableCharts: H = !1,
+  contextMenu: u,
+  treeData: p,
+  rowGrouping: r,
+  excelExport: m
+}) {
+  const t = Z(null), b = C(() => {
+    if (!x?.enabled) return;
+    const e = x.aggregations || ["count", "sum", "avg"], s = [];
+    return e.includes("count") && s.push({ statusPanel: "agAggregationComponent", statusPanelParams: { aggFuncs: ["count"] } }), e.includes("sum") && s.push({ statusPanel: "agAggregationComponent", statusPanelParams: { aggFuncs: ["sum"] } }), e.includes("avg") && s.push({ statusPanel: "agAggregationComponent", statusPanelParams: { aggFuncs: ["avg"] } }), e.includes("min") && s.push({ statusPanel: "agAggregationComponent", statusPanelParams: { aggFuncs: ["min"] } }), e.includes("max") && s.push({ statusPanel: "agAggregationComponent", statusPanelParams: { aggFuncs: ["max"] } }), s;
+  }, [x]), S = d(() => {
+    if (!t.current?.api) return;
+    const e = {
+      fileName: l?.fileName || "export.csv",
+      skipColumnHeaders: l?.skipColumnHeaders || !1,
+      allColumns: l?.allColumns || !1,
+      onlySelected: l?.onlySelected || !1
+    };
+    if (t.current.api.exportDataAsCsv(e), n?.onExport) {
+      const s = l?.onlySelected ? t.current.api.getSelectedRows() : i;
+      n.onExport(s || [], "csv");
+    }
+  }, [l, n, i]), P = d(() => {
+    if (!t.current?.api) return;
+    const e = m?.fileName || l?.fileName || "export.csv", s = m?.includeHeaders !== !1, K = {
+      fileName: e,
+      skipColumnHeaders: !s,
+      allColumns: !0,
+      onlySelected: m?.onlySelected || !1
+    };
+    if (t.current.api.exportDataAsCsv(K), n?.onExport) {
+      const a = m?.onlySelected ? t.current.api.getSelectedRows() : i;
+      n.onExport(a || [], "excel");
+    }
+  }, [m, l, n, i]), I = d((e) => {
+    if (!u?.enabled) return [];
+    const s = [];
+    return (u.items || ["copy", "copyWithHeaders", "separator", "export"]).forEach((a) => {
+      a === "export" ? s.push({
+        name: "Export CSV",
+        icon: "<span>📥</span>",
+        action: () => S()
+      }) : a === "export-excel" ? s.push({
+        name: "Export Excel (CSV)",
+        icon: "<span>📊</span>",
+        action: () => P()
+      }) : a === "autoSizeAll" ? s.push({
+        name: "Auto-size All Columns",
+        action: () => {
+          t.current?.api && t.current.api.autoSizeAllColumns();
+        }
+      }) : a === "resetColumns" ? s.push({
+        name: "Reset Columns",
+        action: () => {
+          t.current?.api && t.current.api.resetColumnState();
+        }
+      }) : s.push(a);
+    }), u.customItems && (s.length > 0 && s.push("separator"), u.customItems.forEach((a) => {
+      s.push({
+        name: a.name,
+        disabled: a.disabled,
+        action: () => {
+          n?.onContextMenuAction && n.onContextMenuAction(a.action, e.node?.data);
+        }
+      });
+    })), s;
+  }, [u, S, P, n]), B = d((e) => {
+    n?.onCellClicked?.(e);
+  }, [n]), W = d((e) => {
+    n?.onRowClicked?.(e);
+  }, [n]), $ = d((e) => {
+    n?.onSelectionChanged?.(e);
+  }, [n]), q = d((e) => {
+    n?.onCellValueChanged?.(e);
+  }, [n]), J = d((e) => {
+    t.current = e;
+  }, []), T = C(() => v ? v.map((e) => {
+    const s = { ...e };
+    return g && e.editable !== !1 && (s.editable = !0), o && (o.resizable !== void 0 && e.resizable === void 0 && (s.resizable = o.resizable), o.sortable !== void 0 && e.sortable === void 0 && (s.sortable = o.sortable), o.filterable !== void 0 && e.filter === void 0 && (s.filter = o.filterable)), r?.enabled && r.groupByFields?.includes(e.field || "") && (s.rowGroup = !0, s.hide = !0), r?.aggregations && e.field && r.aggregations[e.field] && (s.aggFunc = r.aggregations[e.field]), s;
+  }) : [], [v, g, o, r]), U = C(() => ({
+    ...c,
+    pagination: A,
+    paginationPageSize: y,
+    domLayout: R,
+    animateRows: N,
+    rowSelection: E,
+    editType: F,
+    singleClickEdit: V,
+    stopEditingWhenCellsLoseFocus: j,
+    statusBar: b ? { statusPanels: b } : void 0,
+    enableRangeSelection: z,
+    enableCharts: H,
+    getContextMenuItems: u?.enabled ? I : void 0,
+    // Tree data support
+    ...p?.enabled ? {
+      treeData: !0,
+      getDataPath: p.pathField ? (e) => e[p.pathField] : void 0,
+      autoGroupColumnDef: {
+        headerName: "Hierarchy",
+        minWidth: 250,
+        cellRendererParams: {
+          suppressCount: !1
+        }
+      },
+      groupDefaultExpanded: p.expandAll ? -1 : p.expandDepth ?? 0
+    } : {},
+    // Row grouping
+    ...r?.enabled ? {
+      groupDefaultExpanded: r.groupByFields?.length ? 1 : 0,
+      autoGroupColumnDef: {
+        minWidth: 200,
+        cellRendererParams: {
+          suppressCount: !r.showRowCount
+        }
+      }
+    } : {},
+    // Default options for better UX
+    suppressCellFocus: !g,
+    enableCellTextSelection: !0,
+    ensureDomOrder: !0,
+    // Virtual scrolling optimizations for large datasets
+    rowBuffer: c.rowBuffer ?? 10,
+    debounceVerticalScrollbar: c.debounceVerticalScrollbar ?? i.length > 1e3,
+    // Event handlers
+    onCellClicked: B,
+    onRowClicked: W,
+    onSelectionChanged: $,
+    onCellValueChanged: q,
+    onGridReady: J
+  }), [
+    c,
+    A,
+    y,
+    R,
+    N,
+    E,
+    F,
+    V,
+    j,
+    b,
+    z,
+    H,
+    u,
+    I,
+    p,
+    r,
+    g,
+    i.length,
+    B,
+    W,
+    $,
+    q,
+    J
+  ]), X = C(() => ({
+    height: typeof h == "number" ? `${h}px` : h,
+    width: "100%"
+  }), [h]), Y = [
+    `ag-theme-${O}`,
+    "rounded-xl",
+    "border",
+    "border-border",
+    "overflow-hidden",
+    "shadow-lg",
+    Q
+  ].filter(Boolean).join(" ");
+  return /* @__PURE__ */ f.jsxs("div", { className: "ag-grid-container", children: [
+    (l?.enabled || m?.enabled) && /* @__PURE__ */ f.jsxs("div", { className: "mb-2 flex gap-2", children: [
+      l?.enabled && /* @__PURE__ */ f.jsx(
+        "button",
+        {
+          onClick: S,
+          className: "px-3 py-1.5 text-sm font-medium text-white bg-blue-600 hover:bg-blue-700 rounded-md transition-colors",
+          children: "Export CSV"
+        }
+      ),
+      m?.enabled && /* @__PURE__ */ f.jsx(
+        "button",
+        {
+          onClick: P,
+          className: "px-3 py-1.5 text-sm font-medium text-white bg-green-600 hover:bg-green-700 rounded-md transition-colors",
+          children: "Export Excel (CSV)"
+        }
+      )
+    ] }),
+    /* @__PURE__ */ f.jsx(
+      "div",
+      {
+        className: Y,
+        style: X,
+        children: /* @__PURE__ */ f.jsx(
+          _,
+          {
+            ref: t,
+            rowData: i,
+            columnDefs: T,
+            gridOptions: U
+          }
+        )
+      }
+    )
+  ] });
+}
+export {
+  G as default
+};

package/dist/AutoNumberField-C1kBJaxh.js

@@ -0,0 +1,8 @@
+import { j as n } from "./index-B87wd1E0.js";
+function a({ value: t, field: o, ...s }) {
+  const e = t != null ? String(t) : "-";
+  return /* @__PURE__ */ n.jsx("span", { className: `text-sm font-mono text-gray-700 ${s.className || ""}`, children: e });
+}
+export {
+  a as AutoNumberField
+};

package/dist/FileField-BDwbJvor.js

@@ -0,0 +1,101 @@
+import { j as e } from "./index-B87wd1E0.js";
+import { useRef as y } from "react";
+import { Button as p } from "@object-ui/components";
+import { c as N, X as g, U as F } from "./ObjectAgGridImpl-EjifM4aY.js";
+const z = [
+  [
+    "path",
+    {
+      d: "M6 22a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h8a2.4 2.4 0 0 1 1.704.706l3.588 3.588A2.4 2.4 0 0 1 20 8v12a2 2 0 0 1-2 2z",
+      key: "1oefj6"
+    }
+  ],
+  ["path", { d: "M14 2v5a1 1 0 0 0 1 1h5", key: "wfsgrz" }]
+], b = N("file", z);
+function R({ value: t, onChange: r, field: x, readonly: h, ...o }) {
+  const d = y(null), c = x || o.schema, m = c?.multiple || !1, f = c?.accept ? c.accept.join(",") : void 0;
+  if (h) {
+    if (!t) return /* @__PURE__ */ e.jsx("span", { className: "text-sm", children: "-" });
+    const a = Array.isArray(t) ? t : [t];
+    return /* @__PURE__ */ e.jsx("div", { className: "flex flex-wrap gap-2", children: a.map((s, l) => /* @__PURE__ */ e.jsx("span", { className: "text-sm truncate max-w-xs", children: s.name || s.original_name || "File" }, l)) });
+  }
+  const n = t ? Array.isArray(t) ? t : [t] : [], j = (a) => {
+    const s = Array.from(a.target.files || []);
+    if (s.length === 0) return;
+    const l = s.map((i) => ({
+      name: i.name,
+      original_name: i.name,
+      size: i.size,
+      mime_type: i.type,
+      // In a real implementation, this would upload the file and return a URL
+      url: URL.createObjectURL(i)
+    }));
+    r(m ? [...n, ...l] : l[0]);
+  }, u = (a) => {
+    if (m) {
+      const s = n.filter((l, i) => i !== a);
+      r(s.length > 0 ? s : null);
+    } else
+      r(null);
+  };
+  return /* @__PURE__ */ e.jsxs("div", { className: o.className, children: [
+    /* @__PURE__ */ e.jsx(
+      "input",
+      {
+        ref: d,
+        type: "file",
+        multiple: m,
+        accept: f,
+        onChange: j,
+        className: "hidden"
+      }
+    ),
+    /* @__PURE__ */ e.jsxs("div", { className: "space-y-2", children: [
+      n.length > 0 && /* @__PURE__ */ e.jsx("div", { className: "space-y-1", children: n.map((a, s) => /* @__PURE__ */ e.jsxs(
+        "div",
+        {
+          className: "flex items-center justify-between gap-2 p-2 bg-gray-50 rounded-md border border-gray-200",
+          children: [
+            /* @__PURE__ */ e.jsxs("div", { className: "flex items-center gap-2 flex-1 min-w-0", children: [
+              /* @__PURE__ */ e.jsx(b, { className: "size-4 text-gray-500 flex-shrink-0" }),
+              /* @__PURE__ */ e.jsx("span", { className: "text-sm truncate", children: a.name || a.original_name || "File" }),
+              a.size && /* @__PURE__ */ e.jsxs("span", { className: "text-xs text-gray-500", children: [
+                "(",
+                (a.size / 1024).toFixed(1),
+                " KB)"
+              ] })
+            ] }),
+            /* @__PURE__ */ e.jsx(
+              p,
+              {
+                type: "button",
+                variant: "ghost",
+                size: "sm",
+                onClick: () => u(s),
+                className: "h-6 w-6 p-0",
+                children: /* @__PURE__ */ e.jsx(g, { className: "size-3" })
+              }
+            )
+          ]
+        },
+        s
+      )) }),
+      /* @__PURE__ */ e.jsxs(
+        p,
+        {
+          type: "button",
+          variant: "outline",
+          onClick: () => d.current?.click(),
+          className: "w-full",
+          children: [
+            /* @__PURE__ */ e.jsx(F, { className: "size-4 mr-2" }),
+            n.length > 0 ? "Add More Files" : "Upload File"
+          ]
+        }
+      )
+    ] })
+  ] });
+}
+export {
+  R as FileField
+};

package/dist/FormulaField-BXNiyGoh.js

@@ -0,0 +1,9 @@
+import { j as s } from "./index-B87wd1E0.js";
+function m({ value: e, field: o, ...r }) {
+  const n = (o || r.schema)?.return_type || "text";
+  let t = "-";
+  return e != null && (n === "number" || n === "currency" ? t = typeof e == "number" ? e.toFixed(2) : String(e) : n === "boolean" ? t = e ? "Yes" : "No" : n === "date" ? t = new Date(e).toLocaleDateString() : t = String(e)), /* @__PURE__ */ s.jsx("span", { className: `text-sm font-mono text-gray-700 ${r.className || ""}`, children: t });
+}
+export {
+  m as FormulaField
+};

package/dist/GeolocationField-Df3yYcM9.js

@@ -0,0 +1,141 @@
+import { j as t } from "./index-B87wd1E0.js";
+import f from "react";
+import { Button as n, Label as m, Input as x } from "@object-ui/components";
+import { c as h } from "./ObjectAgGridImpl-EjifM4aY.js";
+const b = [
+  ["circle", { cx: "12", cy: "12", r: "10", key: "1mglay" }],
+  ["line", { x1: "22", x2: "18", y1: "12", y2: "12", key: "l9bcsi" }],
+  ["line", { x1: "6", x2: "2", y1: "12", y2: "12", key: "13hhkx" }],
+  ["line", { x1: "12", x2: "12", y1: "6", y2: "2", key: "10w3f3" }],
+  ["line", { x1: "12", x2: "12", y1: "22", y2: "18", key: "15g9kq" }]
+], N = h("crosshair", b);
+const v = [
+  [
+    "path",
+    {
+      d: "M20 10c0 4.993-5.539 10.193-7.399 11.799a1 1 0 0 1-1.202 0C9.539 20.193 4 14.993 4 10a8 8 0 0 1 16 0",
+      key: "1r0f0z"
+    }
+  ],
+  ["circle", { cx: "12", cy: "10", r: "3", key: "ilqhr7" }]
+], g = h("map-pin", v);
+function _({ value: p, onChange: c, field: k, readonly: a, ...s }) {
+  const [l, o] = f.useState(!1), i = p || {}, r = (e, u) => {
+    c({
+      ...i,
+      [e]: u ? Number(u) : void 0
+    });
+  }, y = () => {
+    if (!navigator.geolocation) {
+      console.error("Geolocation is not supported by this browser");
+      return;
+    }
+    o(!0), navigator.geolocation.getCurrentPosition(
+      (e) => {
+        c({
+          latitude: e.coords.latitude,
+          longitude: e.coords.longitude,
+          accuracy: e.coords.accuracy
+        }), o(!1);
+      },
+      (e) => {
+        console.error("Error getting location:", e.message), o(!1);
+      },
+      {
+        enableHighAccuracy: !0,
+        timeout: 5e3,
+        maximumAge: 0
+      }
+    );
+  }, j = (e) => !e.latitude || !e.longitude ? "-" : `${e.latitude.toFixed(6)}, ${e.longitude.toFixed(6)}`, d = () => {
+    if (!i.latitude || !i.longitude) return;
+    const e = `https://www.google.com/maps?q=${i.latitude},${i.longitude}`;
+    window.open(e, "_blank");
+  };
+  return a ? /* @__PURE__ */ t.jsxs("div", { className: "flex items-center gap-2", children: [
+    /* @__PURE__ */ t.jsx(g, { className: "w-4 h-4 text-muted-foreground" }),
+    /* @__PURE__ */ t.jsx("span", { className: "text-sm", children: j(i) }),
+    i.latitude && i.longitude && /* @__PURE__ */ t.jsx(
+      n,
+      {
+        type: "button",
+        variant: "link",
+        size: "sm",
+        onClick: d,
+        className: "p-0 h-auto",
+        children: "View on map"
+      }
+    )
+  ] }) : /* @__PURE__ */ t.jsxs("div", { className: "space-y-3", children: [
+    /* @__PURE__ */ t.jsxs("div", { className: "flex items-center gap-2", children: [
+      /* @__PURE__ */ t.jsxs(
+        n,
+        {
+          type: "button",
+          variant: "outline",
+          size: "sm",
+          onClick: y,
+          disabled: a || l,
+          children: [
+            /* @__PURE__ */ t.jsx(N, { className: "w-4 h-4 mr-2" }),
+            l ? "Getting location..." : "Use Current Location"
+          ]
+        }
+      ),
+      i.latitude && i.longitude && /* @__PURE__ */ t.jsxs(
+        n,
+        {
+          type: "button",
+          variant: "link",
+          size: "sm",
+          onClick: d,
+          children: [
+            /* @__PURE__ */ t.jsx(g, { className: "w-4 h-4 mr-2" }),
+            "View on map"
+          ]
+        }
+      )
+    ] }),
+    /* @__PURE__ */ t.jsxs("div", { className: "grid grid-cols-2 gap-3", children: [
+      /* @__PURE__ */ t.jsxs("div", { children: [
+        /* @__PURE__ */ t.jsx(m, { htmlFor: "latitude", className: "text-xs", children: "Latitude" }),
+        /* @__PURE__ */ t.jsx(
+          x,
+          {
+            id: "latitude",
+            type: "number",
+            value: i.latitude ?? "",
+            onChange: (e) => r("latitude", e.target.value),
+            placeholder: "37.7749",
+            disabled: a || s.disabled,
+            step: "any",
+            className: s.className
+          }
+        )
+      ] }),
+      /* @__PURE__ */ t.jsxs("div", { children: [
+        /* @__PURE__ */ t.jsx(m, { htmlFor: "longitude", className: "text-xs", children: "Longitude" }),
+        /* @__PURE__ */ t.jsx(
+          x,
+          {
+            id: "longitude",
+            type: "number",
+            value: i.longitude ?? "",
+            onChange: (e) => r("longitude", e.target.value),
+            placeholder: "-122.4194",
+            disabled: a || s.disabled,
+            step: "any"
+          }
+        )
+      ] })
+    ] }),
+    i.accuracy && /* @__PURE__ */ t.jsxs("p", { className: "text-xs text-muted-foreground", children: [
+      "Accuracy: ±",
+      i.accuracy.toFixed(0),
+      "m"
+    ] })
+  ] });
+}
+export {
+  _ as GeolocationField
+};

package/dist/GridField-CcjQp4WM.js

@@ -0,0 +1,29 @@
+import { j as e } from "./index-B87wd1E0.js";
+import { cn as l } from "@object-ui/components";
+function g({ value: r, field: n, readonly: m, ...a }) {
+  const d = (n || a.schema)?.columns || [];
+  return !r || !Array.isArray(r) ? /* @__PURE__ */ e.jsx("span", { className: "text-sm text-gray-500", children: "-" }) : m ? /* @__PURE__ */ e.jsx("div", { className: l("text-sm", a.className), children: /* @__PURE__ */ e.jsxs("span", { className: "text-gray-700", children: [
+    r.length,
+    " rows"
+  ] }) }) : /* @__PURE__ */ e.jsxs("div", { className: l("border border-gray-200 rounded-md overflow-hidden", a.className), children: [
+    /* @__PURE__ */ e.jsx("div", { className: "overflow-auto max-h-60", children: /* @__PURE__ */ e.jsxs("table", { className: "w-full text-sm", children: [
+      /* @__PURE__ */ e.jsx("thead", { className: "bg-gray-50 border-b border-gray-200", children: /* @__PURE__ */ e.jsx("tr", { children: d.map((s, t) => /* @__PURE__ */ e.jsx(
+        "th",
+        {
+          className: "px-3 py-2 text-left text-xs font-medium text-gray-700",
+          children: s.label || s.name
+        },
+        t
+      )) }) }),
+      /* @__PURE__ */ e.jsx("tbody", { className: "divide-y divide-gray-200", children: r.slice(0, 5).map((s, t) => /* @__PURE__ */ e.jsx("tr", { className: "hover:bg-gray-50", children: d.map((i, c) => /* @__PURE__ */ e.jsx("td", { className: "px-3 py-2 text-gray-900", children: s[i.name] != null ? String(s[i.name]) : "-" }, c)) }, t)) })
+    ] }) }),
+    r.length > 5 && /* @__PURE__ */ e.jsxs("div", { className: "bg-gray-50 px-3 py-2 text-xs text-gray-500 border-t border-gray-200", children: [
+      "Showing 5 of ",
+      r.length,
+      " rows"
+    ] })
+  ] });
+}
+export {
+  g as GridField
+};

package/dist/LocationField-BIfN5QIq.js

@@ -0,0 +1,33 @@
+import { j as r } from "./index-B87wd1E0.js";
+import { Input as f } from "@object-ui/components";
+function x({ value: t, onChange: l, field: d, readonly: i, ...a }) {
+  const m = d || a.schema, n = t && typeof t == "object" ? `${t.latitude || 0}, ${t.longitude || 0}` : "";
+  if (i)
+    return /* @__PURE__ */ r.jsx("span", { className: "text-sm", children: n || "-" });
+  const u = (p) => {
+    const o = p.target.value;
+    if (!o.trim()) {
+      l(null);
+      return;
+    }
+    const s = o.split(",").map((e) => e.trim());
+    if (s.length === 2) {
+      const e = parseFloat(s[0]), c = parseFloat(s[1]);
+      !isNaN(e) && !isNaN(c) && l({ latitude: e, longitude: c });
+    }
+  };
+  return /* @__PURE__ */ r.jsx(
+    f,
+    {
+      type: "text",
+      value: n,
+      onChange: u,
+      placeholder: m?.placeholder || "latitude, longitude",
+      disabled: i || a.disabled,
+      className: a.className
+    }
+  );
+}
+export {
+  x as LocationField
+};

package/dist/MasterDetailField-CAEmxbIT.js

@@ -0,0 +1,117 @@
+import { j as e } from "./index-B87wd1E0.js";
+import { Button as a, cn as c, Badge as N } from "@object-ui/components";
+import { c as o, X as f } from "./ObjectAgGridImpl-EjifM4aY.js";
+const g = [
+  ["path", { d: "M15 3h6v6", key: "1q9fwt" }],
+  ["path", { d: "M10 14 21 3", key: "gplh6r" }],
+  ["path", { d: "M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6", key: "a6xqqp" }]
+], i = o("external-link", g);
+const v = [
+  ["path", { d: "M5 12h14", key: "1ays0h" }],
+  ["path", { d: "M12 5v14", key: "s699le" }]
+], y = o("plus", v);
+function R({
+  value: h,
+  onChange: l,
+  field: x,
+  readonly: m,
+  className: n,
+  ...d
+}) {
+  const t = h || [], u = x || d.schema, p = () => {
+    const s = {
+      id: `new-${Date.now()}`,
+      label: "New Related Record"
+    };
+    l([...t, s]);
+  }, j = (s) => {
+    l(t.filter((b) => b.id !== s));
+  }, r = (s) => {
+    console.log("View detail:", s);
+  };
+  return m ? /* @__PURE__ */ e.jsxs("div", { className: c("space-y-2", n), children: [
+    t.length === 0 ? /* @__PURE__ */ e.jsx("span", { className: "text-sm text-muted-foreground", children: "No related records" }) : t.map((s) => /* @__PURE__ */ e.jsxs(
+      "div",
+      {
+        className: "flex items-center justify-between p-2 border rounded hover:bg-muted/50",
+        children: [
+          /* @__PURE__ */ e.jsx("span", { className: "text-sm", children: s.label }),
+          /* @__PURE__ */ e.jsx(
+            a,
+            {
+              type: "button",
+              variant: "ghost",
+              size: "sm",
+              onClick: () => r(s),
+              children: /* @__PURE__ */ e.jsx(i, { className: "w-4 h-4" })
+            }
+          )
+        ]
+      },
+      s.id
+    )),
+    /* @__PURE__ */ e.jsxs("p", { className: "text-xs text-muted-foreground", children: [
+      t.length,
+      " ",
+      t.length === 1 ? "record" : "records"
+    ] })
+  ] }) : /* @__PURE__ */ e.jsxs("div", { className: c("space-y-3", n), children: [
+    /* @__PURE__ */ e.jsxs("div", { className: "space-y-2", children: [
+      t.map((s) => /* @__PURE__ */ e.jsxs(
+        "div",
+        {
+          className: "flex items-center justify-between gap-2 p-2 border rounded hover:bg-muted/50",
+          children: [
+            /* @__PURE__ */ e.jsxs("div", { className: "flex items-center gap-2 flex-1", children: [
+              /* @__PURE__ */ e.jsx(N, { variant: "outline", children: s.id }),
+              /* @__PURE__ */ e.jsx("span", { className: "text-sm flex-1", children: s.label })
+            ] }),
+            /* @__PURE__ */ e.jsxs("div", { className: "flex items-center gap-1", children: [
+              /* @__PURE__ */ e.jsx(
+                a,
+                {
+                  type: "button",
+                  variant: "ghost",
+                  size: "sm",
+                  onClick: () => r(s),
+                  children: /* @__PURE__ */ e.jsx(i, { className: "w-4 h-4" })
+                }
+              ),
+              /* @__PURE__ */ e.jsx(
+                a,
+                {
+                  type: "button",
+                  variant: "ghost",
+                  size: "sm",
+                  onClick: () => j(s.id),
+                  disabled: d.disabled,
+                  children: /* @__PURE__ */ e.jsx(f, { className: "w-4 h-4" })
+                }
+              )
+            ] })
+          ]
+        },
+        s.id
+      )),
+      t.length === 0 && /* @__PURE__ */ e.jsx("div", { className: "text-sm text-muted-foreground text-center py-4 border border-dashed rounded bg-muted/20", children: "No related records" })
+    ] }),
+    /* @__PURE__ */ e.jsxs(
+      a,
+      {
+        type: "button",
+        variant: "outline",
+        className: "w-full",
+        onClick: p,
+        disabled: d.disabled,
+        children: [
+          /* @__PURE__ */ e.jsx(y, { className: "w-4 h-4 mr-2" }),
+          "Add ",
+          u?.label || "Record"
+        ]
+      }
+    )
+  ] });
+}
+export {
+  R as MasterDetailField
+};