"use client";
import { jsx as r, jsxs as o, Fragment as f } from "react/jsx-runtime";
import { ColorControl as m } from "../../../components/controls/color.control.js";
import { SliderUnitControl as c } from "../../../components/controls/slider-unit.control.js";
import { SpacingControl as p } from "../../../components/controls/spacing.control.js";
import { Accordion as n } from "../../../components/shared/accordion.js";
import { Separator as C } from "../../../components/shared/separator.js";
import { Tabs as a } from "../../../components/shared/tabs.js";
import { useSettings as u } from "../../../hooks/use-settings.js";
import { SettingsType as l } from "../../../types/index.js";
import { Unit as e, PseudoClass as t } from "../../../types/style.js";
const D = () => {
  const [i] = u("view.desktop", l.BLOCK), [s] = u(
    "rotate.{{BREAKPOINT}}.unit",
    l.BLOCK
  ), d = {
    [e.DEG]: { min: 1, max: 360, step: 1 },
    [e.GRAD]: { min: 1, max: 400, step: 1 },
    [e.RAD]: { min: 0.017, max: 6.283, step: 1e-3 },
    [e.TURN]: { min: 0.01, max: 1, step: 0.01 }
  };
  return /* @__PURE__ */ r(n, { defaultValue: "General", type: "single", collapsible: !0, children: /* @__PURE__ */ o(n.Item, { value: "General", children: [
    /* @__PURE__ */ r(n.Trigger, { className: "p-4", children: "General" }),
    /* @__PURE__ */ o(n.Content, { className: "px-4", children: [
      /* @__PURE__ */ o(a, { defaultValue: t.DEFAULT, children: [
        /* @__PURE__ */ o(a.List, { className: "mb-2 h-8 w-full rounded-full", children: [
          /* @__PURE__ */ r(
            a.Trigger,
            {
              className: "flex-1 rounded-full p-[3px] text-[13px]",
              value: t.DEFAULT,
              children: "Normal"
            }
          ),
          /* @__PURE__ */ r(
            a.Trigger,
            {
              className: "flex-1 rounded-full p-[3px] text-[13px]",
              value: t.HOVER,
              children: "Hover"
            }
          )
        ] }),
        /* @__PURE__ */ o(a.Content, { value: t.DEFAULT, children: [
          /* @__PURE__ */ r(
            m,
            {
              label: "Primary Color",
              fieldName: "color",
              type: l.BLOCK,
              className: "mt-0",
              mode: t.DEFAULT,
              side: "bottom"
            }
          ),
          i !== "default" && /* @__PURE__ */ r(
            m,
            {
              label: "Secondary Color",
              fieldName: "secondaryColor",
              type: l.BLOCK,
              className: "mt-3",
              mode: t.DEFAULT
            }
          )
        ] }),
        /* @__PURE__ */ o(a.Content, { value: t.HOVER, children: [
          /* @__PURE__ */ r(
            m,
            {
              label: "Primary Color",
              fieldName: "color",
              type: l.BLOCK,
              className: "mt-0",
              mode: t.HOVER
            }
          ),
          i !== "default" && /* @__PURE__ */ r(
            m,
            {
              label: "Secondary Color",
              fieldName: "secondaryColor",
              type: l.BLOCK,
              className: "mt-3",
              mode: t.HOVER
            }
          )
        ] })
      ] }),
      /* @__PURE__ */ r(C, { className: "my-4" }),
      /* @__PURE__ */ r(
        c,
        {
          responsive: !0,
          label: "Size",
          fieldName: "size",
          type: l.BLOCK,
          units: [e.PX, e.REM, e.EM]
        }
      ),
      /* @__PURE__ */ r(
        c,
        {
          responsive: !0,
          label: "Rotate",
          fieldName: "rotate",
          type: l.BLOCK,
          units: [e.DEG, e.GRAD, e.RAD, e.TURN],
          step: d[s ?? e.DEG].step,
          min: d[s ?? e.DEG].min,
          max: d[s ?? e.DEG].max
        }
      ),
      i !== "default" && /* @__PURE__ */ o(f, { children: [
        /* @__PURE__ */ r(
          p,
          {
            type: l.BLOCK,
            fieldName: "padding",
            label: "Padding",
            responsive: !0
          }
        ),
        /* @__PURE__ */ r(
          p,
          {
            type: l.BLOCK,
            fieldName: "border.radius",
            label: "Border Radius",
            responsive: !0,
            units: [e.PX, e.PERCENTAGE]
          }
        )
      ] }),
      i === "framed" && /* @__PURE__ */ r(
        p,
        {
          type: l.BLOCK,
          fieldName: "border.width",
          label: "Border Width",
          responsive: !0,
          units: [e.PX]
        }
      )
    ] })
  ] }) });
};
export {
  D as default
};
//# sourceMappingURL=icon-style.control.js.map
