@object-ui/plugin-detail 3.0.2 → 3.1.0

package/dist/PhoneField-mw-9fqZ_.js

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

package/dist/QRCodeField-Cbb9ck59.js

@@ -0,0 +1,77 @@
+import { jsxs as s, jsx as t, Fragment as x } from "react/jsx-runtime";
+import g from "react";
+import { B as n, Q as d, I as u, v as N } from "./index-CnlyRfY_.js";
+function b({ value: e, onChange: l, field: m, readonly: i, ...r }) {
+  const [a, o] = g.useState(!1), h = m || r.schema, p = (c) => `https://api.qrserver.com/v1/create-qr-code/?size=200x200&data=${encodeURIComponent(c)}`, f = () => {
+    e && navigator.clipboard.writeText(e);
+  };
+  return i ? /* @__PURE__ */ s("div", { className: "flex items-center gap-3", children: [
+    /* @__PURE__ */ t("span", { className: "text-sm flex-1 truncate", children: e || "-" }),
+    e && /* @__PURE__ */ s(
+      n,
+      {
+        type: "button",
+        variant: "outline",
+        size: "sm",
+        onClick: () => o(!a),
+        children: [
+          /* @__PURE__ */ t(d, { className: "w-4 h-4 mr-2" }),
+          a ? "Hide" : "Show",
+          " QR"
+        ]
+      }
+    )
+  ] }) : /* @__PURE__ */ s("div", { className: "space-y-3", children: [
+    /* @__PURE__ */ s("div", { className: "flex items-center gap-2", children: [
+      /* @__PURE__ */ t(
+        u,
+        {
+          type: "text",
+          value: e || "",
+          onChange: (c) => l(c.target.value),
+          placeholder: h?.placeholder || "Enter text for QR code",
+          disabled: i || r.disabled,
+          className: r.className
+        }
+      ),
+      e && /* @__PURE__ */ s(x, { children: [
+        /* @__PURE__ */ t(
+          n,
+          {
+            type: "button",
+            variant: "outline",
+            size: "sm",
+            onClick: f,
+            children: /* @__PURE__ */ t(N, { className: "w-4 h-4" })
+          }
+        ),
+        /* @__PURE__ */ t(
+          n,
+          {
+            type: "button",
+            variant: "outline",
+            size: "sm",
+            onClick: () => o(!a),
+            children: /* @__PURE__ */ t(d, { className: "w-4 h-4" })
+          }
+        )
+      ] })
+    ] }),
+    a && e && /* @__PURE__ */ t("div", { className: "border rounded p-4 bg-white flex justify-center", children: /* @__PURE__ */ t(
+      "img",
+      {
+        src: p(e),
+        alt: "QR Code",
+        className: "w-48 h-48"
+      }
+    ) }),
+    e && /* @__PURE__ */ s("p", { className: "text-xs text-muted-foreground", children: [
+      "QR code contains: ",
+      e.length,
+      " characters"
+    ] })
+  ] });
+}
+export {
+  b as QRCodeField
+};

package/dist/RatingField-CSqgLS6t.js

@@ -0,0 +1,47 @@
+import { jsxs as o, jsx as r } from "react/jsx-runtime";
+import y from "react";
+import { r as c, o as m } from "./index-CnlyRfY_.js";
+function b({ value: d, onChange: f, field: x, readonly: n, className: s, ...a }) {
+  const t = (x || a.schema)?.max ?? 5, l = d ?? 0, [u, i] = y.useState(null), g = u !== null ? u : l;
+  return n ? /* @__PURE__ */ o("div", { className: m("flex items-center gap-1", s), children: [
+    Array.from({ length: t }, (h, e) => /* @__PURE__ */ r(
+      c,
+      {
+        className: `w-5 h-5 ${e < l ? "fill-yellow-400 text-yellow-400" : "text-muted-foreground"}`
+      },
+      e
+    )),
+    /* @__PURE__ */ o("span", { className: "ml-2 text-sm text-muted-foreground", children: [
+      l,
+      " / ",
+      t
+    ] })
+  ] }) : /* @__PURE__ */ o("div", { className: m("flex items-center gap-1", s), children: [
+    Array.from({ length: t }, (h, e) => /* @__PURE__ */ r(
+      "button",
+      {
+        type: "button",
+        onClick: () => f(e + 1),
+        onMouseEnter: () => i(e + 1),
+        onMouseLeave: () => i(null),
+        className: "focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 rounded",
+        disabled: n || a.disabled,
+        children: /* @__PURE__ */ r(
+          c,
+          {
+            className: `w-5 h-5 transition-colors ${e < g ? "fill-yellow-400 text-yellow-400 hover:fill-yellow-500 hover:text-yellow-500" : "text-muted-foreground hover:text-yellow-400"}`
+          }
+        )
+      },
+      e
+    )),
+    /* @__PURE__ */ o("span", { className: "ml-2 text-sm text-muted-foreground", children: [
+      l,
+      " / ",
+      t
+    ] })
+  ] });
+}
+export {
+  b as RatingField
+};

package/dist/RichTextField-BpfBOd99.js

@@ -0,0 +1,38 @@
+import { jsx as a, jsxs as s } from "react/jsx-runtime";
+import { T as x } from "./index-CnlyRfY_.js";
+import "react";
+function N({ value: r, onChange: c, field: n, readonly: i, errorMessage: o, ...e }) {
+  if (i)
+    return /* @__PURE__ */ a(
+      "div",
+      {
+        className: "text-sm prose prose-sm max-w-none",
+        children: r || "-"
+      }
+    );
+  const t = n || e.schema, l = t?.rows || 8, m = t?.format || "markdown";
+  return /* @__PURE__ */ s("div", { className: "space-y-2", children: [
+    /* @__PURE__ */ s("div", { className: "flex items-center justify-between text-xs text-gray-500", children: [
+      /* @__PURE__ */ s("span", { children: [
+        "Format: ",
+        m
+      ] }),
+      /* @__PURE__ */ a("span", { className: "italic", children: "Rich text editor (basic)" })
+    ] }),
+    /* @__PURE__ */ a(
+      x,
+      {
+        value: r || "",
+        onChange: (d) => c(d.target.value),
+        placeholder: t?.placeholder || "Enter text...",
+        disabled: i || e.disabled,
+        rows: l,
+        className: `font-mono text-sm ${e.className || ""}`,
+        "aria-invalid": !!o
+      }
+    )
+  ] });
+}
+export {
+  N as RichTextField
+};

package/dist/SelectField-B9Ei-5jl.js

@@ -0,0 +1,26 @@
+import { jsx as a, jsxs as r } from "react/jsx-runtime";
+import { a as m, b as h, c as u, d as S, e as f } from "./index-CnlyRfY_.js";
+import "react";
+function x({ value: t, onChange: s, field: o, readonly: c, ...e }) {
+  const i = o || e.schema, n = i?.options || [];
+  if (c) {
+    const l = n.find((d) => d.value === t);
+    return /* @__PURE__ */ a("span", { className: "text-sm", children: l?.label || t || "-" });
+  }
+  return /* @__PURE__ */ r(
+    m,
+    {
+      ...e,
+      value: t,
+      onValueChange: s,
+      disabled: c || e.disabled,
+      children: [
+        /* @__PURE__ */ a(h, { className: e.className, id: e.id, children: /* @__PURE__ */ a(u, { placeholder: i?.placeholder || "Select an option" }) }),
+        /* @__PURE__ */ a(S, { position: "popper", children: n.map((l) => /* @__PURE__ */ a(f, { value: l.value, children: l.label }, l.value)) })
+      ]
+    }
+  );
+}
+export {
+  x as SelectField
+};

package/dist/SignatureField-DgGpHnQ8.js

@@ -0,0 +1,85 @@
+import { jsx as o, jsxs as f } from "react/jsx-runtime";
+import v, { useRef as b, useEffect as S } from "react";
+import { B as C, u as R } from "./index-CnlyRfY_.js";
+function E({ value: c, onChange: g, readonly: i }) {
+  const r = b(null), [h, m] = v.useState(!1), [p, a] = v.useState(!c);
+  S(() => {
+    if (c && r.current) {
+      const e = r.current.getContext("2d");
+      if (e) {
+        const n = new Image();
+        n.onload = () => {
+          e.drawImage(n, 0, 0), a(!1);
+        }, n.src = c;
+      }
+    }
+  }, [c]);
+  const x = (t) => {
+    if (i) return;
+    m(!0), a(!1);
+    const e = r.current;
+    if (!e) return;
+    const n = e.getContext("2d");
+    if (!n) return;
+    const s = e.getBoundingClientRect(), l = "touches" in t ? t.touches[0].clientX - s.left : t.clientX - s.left, d = "touches" in t ? t.touches[0].clientY - s.top : t.clientY - s.top;
+    n.beginPath(), n.moveTo(l, d);
+  }, w = (t) => {
+    if (!h || i) return;
+    const e = r.current;
+    if (!e) return;
+    const n = e.getContext("2d");
+    if (!n) return;
+    const s = e.getBoundingClientRect(), l = "touches" in t ? t.touches[0].clientX - s.left : t.clientX - s.left, d = "touches" in t ? t.touches[0].clientY - s.top : t.clientY - s.top;
+    n.lineTo(l, d), n.strokeStyle = "#000", n.lineWidth = 2, n.lineCap = "round", n.lineJoin = "round", n.stroke();
+  }, u = () => {
+    if (!h) return;
+    m(!1);
+    const t = r.current;
+    if (!t) return;
+    const e = t.toDataURL("image/png");
+    g(e);
+  }, N = () => {
+    const t = r.current;
+    if (!t) return;
+    const e = t.getContext("2d");
+    e && (e.clearRect(0, 0, t.width, t.height), a(!0), g(""));
+  };
+  return i && c ? /* @__PURE__ */ o("div", { className: "border rounded p-2 bg-white", children: /* @__PURE__ */ o("img", { src: c, alt: "Signature", loading: "lazy", className: "max-w-full h-auto" }) }) : i && !c ? /* @__PURE__ */ o("span", { className: "text-sm text-muted-foreground", children: "No signature" }) : /* @__PURE__ */ f("div", { className: "space-y-2", children: [
+    /* @__PURE__ */ o("div", { className: "border rounded bg-white", children: /* @__PURE__ */ o(
+      "canvas",
+      {
+        ref: r,
+        width: 400,
+        height: 200,
+        className: "w-full touch-none cursor-crosshair",
+        onMouseDown: x,
+        onMouseMove: w,
+        onMouseUp: u,
+        onMouseLeave: u,
+        onTouchStart: x,
+        onTouchMove: w,
+        onTouchEnd: u
+      }
+    ) }),
+    /* @__PURE__ */ f("div", { className: "flex justify-between items-center", children: [
+      /* @__PURE__ */ o("p", { className: "text-xs text-muted-foreground", children: p ? "Sign above" : "Signature captured" }),
+      /* @__PURE__ */ f(
+        C,
+        {
+          type: "button",
+          variant: "outline",
+          size: "sm",
+          onClick: N,
+          disabled: i || p,
+          children: [
+            /* @__PURE__ */ o(R, { className: "w-4 h-4 mr-2" }),
+            "Clear"
+          ]
+        }
+      )
+    ] })
+  ] });
+}
+export {
+  E as SignatureField
+};

package/dist/SliderField-C6HvOHd8.js

@@ -0,0 +1,30 @@
+import { jsxs as m, jsx as a } from "react/jsx-runtime";
+import { f as x } from "./index-CnlyRfY_.js";
+import "react";
+function u({ value: s, onChange: l, field: r, readonly: n, ...t }) {
+  const i = r || t.schema, e = i?.min ?? 0, c = i?.max ?? 100, d = i?.step ?? 1;
+  return n ? /* @__PURE__ */ m("div", { className: "flex items-center gap-2", children: [
+    /* @__PURE__ */ a("span", { className: "text-sm font-medium", children: s ?? e }),
+    /* @__PURE__ */ m("span", { className: "text-xs text-muted-foreground", children: [
+      "/ ",
+      c
+    ] })
+  ] }) : /* @__PURE__ */ m("div", { className: "flex items-center gap-4", children: [
+    /* @__PURE__ */ a(
+      x,
+      {
+        value: [s ?? e],
+        onValueChange: (o) => l(o[0]),
+        min: e,
+        max: c,
+        step: d,
+        disabled: n || t.disabled,
+        className: t.className
+      }
+    ),
+    /* @__PURE__ */ a("span", { className: "text-sm font-medium w-12 text-right", children: s ?? e })
+  ] });
+}
+export {
+  u as SliderField
+};

package/dist/SummaryField-ugYPYxjP.js

@@ -0,0 +1,9 @@
+import { jsx as i } from "react/jsx-runtime";
+function u({ value: m, field: n, ...e }) {
+  const s = (n || e.schema)?.summary_type || "count";
+  let t = "-";
+  return m != null && (s === "count" ? t = String(m) : ["sum", "avg", "min", "max"].includes(s) ? t = typeof m == "number" ? m.toFixed(2) : String(m) : t = String(m)), /* @__PURE__ */ i("span", { className: `text-sm font-medium tabular-nums text-gray-700 ${e.className || ""}`, children: t });
+}
+export {
+  u as SummaryField
+};

package/dist/TextAreaField-BK3RgzY3.js

@@ -0,0 +1,39 @@
+import { jsx as l, jsxs as o } from "react/jsx-runtime";
+import { T as x } from "./index-CnlyRfY_.js";
+import "react";
+function u({ value: e, onChange: n, field: c, readonly: r, errorMessage: d, ...i }) {
+  if (r)
+    return /* @__PURE__ */ l("div", { className: "text-sm whitespace-pre-wrap", children: e || "-" });
+  const a = c || i.schema, h = a?.rows || 4, t = a?.max_length, { inputType: p, ...s } = i;
+  return /* @__PURE__ */ o("div", { className: "relative", children: [
+    /* @__PURE__ */ l(
+      x,
+      {
+        ...s,
+        value: e || "",
+        onChange: (m) => n(m.target.value),
+        placeholder: a?.placeholder,
+        disabled: r || s.disabled,
+        rows: h,
+        maxLength: t,
+        "aria-invalid": !!d
+      }
+    ),
+    t && /* @__PURE__ */ o(
+      "div",
+      {
+        className: "absolute bottom-2 right-2 text-xs text-gray-400",
+        "aria-live": "polite",
+        "aria-label": `Character count: ${(e || "").length} of ${t}`,
+        children: [
+          (e || "").length,
+          "/",
+          t
+        ]
+      }
+    )
+  ] });
+}
+export {
+  u as TextAreaField
+};

package/dist/TextField-Bvzx3atT.js

@@ -0,0 +1,32 @@
+import { jsx as o } from "react/jsx-runtime";
+import { T as n, I as c } from "./index-CnlyRfY_.js";
+import "react";
+function x({ value: a, onChange: d, field: i, readonly: r, ...l }) {
+  const e = i || l.schema;
+  if (r)
+    return /* @__PURE__ */ o("span", { className: "text-sm", children: a || "-" });
+  const p = e?.rows, { inputType: m, ...t } = l;
+  return p && p > 1 ? /* @__PURE__ */ o(
+    n,
+    {
+      ...t,
+      value: a || "",
+      onChange: (s) => d(s.target.value),
+      placeholder: e?.placeholder,
+      disabled: r || t.disabled
+    }
+  ) : /* @__PURE__ */ o(
+    c,
+    {
+      ...t,
+      type: e?.type === "password" ? "password" : "text",
+      value: a || "",
+      onChange: (s) => d(s.target.value),
+      placeholder: e?.placeholder,
+      disabled: r || t.disabled
+    }
+  );
+}
+export {
+  x as TextField
+};

package/dist/TimeField-Cuz9-Uai.js

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

package/dist/UrlField-B6XHTV73.js

@@ -0,0 +1,33 @@
+import { jsx as e } from "react/jsx-runtime";
+import { I as c } from "./index-CnlyRfY_.js";
+import "react";
+function x({ value: t, onChange: a, field: l, readonly: r, errorMessage: o, ...s }) {
+  const p = l || s.schema;
+  if (r)
+    return t ? t.startsWith("http://") || t.startsWith("https://") ? /* @__PURE__ */ e(
+      "a",
+      {
+        href: t,
+        target: "_blank",
+        rel: "noopener noreferrer",
+        className: "text-sm text-blue-600 hover:text-blue-800 hover:underline",
+        children: t
+      }
+    ) : /* @__PURE__ */ e("span", { className: "text-sm", children: t }) : /* @__PURE__ */ e("span", { className: "text-sm", children: "-" });
+  const { inputType: h, ...i } = s;
+  return /* @__PURE__ */ e(
+    c,
+    {
+      ...i,
+      type: "url",
+      value: t || "",
+      onChange: (n) => a(n.target.value),
+      placeholder: p?.placeholder || "https://example.com",
+      disabled: r || i.disabled,
+      "aria-invalid": !!o
+    }
+  );
+}
+export {
+  x as UrlField
+};

package/dist/UserField-ooTul2d6.js

@@ -0,0 +1,49 @@
+import { jsx as e, jsxs as l } from "react/jsx-runtime";
+import { A as m, q as o, h as b, X as f } from "./index-CnlyRfY_.js";
+import "react";
+function j({ value: s, onChange: d, field: p, readonly: x, ...h }) {
+  const g = (p || h.schema)?.multiple || !1;
+  if (x) {
+    if (!s) return /* @__PURE__ */ e("span", { className: "text-sm", children: "-" });
+    const t = Array.isArray(s) ? s : [s];
+    return /* @__PURE__ */ l("div", { className: "flex -space-x-2", children: [
+      t.slice(0, 3).map((r, i) => {
+        const a = r.name || r.username || "User", c = a.split(" ").map((N) => N[0]).join("").toUpperCase().slice(0, 2);
+        return /* @__PURE__ */ e(m, { className: "size-8 border-2 border-white", title: a, children: /* @__PURE__ */ e(o, { className: "bg-blue-500 text-white text-xs", children: c }) }, i);
+      }),
+      t.length > 3 && /* @__PURE__ */ e(m, { className: "size-8 border-2 border-white", children: /* @__PURE__ */ l(o, { className: "bg-gray-200 text-gray-600 text-xs", children: [
+        "+",
+        t.length - 3
+      ] }) })
+    ] });
+  }
+  const n = s ? Array.isArray(s) ? s : [s] : [], u = (t) => {
+    if (g) {
+      const r = n.filter((i, a) => a !== t);
+      d(r.length > 0 ? r : null);
+    } else
+      d(null);
+  };
+  return /* @__PURE__ */ l("div", { className: h.className, children: [
+    n.length > 0 && /* @__PURE__ */ e("div", { className: "flex flex-wrap gap-2 mb-2", children: n.map((t, r) => {
+      const i = t.name || t.username || "User", a = i.split(" ").map((c) => c[0]).join("").toUpperCase().slice(0, 2);
+      return /* @__PURE__ */ l(b, { variant: "outline", className: "gap-2 pr-1", children: [
+        /* @__PURE__ */ e(m, { className: "size-5", children: /* @__PURE__ */ e(o, { className: "bg-blue-500 text-white text-xs", children: a }) }),
+        /* @__PURE__ */ e("span", { className: "text-sm", children: i }),
+        /* @__PURE__ */ e(
+          "button",
+          {
+            type: "button",
+            onClick: () => u(r),
+            className: "ml-1 rounded-full hover:bg-gray-200 p-0.5",
+            children: /* @__PURE__ */ e(f, { className: "size-3" })
+          }
+        )
+      ] }, r);
+    }) }),
+    /* @__PURE__ */ e("div", { className: "text-sm text-gray-500 italic", children: "User selection component requires integration with user management system" })
+  ] });
+}
+export {
+  j as UserField
+};

package/dist/VectorField-CKg9jdGa.js

@@ -0,0 +1,25 @@
+import { jsx as m, jsxs as e } from "react/jsx-runtime";
+function l({ value: s, field: n, ...r }) {
+  const i = (n || r.schema)?.dimensions || (Array.isArray(s) ? s.length : 0);
+  if (!s || !Array.isArray(s))
+    return /* @__PURE__ */ m("span", { className: "text-sm text-gray-500", children: "-" });
+  const a = s.slice(0, 3).map((c) => {
+    const t = Number(c);
+    return isNaN(t) ? "0" : t.toFixed(4);
+  }).join(", ");
+  return /* @__PURE__ */ e("div", { className: `text-sm ${r.className || ""}`, children: [
+    /* @__PURE__ */ e("span", { className: "font-mono text-gray-700", children: [
+      "[",
+      a,
+      "...]"
+    ] }),
+    /* @__PURE__ */ e("span", { className: "text-gray-500 ml-2", children: [
+      "(",
+      i,
+      "D)"
+    ] })
+  ] });
+}
+export {
+  l as VectorField
+};