"use client";
import { jsxs as t, Fragment as d, jsx as e } from "react/jsx-runtime";
import { TypographyControl as r } from "../../controls/typography.control.js";
import { Accordion as o } from "../../shared/accordion.js";
import { Button as f } from "../../shared/button.js";
import { Label as g } from "../../shared/label.js";
import { useSettings as u } from "../../../hooks/use-settings.js";
import { SettingsType as s, ThemeSettingsType as b } from "../../../types/index.js";
import { createId as N } from "../../../../../../utils.js";
import { l as n } from "../../../../../../_virtual/lodash.js";
import { ContentEditable as T } from "../../shared/content-editable.js";
import { BsTrash as E, BsPlus as v } from "../../../../../../node_modules/.pnpm/react-icons@5.5.0_react@19.0.0/node_modules/react-icons/bs/index.js";
import { FiX as x } from "../../../../../../node_modules/.pnpm/react-icons@5.5.0_react@19.0.0/node_modules/react-icons/fi/index.js";
import { TbTypography as H } from "../../../../../../node_modules/.pnpm/react-icons@5.5.0_react@19.0.0/node_modules/react-icons/tb/index.js";
const F = ({ setCurrentSetting: c }) => {
  const [l, i] = u("typography.presets", s.THEME);
  return /* @__PURE__ */ t(d, { children: [
    /* @__PURE__ */ t("div", { className: "flex items-center justify-between border-b p-4", children: [
      /* @__PURE__ */ t("div", { className: "flex items-center gap-2 text-base font-semibold", children: [
        /* @__PURE__ */ e(H, { size: 18 }),
        "Typography"
      ] }),
      /* @__PURE__ */ e(
        "button",
        {
          className: "text-gray-600 hover:text-gray-900",
          onClick: () => c(b.GLOBAL),
          children: /* @__PURE__ */ e(x, { size: 16 })
        }
      )
    ] }),
    /* @__PURE__ */ t(o, { defaultValue: ["system", "custom"], type: "multiple", children: [
      /* @__PURE__ */ t(o.Item, { value: "system", children: [
        /* @__PURE__ */ e(o.Trigger, { className: "px-4", children: "System" }),
        /* @__PURE__ */ t(o.Content, { className: "px-4", children: [
          /* @__PURE__ */ e(
            r,
            {
              label: "Body",
              fieldName: "typography.body",
              type: s.THEME,
              showPresets: !1,
              className: "mt-0"
            }
          ),
          /* @__PURE__ */ e(
            r,
            {
              label: "H1",
              fieldName: "typography.h1",
              type: s.THEME,
              showPresets: !1
            }
          ),
          /* @__PURE__ */ e(
            r,
            {
              label: "H2",
              fieldName: "typography.h2",
              type: s.THEME,
              showPresets: !1
            }
          ),
          /* @__PURE__ */ e(
            r,
            {
              label: "H3",
              fieldName: "typography.h3",
              type: s.THEME,
              showPresets: !1
            }
          ),
          /* @__PURE__ */ e(
            r,
            {
              label: "H4",
              fieldName: "typography.h4",
              type: s.THEME,
              showPresets: !1
            }
          ),
          /* @__PURE__ */ e(
            r,
            {
              label: "H5",
              fieldName: "typography.h5",
              type: s.THEME,
              showPresets: !1
            }
          ),
          /* @__PURE__ */ e(
            r,
            {
              label: "H6",
              fieldName: "typography.h6",
              type: s.THEME,
              showPresets: !1
            }
          )
        ] })
      ] }),
      /* @__PURE__ */ t(o.Item, { value: "custom", children: [
        /* @__PURE__ */ e(o.Trigger, { className: "px-4", children: "Custom" }),
        /* @__PURE__ */ t(o.Content, { className: "pe-4 ps-2", children: [
          l.map((p, m) => /* @__PURE__ */ t("div", { className: "group mb-4 flex items-center justify-between gap-2", children: [
            /* @__PURE__ */ e(
              T,
              {
                onChange: (a) => {
                  const h = a.target.value, y = n.cloneDeep(l);
                  y[m].name = h, i(y);
                },
                onKeyDown: (a) => a.key === "Enter" && a.preventDefault(),
                html: p.name,
                tagName: "p",
                className: "me-auto rounded-sm border border-transparent px-2 py-1 text-xs hover:border-gray-100 focus-visible:border-gray-100 focus-visible:outline-0"
              }
            ),
            /* @__PURE__ */ e(g, { children: /* @__PURE__ */ e(
              E,
              {
                onClick: () => {
                  const a = n.cloneDeep(l);
                  a.splice(m, 1), i(a);
                },
                className: "hover:text-danger-500  mx-2 cursor-pointer "
              }
            ) }),
            /* @__PURE__ */ e(
              r,
              {
                type: s.THEME,
                fieldName: `typography.presets.${m}.value`,
                label: "",
                className: "mt-0",
                showPresets: !1
              }
            )
          ] }, m)),
          /* @__PURE__ */ e("div", { className: "mt-5 flex justify-center", children: /* @__PURE__ */ t(
            f,
            {
              onClick: () => {
                const p = n.cloneDeep(l);
                p.push({
                  id: N(),
                  name: `Typography #${l.length + 1}`,
                  value: void 0
                }), i(p);
              },
              variant: "outline",
              className: "flex",
              children: [
                /* @__PURE__ */ e(v, { size: 20, className: "me-1" }),
                "Add Typography"
              ]
            }
          ) })
        ] })
      ] })
    ] })
  ] });
};
export {
  F as default
};
//# sourceMappingURL=theme-typography-settings.js.map
