import { j as s } from "../../../../../../../_virtual/jsx-runtime.js";
import { useState as x, useEffect as f } from "react";
import "../../../../../../../node_modules/.pnpm/@formkit_auto-animate@0.8.2/node_modules/@formkit/auto-animate/index.js";
import "../../../../../../../node_modules/.pnpm/react-hot-toast@2.5.2_react-dom@18.3.0-canary-3d9b20132-20240124_react@18.3.0-canary-3d_c02c1e17bf76c343fd22d1f22394ecf5/node_modules/react-hot-toast/dist/index.js";
import { FieldTitle as g } from "../field-factory.js";
import { Root as j, Slot as v } from "../../../../../../../node_modules/.pnpm/@radix-ui_themes@3.1.4_@types_react-dom@18.3.6_@types_react@18.3.3__@types_react@18.3.3_46b1dabc193c5ff5696ee783983c694e/node_modules/@radix-ui/themes/dist/esm/components/text-field.js";
import { Root as b, Trigger as q, Content as C, Group as V, Item as w } from "../../../../../../../node_modules/.pnpm/@radix-ui_themes@3.1.4_@types_react-dom@18.3.6_@types_react@18.3.3__@types_react@18.3.3_46b1dabc193c5ff5696ee783983c694e/node_modules/@radix-ui/themes/dist/esm/components/select.js";
const G = (o) => {
  const { currentValue: t, onChange: c, schema: u, title: m, description: d, placeholder: y } = o, h = /([0-9\.]+)(lh|rlh|px|em|rem|%|dvh|vh|vw|dvw|cqw|cqh|cqi|cqb|cqmin|cqmax)/, [N, r, n = "px"] = h.exec(t ?? "") || [], [i, l] = x({
    value: r,
    unit: n
  });
  f(() => {
    const e = `${i.value}${i.unit}`;
    e !== t && c(e);
  }, [i, t]);
  const p = u["ui:css-units"] ?? [];
  return /* @__PURE__ */ s.jsxs("div", { className: "field field-csslength basis-full flex justify-between", children: [
    /* @__PURE__ */ s.jsx(g, { title: m, description: d }),
    /* @__PURE__ */ s.jsx(
      j,
      {
        type: "number",
        size: "1",
        defaultValue: r,
        onChange: (e) => l((a) => ({
          ...a,
          value: e.target.value
        })),
        className: "!pr-1 !basis-[90px] focus:(!ring-0 !border-0)",
        children: /* @__PURE__ */ s.jsx(v, { side: "right", className: "!mr-px", children: /* @__PURE__ */ s.jsxs(
          b,
          {
            defaultValue: n,
            size: "1",
            onValueChange: (e) => l((a) => ({ ...a, unit: e })),
            children: [
              /* @__PURE__ */ s.jsx(q, { radius: "medium", variant: "ghost" }),
              /* @__PURE__ */ s.jsx(C, { position: "popper", children: /* @__PURE__ */ s.jsx(V, { children: p.map((e) => /* @__PURE__ */ s.jsx(w, { value: e, children: e }, e)) }) })
            ]
          }
        ) })
      }
    )
  ] });
};
export {
  G as CssLengthField
};
//# sourceMappingURL=css-length.js.map
