"use client";
import { jsxs as i, jsx as e, Fragment as c } from "react/jsx-runtime";
import { useSettings as d } from "../../../hooks/use-settings.js";
import { Unit as n } from "../../../types/style.js";
import { classNames as m } from "../../../utils/index.js";
import { SelectControl as u } from "../../../components/controls/select.control.js";
import { SpacingControl as a } from "../../../components/controls/spacing.control.js";
import { ColorControl as p } from "../../../components/controls/color.control.js";
const g = ({
  fieldName: o,
  mode: r,
  type: t,
  className: s
}) => {
  const [l] = d(
    r ? `${o}.type.${r}` : `${o}.type`,
    t
  );
  return /* @__PURE__ */ i("div", { className: m(s), children: [
    /* @__PURE__ */ e(
      u,
      {
        type: t,
        options: [
          { content: "None", value: "none" },
          { content: "Solid", value: "solid" },
          { content: "Double", value: "double" },
          { content: "Dotted", value: "dotted" },
          { content: "Groove", value: "groove" }
        ],
        fieldName: `${o}.type`,
        label: "Border Type",
        mode: r
      }
    ),
    l && l !== "none" && /* @__PURE__ */ i(c, { children: [
      /* @__PURE__ */ e(
        a,
        {
          type: t,
          fieldName: `${o}.width`,
          label: "Border Width",
          mode: r,
          min: 0
        }
      ),
      /* @__PURE__ */ e(
        p,
        {
          type: t,
          label: "Border Color",
          fieldName: `${o}.color`,
          mode: r
        }
      )
    ] }),
    /* @__PURE__ */ e(
      a,
      {
        type: t,
        fieldName: `${o}.radius`,
        label: "Border Radius",
        mode: r,
        min: 0,
        units: [n.PX, n.PERCENTAGE, n.REM, n.EM]
      }
    )
  ] });
};
export {
  g as TabsBorderControl,
  g as default
};
//# sourceMappingURL=tabs-border.control.js.map
