@object-ui/plugin-detail 3.0.3 → 3.1.0

package/dist/GeolocationField-C1AnS6VV.js

@@ -0,0 +1,123 @@
+import { jsxs as a, jsx as i } from "react/jsx-runtime";
+import v from "react";
+import { M as g, B as s, t as N, L as h, I as p } from "./index-CnlyRfY_.js";
+function F({ value: x, onChange: r, field: y, readonly: o, ...n }) {
+  const [d, l] = v.useState(!1), t = x || {}, c = (e, m) => {
+    r({
+      ...t,
+      [e]: m ? Number(m) : void 0
+    });
+  }, f = () => {
+    if (!navigator.geolocation) {
+      console.error("Geolocation is not supported by this browser");
+      return;
+    }
+    l(!0), navigator.geolocation.getCurrentPosition(
+      (e) => {
+        r({
+          latitude: e.coords.latitude,
+          longitude: e.coords.longitude,
+          accuracy: e.coords.accuracy
+        }), l(!1);
+      },
+      (e) => {
+        console.error("Error getting location:", e.message), l(!1);
+      },
+      {
+        enableHighAccuracy: !0,
+        timeout: 5e3,
+        maximumAge: 0
+      }
+    );
+  }, b = (e) => !e.latitude || !e.longitude ? "-" : `${e.latitude.toFixed(6)}, ${e.longitude.toFixed(6)}`, u = () => {
+    if (!t.latitude || !t.longitude) return;
+    const e = `https://www.google.com/maps?q=${t.latitude},${t.longitude}`;
+    window.open(e, "_blank");
+  };
+  return o ? /* @__PURE__ */ a("div", { className: "flex items-center gap-2", children: [
+    /* @__PURE__ */ i(g, { className: "w-4 h-4 text-muted-foreground" }),
+    /* @__PURE__ */ i("span", { className: "text-sm", children: b(t) }),
+    t.latitude && t.longitude && /* @__PURE__ */ i(
+      s,
+      {
+        type: "button",
+        variant: "link",
+        size: "sm",
+        onClick: u,
+        className: "p-0 h-auto",
+        children: "View on map"
+      }
+    )
+  ] }) : /* @__PURE__ */ a("div", { className: "space-y-3", children: [
+    /* @__PURE__ */ a("div", { className: "flex items-center gap-2", children: [
+      /* @__PURE__ */ a(
+        s,
+        {
+          type: "button",
+          variant: "outline",
+          size: "sm",
+          onClick: f,
+          disabled: o || d,
+          children: [
+            /* @__PURE__ */ i(N, { className: "w-4 h-4 mr-2" }),
+            d ? "Getting location..." : "Use Current Location"
+          ]
+        }
+      ),
+      t.latitude && t.longitude && /* @__PURE__ */ a(
+        s,
+        {
+          type: "button",
+          variant: "link",
+          size: "sm",
+          onClick: u,
+          children: [
+            /* @__PURE__ */ i(g, { className: "w-4 h-4 mr-2" }),
+            "View on map"
+          ]
+        }
+      )
+    ] }),
+    /* @__PURE__ */ a("div", { className: "grid grid-cols-2 gap-3", children: [
+      /* @__PURE__ */ a("div", { children: [
+        /* @__PURE__ */ i(h, { htmlFor: "latitude", className: "text-xs", children: "Latitude" }),
+        /* @__PURE__ */ i(
+          p,
+          {
+            id: "latitude",
+            type: "number",
+            value: t.latitude ?? "",
+            onChange: (e) => c("latitude", e.target.value),
+            placeholder: "37.7749",
+            disabled: o || n.disabled,
+            step: "any",
+            className: n.className
+          }
+        )
+      ] }),
+      /* @__PURE__ */ a("div", { children: [
+        /* @__PURE__ */ i(h, { htmlFor: "longitude", className: "text-xs", children: "Longitude" }),
+        /* @__PURE__ */ i(
+          p,
+          {
+            id: "longitude",
+            type: "number",
+            value: t.longitude ?? "",
+            onChange: (e) => c("longitude", e.target.value),
+            placeholder: "-122.4194",
+            disabled: o || n.disabled,
+            step: "any"
+          }
+        )
+      ] })
+    ] }),
+    t.accuracy && /* @__PURE__ */ a("p", { className: "text-xs text-muted-foreground", children: [
+      "Accuracy: ±",
+      t.accuracy.toFixed(0),
+      "m"
+    ] })
+  ] });
+}
+export {
+  F as GeolocationField
+};

package/dist/GridField-DATAHIKf.js

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

package/dist/ImageField-CEKJpyJp.js

@@ -0,0 +1,90 @@
+import { jsx as a, jsxs as l } from "react/jsx-runtime";
+import { useRef as b } from "react";
+import { B as g, X as j, p as z } from "./index-CnlyRfY_.js";
+function R({ value: s, onChange: n, field: u, readonly: h, ...d }) {
+  const p = b(null), m = u || d.schema, o = m?.multiple || !1, f = m?.accept ? m.accept.join(",") : "image/*";
+  if (h) {
+    if (!s) return /* @__PURE__ */ a("span", { className: "text-sm", children: "-" });
+    const r = Array.isArray(s) ? s : [s];
+    return /* @__PURE__ */ a("div", { className: "flex flex-wrap gap-2", children: r.map((e, c) => /* @__PURE__ */ a(
+      "img",
+      {
+        src: e.url || "",
+        alt: e.name || `Image ${c + 1}`,
+        className: "size-20 rounded-md object-cover border border-gray-200"
+      },
+      c
+    )) });
+  }
+  const i = s ? Array.isArray(s) ? s : [s] : [], y = (r) => {
+    const e = Array.from(r.target.files || []);
+    if (e.length === 0) return;
+    const c = e.map((t) => ({
+      name: t.name,
+      original_name: t.name,
+      size: t.size,
+      mime_type: t.type,
+      // In a real implementation, this would upload the image and return a URL
+      url: URL.createObjectURL(t)
+    }));
+    n(o ? [...i, ...c] : c[0]);
+  }, N = (r) => {
+    if (o) {
+      const e = i.filter((c, t) => t !== r);
+      n(e.length > 0 ? e : null);
+    } else
+      n(null);
+  };
+  return /* @__PURE__ */ l("div", { className: d.className, children: [
+    /* @__PURE__ */ a(
+      "input",
+      {
+        ref: p,
+        type: "file",
+        multiple: o,
+        accept: f,
+        onChange: y,
+        className: "hidden"
+      }
+    ),
+    /* @__PURE__ */ l("div", { className: "space-y-2", children: [
+      i.length > 0 && /* @__PURE__ */ a("div", { className: "grid grid-cols-4 gap-2", children: i.map((r, e) => /* @__PURE__ */ l("div", { className: "relative group", children: [
+        /* @__PURE__ */ a(
+          "img",
+          {
+            src: r.url || "",
+            alt: r.name || `Image ${e + 1}`,
+            className: "size-20 rounded-md object-cover border border-gray-200"
+          }
+        ),
+        /* @__PURE__ */ a(
+          g,
+          {
+            type: "button",
+            variant: "destructive",
+            size: "sm",
+            onClick: () => N(e),
+            className: "absolute top-1 right-1 h-6 w-6 p-0 opacity-0 group-hover:opacity-100 transition-opacity",
+            children: /* @__PURE__ */ a(j, { className: "size-3" })
+          }
+        )
+      ] }, e)) }),
+      /* @__PURE__ */ l(
+        g,
+        {
+          type: "button",
+          variant: "outline",
+          onClick: () => p.current?.click(),
+          className: "w-full",
+          children: [
+            /* @__PURE__ */ a(z, { className: "size-4 mr-2" }),
+            i.length > 0 ? "Add More Images" : "Upload Image"
+          ]
+        }
+      )
+    ] })
+  ] });
+}
+export {
+  R as ImageField
+};

package/dist/LocationField-jDWXjlpx.js

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

package/dist/LookupField-DQ08L9UQ.js

@@ -0,0 +1,96 @@
+import { jsx as l, jsxs as r } from "react/jsx-runtime";
+import { useState as y } from "react";
+import { h as u, X as D, D as j, i as k, B, j as C, k as O, l as F, m as I, I as L } from "./index-CnlyRfY_.js";
+function R({ value: s, onChange: n, field: x, readonly: g, ...b }) {
+  const [N, f] = y(!1), [h, v] = y(""), c = x || b.schema, o = c?.options || [], i = c.multiple || !1, d = c.display_field || "label", p = o.filter(
+    (e) => e.label.toLowerCase().includes(h.toLowerCase())
+  ), t = i ? (Array.isArray(s) ? s : []).map(
+    (e) => o.find((a) => a.value === e)
+  ).filter(Boolean) : s ? [o.find((e) => e.value === s)].filter(Boolean) : [], w = (e) => {
+    if (i) {
+      const a = Array.isArray(s) ? s : [], m = a.includes(e.value);
+      n(m ? a.filter((A) => A !== e.value) : [...a, e.value]);
+    } else
+      n(e.value), f(!1);
+  }, S = (e) => {
+    if (i) {
+      const a = Array.isArray(s) ? s : [];
+      n(a.filter((m) => m !== e));
+    } else
+      n(null);
+  };
+  return g ? t.length ? i ? /* @__PURE__ */ l("div", { className: "flex flex-wrap gap-1", children: t.map((e, a) => /* @__PURE__ */ l(u, { variant: "outline", children: e?.[d] || e?.label }, a)) }) : /* @__PURE__ */ l("span", { className: "text-sm", children: t[0]?.[d] || t[0]?.label }) : /* @__PURE__ */ l("span", { className: "text-sm", children: "-" }) : /* @__PURE__ */ r("div", { className: "space-y-2", children: [
+    t.length > 0 && /* @__PURE__ */ l("div", { className: "flex flex-wrap gap-1", children: t.map((e, a) => /* @__PURE__ */ r(
+      u,
+      {
+        variant: "outline",
+        className: "gap-1",
+        children: [
+          e?.[d] || e?.label,
+          /* @__PURE__ */ l(
+            "button",
+            {
+              onClick: () => S(e?.value),
+              className: "ml-1 hover:text-destructive",
+              type: "button",
+              "aria-label": `Remove ${e?.[d] || e?.label}`,
+              children: /* @__PURE__ */ l(D, { className: "size-3" })
+            }
+          )
+        ]
+      },
+      a
+    )) }),
+    /* @__PURE__ */ r(j, { open: N, onOpenChange: f, children: [
+      /* @__PURE__ */ l(k, { asChild: !0, children: /* @__PURE__ */ r(
+        B,
+        {
+          variant: "outline",
+          className: "w-full justify-start text-left font-normal",
+          type: "button",
+          children: [
+            /* @__PURE__ */ l(C, { className: "mr-2 size-4" }),
+            t.length === 0 ? c?.placeholder || "Select..." : i ? `${t.length} selected` : "Change selection"
+          ]
+        }
+      ) }),
+      /* @__PURE__ */ r(O, { className: "max-w-md", children: [
+        /* @__PURE__ */ l(F, { children: /* @__PURE__ */ r(I, { children: [
+          c?.label || "Select",
+          " ",
+          i && "(multiple)"
+        ] }) }),
+        /* @__PURE__ */ r("div", { className: "space-y-4", children: [
+          /* @__PURE__ */ l(
+            L,
+            {
+              placeholder: "Search...",
+              value: h,
+              onChange: (e) => v(e.target.value),
+              className: "w-full"
+            }
+          ),
+          /* @__PURE__ */ l("div", { className: "max-h-64 overflow-y-auto space-y-1", children: p.length === 0 ? /* @__PURE__ */ l("p", { className: "text-sm text-gray-500 text-center py-4", children: "No options found" }) : p.map((e) => {
+            const a = i ? (Array.isArray(s) ? s : []).includes(e.value) : s === e.value;
+            return /* @__PURE__ */ r(
+              "button",
+              {
+                onClick: () => w(e),
+                className: `w-full text-left px-3 py-2 rounded-md text-sm hover:bg-gray-100 flex items-center justify-between ${a ? "bg-blue-50 text-blue-700" : ""}`,
+                type: "button",
+                children: [
+                  /* @__PURE__ */ l("span", { children: e.label }),
+                  a && /* @__PURE__ */ l(u, { variant: "default", className: "ml-2", children: "Selected" })
+                ]
+              },
+              e.value
+            );
+          }) })
+        ] })
+      ] })
+    ] })
+  ] });
+}
+export {
+  R as LookupField
+};

package/dist/MasterDetailField-Dbk529Ea.js

@@ -0,0 +1,108 @@
+import { jsxs as t, jsx as s } from "react/jsx-runtime";
+import { B as d, n as c, o, h as f, X as g, P as v } from "./index-CnlyRfY_.js";
+import "react";
+function j({
+  value: m,
+  onChange: n,
+  field: h,
+  readonly: u,
+  className: r,
+  ...l
+}) {
+  const a = m || [], b = h || l.schema, x = () => {
+    const e = {
+      id: `new-${Date.now()}`,
+      label: "New Related Record"
+    };
+    n([...a, e]);
+  }, p = (e) => {
+    n(a.filter((N) => N.id !== e));
+  }, i = (e) => {
+    console.log("View detail:", e);
+  };
+  return u ? /* @__PURE__ */ t("div", { className: o("space-y-2", r), children: [
+    a.length === 0 ? /* @__PURE__ */ s("span", { className: "text-sm text-muted-foreground", children: "No related records" }) : a.map((e) => /* @__PURE__ */ t(
+      "div",
+      {
+        className: "flex items-center justify-between p-2 border rounded hover:bg-muted/50",
+        children: [
+          /* @__PURE__ */ s("span", { className: "text-sm", children: e.label }),
+          /* @__PURE__ */ s(
+            d,
+            {
+              type: "button",
+              variant: "ghost",
+              size: "sm",
+              onClick: () => i(e),
+              children: /* @__PURE__ */ s(c, { className: "w-4 h-4" })
+            }
+          )
+        ]
+      },
+      e.id
+    )),
+    /* @__PURE__ */ t("p", { className: "text-xs text-muted-foreground", children: [
+      a.length,
+      " ",
+      a.length === 1 ? "record" : "records"
+    ] })
+  ] }) : /* @__PURE__ */ t("div", { className: o("space-y-3", r), children: [
+    /* @__PURE__ */ t("div", { className: "space-y-2", children: [
+      a.map((e) => /* @__PURE__ */ t(
+        "div",
+        {
+          className: "flex items-center justify-between gap-2 p-2 border rounded hover:bg-muted/50",
+          children: [
+            /* @__PURE__ */ t("div", { className: "flex items-center gap-2 flex-1", children: [
+              /* @__PURE__ */ s(f, { variant: "outline", children: e.id }),
+              /* @__PURE__ */ s("span", { className: "text-sm flex-1", children: e.label })
+            ] }),
+            /* @__PURE__ */ t("div", { className: "flex items-center gap-1", children: [
+              /* @__PURE__ */ s(
+                d,
+                {
+                  type: "button",
+                  variant: "ghost",
+                  size: "sm",
+                  onClick: () => i(e),
+                  children: /* @__PURE__ */ s(c, { className: "w-4 h-4" })
+                }
+              ),
+              /* @__PURE__ */ s(
+                d,
+                {
+                  type: "button",
+                  variant: "ghost",
+                  size: "sm",
+                  onClick: () => p(e.id),
+                  disabled: l.disabled,
+                  children: /* @__PURE__ */ s(g, { className: "w-4 h-4" })
+                }
+              )
+            ] })
+          ]
+        },
+        e.id
+      )),
+      a.length === 0 && /* @__PURE__ */ s("div", { className: "text-sm text-muted-foreground text-center py-4 border border-dashed rounded bg-muted/20", children: "No related records" })
+    ] }),
+    /* @__PURE__ */ t(
+      d,
+      {
+        type: "button",
+        variant: "outline",
+        className: "w-full",
+        onClick: x,
+        disabled: l.disabled,
+        children: [
+          /* @__PURE__ */ s(v, { className: "w-4 h-4 mr-2" }),
+          "Add ",
+          b?.label || "Record"
+        ]
+      }
+    )
+  ] });
+}
+export {
+  j as MasterDetailField
+};

package/dist/NumberField-BVroN9aV.js

@@ -0,0 +1,26 @@
+import { jsx as a } from "react/jsx-runtime";
+import { I as c } from "./index-CnlyRfY_.js";
+import "react";
+function f({ value: e, onChange: p, field: l, readonly: t, ...n }) {
+  if (t)
+    return /* @__PURE__ */ a("span", { className: "text-sm", children: e ?? "-" });
+  const r = l || n.schema, o = r?.precision, { inputType: u, ...s } = n;
+  return /* @__PURE__ */ a(
+    c,
+    {
+      ...s,
+      type: "number",
+      value: e ?? "",
+      onChange: (m) => {
+        const i = m.target.value;
+        p(i === "" ? null : Number(i));
+      },
+      placeholder: r?.placeholder,
+      disabled: t || s.disabled,
+      step: o ? Math.pow(10, -o) : "any"
+    }
+  );
+}
+export {
+  f as NumberField
+};

package/dist/ObjectField-CT3l_IHW.js

@@ -0,0 +1,48 @@
+import { jsx as s, jsxs as x } from "react/jsx-runtime";
+import { useState as g, useEffect as S } from "react";
+import { o as m, T as y } from "./index-CnlyRfY_.js";
+function j({ value: r, onChange: o, field: u, readonly: c, ...t }) {
+  const N = u || t.schema, h = () => r == null ? "" : JSON.stringify(r, null, 2), [e, n] = g(h), [i, d] = g(null);
+  return S(() => {
+    try {
+      if (r == null) {
+        n("");
+        return;
+      }
+      const l = e ? JSON.parse(e) : null;
+      JSON.stringify(l) !== JSON.stringify(r) && n(JSON.stringify(r, null, 2));
+    } catch {
+      n(JSON.stringify(r, null, 2));
+    }
+  }, [r, e]), c ? r ? /* @__PURE__ */ s("pre", { className: m("text-xs bg-gray-50 p-2 rounded border border-gray-200 overflow-auto max-h-40", t.className), children: JSON.stringify(r, null, 2) }) : /* @__PURE__ */ s("span", { className: "text-sm", children: "-" }) : /* @__PURE__ */ x("div", { className: "space-y-1", children: [
+    /* @__PURE__ */ s(
+      y,
+      {
+        value: e,
+        onChange: (l) => {
+          const a = l.target.value;
+          if (n(a), d(null), !a.trim()) {
+            o(null);
+            return;
+          }
+          try {
+            const f = JSON.parse(a);
+            o(f);
+          } catch {
+            d("Invalid JSON");
+          }
+        },
+        placeholder: N?.placeholder || `{
+  "key": "value"
+}`,
+        disabled: c || t.disabled,
+        className: m("font-mono text-xs", i ? "border-red-500 focus-visible:ring-red-500" : "", t.className),
+        rows: 6
+      }
+    ),
+    i && /* @__PURE__ */ s("p", { className: "text-xs text-red-500", children: i })
+  ] });
+}
+export {
+  j as ObjectField
+};

package/dist/PasswordField-DweVLEE0.js

@@ -0,0 +1,38 @@
+import { jsx as s, jsxs as m } from "react/jsx-runtime";
+import { useState as h } from "react";
+import { I as u, B as f, E as g, g as x } from "./index-CnlyRfY_.js";
+function N({ value: o, onChange: l, field: n, readonly: a, className: i, ...t }) {
+  const [e, c] = h(!1), p = n || t.schema;
+  if (a)
+    return /* @__PURE__ */ s("span", { className: "text-sm", children: "••••••••" });
+  const { inputType: y, ...r } = t;
+  return /* @__PURE__ */ m("div", { className: "relative", children: [
+    /* @__PURE__ */ s(
+      u,
+      {
+        ...r,
+        type: e ? "text" : "password",
+        value: o || "",
+        onChange: (d) => l(d.target.value),
+        placeholder: p?.placeholder,
+        disabled: a || r.disabled,
+        className: `pr-10 ${i || ""}`
+      }
+    ),
+    /* @__PURE__ */ s(
+      f,
+      {
+        type: "button",
+        variant: "ghost",
+        size: "sm",
+        className: "absolute right-0 top-0 h-full px-3 py-2 hover:bg-transparent",
+        onClick: () => c(!e),
+        tabIndex: -1,
+        children: e ? /* @__PURE__ */ s(g, { className: "size-4 text-gray-500" }) : /* @__PURE__ */ s(x, { className: "size-4 text-gray-500" })
+      }
+    )
+  ] });
+}
+export {
+  N as PasswordField
+};

package/dist/PercentField-ZpWUK97K.js

@@ -0,0 +1,63 @@
+import { jsx as i, jsxs as d } from "react/jsx-runtime";
+import { I as g, f as y } from "./index-CnlyRfY_.js";
+import "react";
+function S({ value: e, onChange: s, field: o, readonly: n, errorMessage: u, className: p, ...a }) {
+  const m = o || a.schema, r = m?.precision ?? 2;
+  if (n)
+    return e == null ? /* @__PURE__ */ i("span", { className: "text-sm", children: "-" }) : /* @__PURE__ */ d("span", { className: "text-sm font-medium tabular-nums", children: [
+      (e * 100).toFixed(r),
+      "%"
+    ] });
+  const h = e != null ? e * 100 : "", f = e != null ? e * 100 : 0, x = (t) => {
+    if (t.target.value === "") {
+      s(null);
+      return;
+    }
+    const l = parseFloat(t.target.value), c = isNaN(l) ? null : l / 100;
+    s(c);
+  }, b = (t) => {
+    if (n || a.disabled) return;
+    if (!Array.isArray(t) || t.length === 0) {
+      s(null);
+      return;
+    }
+    const l = t[0], c = typeof l == "number" ? l / 100 : null;
+    s(c);
+  }, N = Math.pow(10, -r);
+  return /* @__PURE__ */ d("div", { className: "space-y-2", children: [
+    /* @__PURE__ */ d("div", { className: "relative", children: [
+      /* @__PURE__ */ i(
+        g,
+        {
+          ...a,
+          type: "number",
+          value: h,
+          onChange: x,
+          placeholder: m?.placeholder || "0",
+          disabled: n || a.disabled,
+          className: `pr-8 ${p || ""}`,
+          step: Math.pow(10, -r).toFixed(r),
+          "aria-invalid": !!u
+        }
+      ),
+      /* @__PURE__ */ i("span", { className: "absolute right-3 top-1/2 -translate-y-1/2 text-sm text-gray-500", children: "%" })
+    ] }),
+    /* @__PURE__ */ i(
+      y,
+      {
+        value: [f],
+        onValueChange: b,
+        min: 0,
+        max: 100,
+        step: N,
+        disabled: n || a.disabled,
+        className: "w-full",
+        "aria-label": "Percentage",
+        "data-testid": "percent-slider"
+      }
+    )
+  ] });
+}
+export {
+  S as PercentField
+};