"use client";
import { jsxs as o, Fragment as s, jsx as e } from "react/jsx-runtime";
import { BackgroundControl as u } from "../../controls/background.control.js";
import { ColorControl as d } from "../../controls/color.control.js";
import { TextShadowControl as f } from "../../controls/text-shadow.control.js";
import { TypographyControl as E } from "../../controls/typography.control.js";
import { Accordion as l } from "../../shared/accordion.js";
import { Tabs as n } from "../../shared/tabs.js";
import { SettingsType as r, ThemeSettingsType as T } from "../../../types/index.js";
import { PseudoClass as t, Unit as a } from "../../../types/style.js";
import { FiX as b } from "../../../../../../node_modules/.pnpm/react-icons@5.5.0_react@19.0.0/node_modules/react-icons/fi/index.js";
import { RxButton as h } from "../../../../../../node_modules/.pnpm/react-icons@5.5.0_react@19.0.0/node_modules/react-icons/rx/index.js";
import N from "./theme-button-presets.js";
import { SelectControl as y } from "../../controls/select.control.js";
import { useSettings as g } from "../../../hooks/use-settings.js";
import { SpacingControl as i } from "../../controls/spacing.control.js";
import { Separator as p } from "../../shared/separator.js";
const P = ({ setCurrentSetting: c }) => {
  const [m] = g(
    "button.borderStyle",
    r.THEME
  );
  return /* @__PURE__ */ o(s, { children: [
    /* @__PURE__ */ o("div", { className: "flex items-center justify-between border-b p-4", children: [
      /* @__PURE__ */ o("div", { className: "flex items-center gap-2 text-base font-semibold", children: [
        /* @__PURE__ */ e(h, {}),
        "Button"
      ] }),
      /* @__PURE__ */ e(
        "button",
        {
          className: "text-slate-600 hover:text-slate-900",
          onClick: () => c(T.GLOBAL),
          children: /* @__PURE__ */ e(b, { size: 16 })
        }
      )
    ] }),
    /* @__PURE__ */ o(l, { defaultValue: ["button", "type"], type: "multiple", children: [
      /* @__PURE__ */ o(l.Item, { value: "button", children: [
        /* @__PURE__ */ e(l.Trigger, { className: "px-4", children: "Button" }),
        /* @__PURE__ */ o(l.Content, { className: "px-4", children: [
          /* @__PURE__ */ e(
            E,
            {
              type: r.THEME,
              fieldName: "button.typography",
              className: "mt-0"
            }
          ),
          /* @__PURE__ */ e(f, { fieldName: "button.textShadow", type: r.THEME }),
          /* @__PURE__ */ o(n, { defaultValue: t.DEFAULT, className: "mt-4", children: [
            /* @__PURE__ */ o(n.List, { className: "h-8 w-full rounded-full", children: [
              /* @__PURE__ */ e(
                n.Trigger,
                {
                  className: "flex-1 rounded-full p-[3px] text-[13px]",
                  value: t.DEFAULT,
                  children: "Normal"
                }
              ),
              /* @__PURE__ */ e(
                n.Trigger,
                {
                  className: "flex-1 rounded-full p-[3px] text-[13px]",
                  value: t.HOVER,
                  children: "Hover"
                }
              )
            ] }),
            /* @__PURE__ */ o(n.Content, { value: t.DEFAULT, children: [
              /* @__PURE__ */ e(
                d,
                {
                  fieldName: "button.color",
                  type: r.THEME,
                  mode: t.DEFAULT
                }
              ),
              /* @__PURE__ */ e(
                u,
                {
                  fieldName: "button.background",
                  type: r.THEME,
                  mode: t.DEFAULT,
                  showImage: !1
                }
              )
            ] }),
            /* @__PURE__ */ o(n.Content, { value: t.HOVER, children: [
              /* @__PURE__ */ e(
                d,
                {
                  fieldName: "button.color",
                  mode: t.HOVER,
                  type: r.THEME
                }
              ),
              /* @__PURE__ */ e(
                u,
                {
                  fieldName: "button.background",
                  type: r.THEME,
                  mode: t.HOVER,
                  showImage: !1
                }
              )
            ] })
          ] }),
          /* @__PURE__ */ e(p, { className: "my-4" }),
          /* @__PURE__ */ e(
            y,
            {
              fieldName: "button.borderStyle",
              label: "Border Type",
              type: r.THEME,
              mode: t.DEFAULT,
              options: [
                { content: "None", value: "none" },
                { content: "Solid", value: "solid" },
                { content: "Double", value: "double" },
                { content: "Dotted", value: "dotted" },
                { content: "Groove", value: "groove" }
              ]
            }
          ),
          (m == null ? void 0 : m.default) && m.default !== "none" && /* @__PURE__ */ o(s, { children: [
            /* @__PURE__ */ e(
              i,
              {
                type: r.THEME,
                fieldName: "button.borderWidth",
                label: "Border Width",
                mode: t.DEFAULT,
                min: 0
              }
            ),
            /* @__PURE__ */ e(
              d,
              {
                type: r.THEME,
                label: "Border Color",
                fieldName: "button.borderColor",
                mode: t.DEFAULT
              }
            )
          ] }),
          /* @__PURE__ */ e(
            i,
            {
              fieldName: "button.borderRadius",
              label: "Border Radius",
              type: r.THEME,
              mode: t.DEFAULT,
              units: [a.PX, a.EM, a.REM]
            }
          ),
          /* @__PURE__ */ e(p, { className: "my-4" }),
          /* @__PURE__ */ e(
            i,
            {
              fieldName: "button.padding",
              label: "Padding",
              responsive: !0,
              units: [a.PX, a.EM, a.REM],
              type: r.THEME,
              mode: t.DEFAULT
            }
          )
        ] })
      ] }),
      /* @__PURE__ */ o(l.Item, { value: "type", children: [
        /* @__PURE__ */ e(l.Trigger, { className: "px-4", children: "Type" }),
        /* @__PURE__ */ e(l.Content, { className: "px-4", children: /* @__PURE__ */ e(N, {}) })
      ] })
    ] })
  ] });
};
export {
  P as default
};
//# sourceMappingURL=theme-button-settings.js.map
