@object-ui/plugin-detail 3.1.3 → 3.1.4

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@object-ui/plugin-detail",
-  "version": "3.1.3",
+  "version": "3.1.4",
   "type": "module",
   "license": "MIT",
   "description": "DetailView plugin for Object UI - comprehensive detail page with sections, tabs, and related lists",
@@ -25,11 +25,11 @@
   },
   "dependencies": {
     "lucide-react": "^0.577.0",
-    "@object-ui/components": "3.1.3",
-    "@object-ui/core": "3.1.3",
-    "@object-ui/fields": "3.1.3",
-    "@object-ui/react": "3.1.3",
-    "@object-ui/types": "3.1.3"
+    "@object-ui/components": "3.1.4",
+    "@object-ui/fields": "3.1.4",
+    "@object-ui/core": "3.1.4",
+    "@object-ui/react": "3.1.4",
+    "@object-ui/types": "3.1.4"
   },
   "peerDependencies": {
     "react": "^18.0.0 || ^19.0.0",
@@ -38,11 +38,11 @@
   "devDependencies": {
     "@types/react": "19.2.14",
     "@types/react-dom": "19.2.3",
-    "@vitejs/plugin-react": "^5.1.4",
+    "@vitejs/plugin-react": "^6.0.1",
     "typescript": "^5.9.3",
-    "vite": "^7.3.1",
+    "vite": "^8.0.1",
     "vite-plugin-dts": "^4.5.4",
-    "vitest": "^4.0.18"
+    "vitest": "^4.1.0"
   },
   "scripts": {
     "build": "vite build",

package/dist/AddressField-BtiTrEpf.js

@@ -1,96 +0,0 @@
-import { jsx as t, jsxs as a } from "react/jsx-runtime";
-import { L as r, I as c } from "./index-D2t9pLAg.js";
-import "react";
-function p({ value: o, onChange: h, field: u, readonly: i, ...l }) {
-  const s = o || {}, d = (e, n) => {
-    h({
-      ...s,
-      [e]: n
-    });
-  }, m = (e) => [
-    e.street,
-    e.city,
-    [e.state, e.zipCode].filter(Boolean).join(" "),
-    e.country
-  ].filter(Boolean).join(", ") || "-";
-  return i ? /* @__PURE__ */ t("span", { className: "text-sm", children: m(s) }) : /* @__PURE__ */ a("div", { className: "space-y-3", children: [
-    /* @__PURE__ */ a("div", { children: [
-      /* @__PURE__ */ t(r, { htmlFor: "street", className: "text-xs", children: "Street Address" }),
-      /* @__PURE__ */ t(
-        c,
-        {
-          id: "street",
-          type: "text",
-          value: s.street || "",
-          onChange: (e) => d("street", e.target.value),
-          placeholder: "123 Main St",
-          disabled: i || l.disabled,
-          className: l.className
-        }
-      )
-    ] }),
-    /* @__PURE__ */ a("div", { className: "grid grid-cols-2 gap-3", children: [
-      /* @__PURE__ */ a("div", { children: [
-        /* @__PURE__ */ t(r, { htmlFor: "city", className: "text-xs", children: "City" }),
-        /* @__PURE__ */ t(
-          c,
-          {
-            id: "city",
-            type: "text",
-            value: s.city || "",
-            onChange: (e) => d("city", e.target.value),
-            placeholder: "San Francisco",
-            disabled: i || l.disabled
-          }
-        )
-      ] }),
-      /* @__PURE__ */ a("div", { children: [
-        /* @__PURE__ */ t(r, { htmlFor: "state", className: "text-xs", children: "State / Province" }),
-        /* @__PURE__ */ t(
-          c,
-          {
-            id: "state",
-            type: "text",
-            value: s.state || "",
-            onChange: (e) => d("state", e.target.value),
-            placeholder: "CA",
-            disabled: i || l.disabled
-          }
-        )
-      ] })
-    ] }),
-    /* @__PURE__ */ a("div", { className: "grid grid-cols-2 gap-3", children: [
-      /* @__PURE__ */ a("div", { children: [
-        /* @__PURE__ */ t(r, { htmlFor: "zipCode", className: "text-xs", children: "ZIP / Postal Code" }),
-        /* @__PURE__ */ t(
-          c,
-          {
-            id: "zipCode",
-            type: "text",
-            value: s.zipCode || "",
-            onChange: (e) => d("zipCode", e.target.value),
-            placeholder: "94102",
-            disabled: i || l.disabled
-          }
-        )
-      ] }),
-      /* @__PURE__ */ a("div", { children: [
-        /* @__PURE__ */ t(r, { htmlFor: "country", className: "text-xs", children: "Country" }),
-        /* @__PURE__ */ t(
-          c,
-          {
-            id: "country",
-            type: "text",
-            value: s.country || "",
-            onChange: (e) => d("country", e.target.value),
-            placeholder: "United States",
-            disabled: i || l.disabled
-          }
-        )
-      ] })
-    ] })
-  ] });
-}
-export {
-  p as AddressField
-};

package/dist/AutoNumberField-BxnFqllo.js

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

package/dist/AvatarField-CwlnWNSf.js

@@ -1,82 +0,0 @@
-import { jsxs as s, jsx as e } from "react/jsx-runtime";
-import f from "react";
-import { A as h, n as p, l as g, X as A, B as F, U as R } from "./index-D2t9pLAg.js";
-function B({ value: t, onChange: i, field: v, readonly: l, ...c }) {
-  const [b, o] = f.useState(!1), d = f.useRef(null), r = v || c.schema, N = (u) => {
-    const a = u.target.files?.[0];
-    if (!a) return;
-    if (!a.type.startsWith("image/")) {
-      console.error("Please select an image file");
-      return;
-    }
-    if (a.size > 5 * 1024 * 1024) {
-      console.error("File size must be less than 5MB");
-      return;
-    }
-    const n = new FileReader();
-    n.onloadend = () => {
-      i(n.result);
-    }, n.readAsDataURL(a);
-  }, x = () => {
-    i("");
-  }, m = () => (r?.defaultName || r?.label || "User").split(" ").map((a) => a[0]).join("").toUpperCase().slice(0, 2);
-  return l ? /* @__PURE__ */ s(h, { className: "w-16 h-16", children: [
-    t && /* @__PURE__ */ e(p, { src: t, alt: r?.label }),
-    /* @__PURE__ */ e(g, { children: m() })
-  ] }) : /* @__PURE__ */ s("div", { className: "flex items-center gap-4", children: [
-    /* @__PURE__ */ s(
-      "div",
-      {
-        className: "relative",
-        onMouseEnter: () => o(!0),
-        onMouseLeave: () => o(!1),
-        children: [
-          /* @__PURE__ */ s(h, { className: "w-16 h-16", children: [
-            t && /* @__PURE__ */ e(p, { src: t, alt: r?.label }),
-            /* @__PURE__ */ e(g, { children: m() })
-          ] }),
-          !l && b && t && /* @__PURE__ */ e(
-            "button",
-            {
-              type: "button",
-              onClick: x,
-              className: "absolute -top-1 -right-1 bg-destructive text-destructive-foreground rounded-full p-1 hover:bg-destructive/90",
-              children: /* @__PURE__ */ e(A, { className: "w-3 h-3" })
-            }
-          )
-        ]
-      }
-    ),
-    /* @__PURE__ */ s("div", { className: "flex flex-col gap-2", children: [
-      /* @__PURE__ */ e(
-        "input",
-        {
-          ref: d,
-          type: "file",
-          accept: "image/*",
-          onChange: N,
-          className: "hidden"
-        }
-      ),
-      /* @__PURE__ */ s(
-        F,
-        {
-          type: "button",
-          variant: "outline",
-          size: "sm",
-          onClick: () => d.current?.click(),
-          disabled: l || c.disabled,
-          children: [
-            /* @__PURE__ */ e(R, { className: "w-4 h-4 mr-2" }),
-            t ? "Change" : "Upload",
-            " Avatar"
-          ]
-        }
-      ),
-      /* @__PURE__ */ e("p", { className: "text-xs text-muted-foreground", children: "PNG, JPG up to 5MB" })
-    ] })
-  ] });
-}
-export {
-  B as AvatarField
-};

package/dist/BooleanField-DpMXU2ya.js

@@ -1,37 +0,0 @@
-import { jsx as e, jsxs as a } from "react/jsx-runtime";
-import { useId as f } from "react";
-import { C as p, L as l, S as k } from "./index-D2t9pLAg.js";
-function w({ value: t, onChange: n, field: h, readonly: i, ...o }) {
-  const d = h || o.schema, m = d?.widget, x = f(), c = d?.name || x, r = d?.label || "Checkbox";
-  if (i)
-    return /* @__PURE__ */ e("span", { className: "text-sm", children: t ? "Yes" : "No" });
-  const { inputType: C, ...s } = o;
-  return m === "checkbox" ? /* @__PURE__ */ a("div", { className: "flex items-center space-x-2", children: [
-    /* @__PURE__ */ e(
-      p,
-      {
-        ...s,
-        id: c,
-        checked: !!t,
-        onCheckedChange: (b) => n(!!b),
-        disabled: i || s.disabled
-      }
-    ),
-    /* @__PURE__ */ e(l, { htmlFor: c, children: r })
-  ] }) : /* @__PURE__ */ a("div", { className: "flex items-center space-x-2", children: [
-    /* @__PURE__ */ e(
-      k,
-      {
-        ...s,
-        id: c,
-        checked: !!t,
-        onCheckedChange: n,
-        disabled: i || s.disabled
-      }
-    ),
-    /* @__PURE__ */ e(l, { htmlFor: c, children: r })
-  ] });
-}
-export {
-  w as BooleanField
-};

package/dist/CodeField-gwmcFihg.js

@@ -1,21 +0,0 @@
-import { jsx as a } from "react/jsx-runtime";
-import { i as l, T as i } from "./index-D2t9pLAg.js";
-import "react";
-function g({ value: o, onChange: s, field: c, readonly: r, ...e }) {
-  const t = c || e.schema, n = t?.language ?? "javascript";
-  return r ? /* @__PURE__ */ a("pre", { className: l("text-sm bg-muted p-2 rounded overflow-x-auto border", e.className), children: /* @__PURE__ */ a("code", { children: o || "-" }) }) : /* @__PURE__ */ a(
-    i,
-    {
-      value: o || "",
-      onChange: (d) => s(d.target.value),
-      placeholder: t?.placeholder || `// Write ${n} code here...`,
-      disabled: r || e.disabled,
-      className: l("font-mono text-sm", e.className),
-      rows: 12,
-      spellCheck: !1
-    }
-  );
-}
-export {
-  g as CodeField
-};

package/dist/ColorField-CWmF_zoW.js

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

package/dist/CurrencyField-BF3tYAgm.js

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

package/dist/DateField-a6Ka9ph2.js

@@ -1,21 +0,0 @@
-import { jsx as a } from "react/jsx-runtime";
-import { I as p } from "./index-D2t9pLAg.js";
-import "react";
-function f({ value: t, onChange: i, field: s, readonly: e, ...n }) {
-  if (e)
-    return /* @__PURE__ */ a("span", { className: "text-sm", children: t ? new Date(t).toLocaleDateString() : "-" });
-  const { inputType: d, ...r } = n;
-  return /* @__PURE__ */ a(
-    p,
-    {
-      ...r,
-      type: "date",
-      value: t || "",
-      onChange: (o) => i(o.target.value),
-      disabled: e || r.disabled
-    }
-  );
-}
-export {
-  f as DateField
-};

package/dist/DateTimeField-C4wWOEiw.js

@@ -1,28 +0,0 @@
-import { jsx as n, jsxs as o } from "react/jsx-runtime";
-import { I as m } from "./index-D2t9pLAg.js";
-import "react";
-function u({ value: e, onChange: r, field: l, readonly: a, ...s }) {
-  if (a) {
-    if (!e) return /* @__PURE__ */ n("span", { className: "text-sm", children: "-" });
-    const t = new Date(e);
-    return /* @__PURE__ */ o("span", { className: "text-sm", children: [
-      t.toLocaleDateString(),
-      " ",
-      t.toLocaleTimeString()
-    ] });
-  }
-  const { inputType: p, ...i } = s;
-  return /* @__PURE__ */ n(
-    m,
-    {
-      ...i,
-      type: "datetime-local",
-      value: e || "",
-      onChange: (t) => r(t.target.value),
-      disabled: a || i.disabled
-    }
-  );
-}
-export {
-  u as DateTimeField
-};

package/dist/EmailField-DJqiQ4sp.js

@@ -1,31 +0,0 @@
-import { jsx as t } from "react/jsx-runtime";
-import { I as c } from "./index-D2t9pLAg.js";
-import "react";
-function f({ value: e, onChange: l, field: m, readonly: i, errorMessage: n, ...r }) {
-  const o = m || r.schema;
-  if (i)
-    return e ? /* @__PURE__ */ t(
-      "a",
-      {
-        href: `mailto:${e}`,
-        className: "text-sm text-blue-600 hover:text-blue-800 hover:underline",
-        children: e
-      }
-    ) : /* @__PURE__ */ t("span", { className: "text-sm", children: "-" });
-  const { inputType: d, ...a } = r;
-  return /* @__PURE__ */ t(
-    c,
-    {
-      ...a,
-      type: "email",
-      value: e || "",
-      onChange: (s) => l(s.target.value),
-      placeholder: o?.placeholder || "email@example.com",
-      disabled: i || a.disabled,
-      "aria-invalid": !!n
-    }
-  );
-}
-export {
-  f as EmailField
-};

package/dist/FileField-ChjjCydz.js

@@ -1,133 +0,0 @@
-import { jsx as t, jsxs as o } from "react/jsx-runtime";
-import { useRef as I, useState as k, useCallback as g } from "react";
-import { U as P, k as U, F as $, B as C, X as E } from "./index-D2t9pLAg.js";
-function M({ value: n, onChange: c, field: w, readonly: j, ...b }) {
-  const y = I(null), m = w || b.schema, d = m?.multiple || !1, p = m?.accept ? m.accept.join(",") : void 0, u = m?.maxSize, [N, v] = k(!1), [D, A] = k([]), l = n ? Array.isArray(n) ? n : [n] : [], f = g((e) => {
-    if (e.length === 0) return;
-    const r = [], a = e.filter((s) => {
-      if (u && s.size > u) {
-        const x = (u / 1048576).toFixed(1);
-        return r.push(`"${s.name}" exceeds max size (${x} MB)`), !1;
-      }
-      return !0;
-    });
-    if (A(r), a.length === 0) return;
-    const i = a.map((s) => ({
-      name: s.name,
-      original_name: s.name,
-      size: s.size,
-      mime_type: s.type,
-      // In a real implementation, this would upload the file and return a URL
-      url: URL.createObjectURL(s)
-    }));
-    c(d ? [...l, ...i] : i[0]);
-  }, [l, d, c, u]), L = g((e) => {
-    e.preventDefault(), e.stopPropagation(), v(!0);
-  }, []), O = g((e) => {
-    e.preventDefault(), e.stopPropagation(), v(!1);
-  }, []), _ = g((e) => {
-    e.preventDefault(), e.stopPropagation(), v(!1);
-    const r = Array.from(e.dataTransfer.files);
-    if (p) {
-      const a = p.split(",").map((s) => s.trim().toLowerCase()), i = r.filter((s) => {
-        const x = s.name.split("."), F = x.length > 1 ? "." + x.pop()?.toLowerCase() : "";
-        return a.some(
-          (h) => h === s.type || F && h === F || h.endsWith("/*") && s.type.startsWith(h.replace("/*", "/"))
-        );
-      });
-      f(i);
-    } else
-      f(r);
-  }, [p, f]);
-  if (j) {
-    if (!n) return /* @__PURE__ */ t("span", { className: "text-sm", children: "-" });
-    const e = Array.isArray(n) ? n : [n];
-    return /* @__PURE__ */ t("div", { className: "flex flex-wrap gap-2", children: e.map((r, a) => /* @__PURE__ */ t("span", { className: "text-sm truncate max-w-xs", children: r.name || r.original_name || "File" }, a)) });
-  }
-  const B = (e) => {
-    f(Array.from(e.target.files || []));
-  }, R = (e) => {
-    if (d) {
-      const r = l.filter((a, i) => i !== e);
-      c(r.length > 0 ? r : null);
-    } else
-      c(null);
-  }, z = (e) => (e.mime_type || "").startsWith("image/");
-  return /* @__PURE__ */ o("div", { className: b.className, children: [
-    /* @__PURE__ */ t(
-      "input",
-      {
-        ref: y,
-        type: "file",
-        multiple: d,
-        accept: p,
-        onChange: B,
-        className: "hidden"
-      }
-    ),
-    /* @__PURE__ */ o("div", { className: "space-y-2", children: [
-      /* @__PURE__ */ o(
-        "div",
-        {
-          onDragOver: L,
-          onDragLeave: O,
-          onDrop: _,
-          onClick: () => y.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
-            ${N ? "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(), y.current?.click());
-          },
-          children: [
-            /* @__PURE__ */ t(P, { className: `size-8 ${N ? "text-primary" : "text-muted-foreground"}` }),
-            /* @__PURE__ */ o("div", { className: "text-center", children: [
-              /* @__PURE__ */ t("p", { className: "text-sm font-medium", children: N ? "Drop files here" : "Drag & drop files here" }),
-              /* @__PURE__ */ t("p", { className: "text-xs text-muted-foreground mt-1", children: "or click to browse" })
-            ] })
-          ]
-        }
-      ),
-      D.length > 0 && /* @__PURE__ */ t("div", { className: "space-y-0.5", children: D.map((e, r) => /* @__PURE__ */ t("p", { className: "text-xs text-destructive", children: e }, r)) }),
-      l.length > 0 && /* @__PURE__ */ t("div", { className: "space-y-1", children: l.map((e, r) => /* @__PURE__ */ o(
-        "div",
-        {
-          className: "flex items-center justify-between gap-2 p-2 bg-muted/50 rounded-md border",
-          children: [
-            /* @__PURE__ */ o("div", { className: "flex items-center gap-2 flex-1 min-w-0", children: [
-              z(e) && e.url ? /* @__PURE__ */ t("img", { src: e.url, alt: e.name, className: "size-8 object-cover rounded flex-shrink-0" }) : z(e) ? /* @__PURE__ */ t(U, { className: "size-4 text-muted-foreground flex-shrink-0" }) : /* @__PURE__ */ t($, { className: "size-4 text-muted-foreground flex-shrink-0" }),
-              /* @__PURE__ */ t("span", { className: "text-sm truncate", children: e.name || e.original_name || "File" }),
-              e.size && /* @__PURE__ */ o("span", { className: "text-xs text-muted-foreground", children: [
-                "(",
-                (e.size / 1024).toFixed(1),
-                " KB)"
-              ] })
-            ] }),
-            /* @__PURE__ */ t(
-              C,
-              {
-                type: "button",
-                variant: "ghost",
-                size: "sm",
-                onClick: (a) => {
-                  a.stopPropagation(), R(r);
-                },
-                className: "h-6 w-6 p-0",
-                children: /* @__PURE__ */ t(E, { className: "size-3" })
-              }
-            )
-          ]
-        },
-        r
-      )) })
-    ] })
-  ] });
-}
-export {
-  M as FileField
-};

package/dist/FormulaField-CJkkwIK8.js

@@ -1,9 +0,0 @@
-import { jsx as i } from "react/jsx-runtime";
-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__ */ i("span", { className: `text-sm font-mono text-gray-700 ${r.className || ""}`, children: t });
-}
-export {
-  m as FormulaField
-};