import { j as jsxRuntimeExports } from "../../../../../../../_virtual/jsx-runtime.js";
import { useState, useEffect } 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@19.1.1_react@19.1.1__react@19.1.1/node_modules/react-hot-toast/dist/index.js";
import { FieldTitle } from "../field-factory.js";
import { Root as u, Slot as c } from "../../../../../../../node_modules/.pnpm/@radix-ui_themes@3.2.1_@types_react-dom@19.1.9_@types_react@19.1.13__@types_react@19.1._832fa1fef691e6e9510ada03948dc85c/node_modules/@radix-ui/themes/dist/esm/components/text-field.js";
import { Root as C, Trigger as u$1, Content as g, Group as y, Item as v } from "../../../../../../../node_modules/.pnpm/@radix-ui_themes@3.2.1_@types_react-dom@19.1.9_@types_react@19.1.13__@types_react@19.1._832fa1fef691e6e9510ada03948dc85c/node_modules/@radix-ui/themes/dist/esm/components/select.js";
const CssLengthField = (props) => {
  const { currentValue, onChange, schema, title, description, placeholder } = props;
  const rx = /([0-9\.]+)(lh|rlh|px|em|rem|%|dvh|vh|vw|dvw|cqw|cqh|cqi|cqb|cqmin|cqmax)/;
  const [_, baseVal, baseUnit = "px"] = rx.exec(currentValue ?? "") || [];
  const [state, setState] = useState({
    value: baseVal,
    unit: baseUnit
  });
  useEffect(() => {
    const newValue = `${state.value}${state.unit}`;
    if (newValue !== currentValue) {
      onChange(newValue);
    }
  }, [state, currentValue]);
  const units = schema["ui:css-units"] ?? [];
  return /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "field field-csslength basis-full flex justify-between", children: [
    /* @__PURE__ */ jsxRuntimeExports.jsx(FieldTitle, { title, description }),
    /* @__PURE__ */ jsxRuntimeExports.jsx(
      u,
      {
        type: "number",
        size: "1",
        defaultValue: baseVal,
        onChange: (e) => setState((prev) => ({
          ...prev,
          value: e.target.value
        })),
        className: "!pr-1 !basis-[90px] focus:(!ring-0 !border-0)",
        children: /* @__PURE__ */ jsxRuntimeExports.jsx(c, { side: "right", className: "!mr-px", children: /* @__PURE__ */ jsxRuntimeExports.jsxs(
          C,
          {
            defaultValue: baseUnit,
            size: "1",
            onValueChange: (value) => setState((prev) => ({ ...prev, unit: value })),
            children: [
              /* @__PURE__ */ jsxRuntimeExports.jsx(u$1, { radius: "medium", variant: "ghost" }),
              /* @__PURE__ */ jsxRuntimeExports.jsx(g, { position: "popper", children: /* @__PURE__ */ jsxRuntimeExports.jsx(y, { children: units.map((option) => /* @__PURE__ */ jsxRuntimeExports.jsx(v, { value: option, children: option }, option)) }) })
            ]
          }
        ) })
      }
    )
  ] });
};
export {
  CssLengthField
};
//# sourceMappingURL=css-length.js.map
