@dndbuilder.com/react
Version:
Drag and drop builder for React
140 lines (139 loc) • 5.24 kB
JavaScript
"use client";
import { jsxs as t, Fragment as E, jsx as e } from "react/jsx-runtime";
import { BackgroundControl as u } from "../../controls/background.control.js";
import { ColorControl as c } from "../../controls/color.control.js";
import { TextShadowControl as g } from "../../controls/text-shadow.control.js";
import { TypographyControl as v } from "../../controls/typography.control.js";
import { Button as y } from "../../shared/button.js";
import { Popover as i } from "../../shared/popover.js";
import { Tabs as s } from "../../shared/tabs.js";
import { useSettings as T } from "../../../hooks/use-settings.js";
import { SettingsType as l } from "../../../types/index.js";
import { PseudoClass as r } from "../../../types/style.js";
import { createId as b } from "../../../../../../utils.js";
import { l as f } from "../../../../../../_virtual/lodash.js";
import { ContentEditable as N } from "../../shared/content-editable.js";
import { BsPlus as x } from "../../../../../../node_modules/.pnpm/react-icons@5.5.0_react@19.0.0/node_modules/react-icons/bs/index.js";
import { CiEdit as C } from "../../../../../../node_modules/.pnpm/react-icons@5.5.0_react@19.0.0/node_modules/react-icons/ci/index.js";
const S = () => {
const [a, p] = T("button.presets", l.THEME);
return /* @__PURE__ */ t(E, { children: [
a.map((m, o) => /* @__PURE__ */ t("div", { className: "mt-2 flex items-center justify-between", children: [
/* @__PURE__ */ e(
N,
{
onChange: (n) => {
const h = n.target.value, d = f.cloneDeep(a);
d[o].name = h, p(d);
},
onKeyDown: (n) => n.key === "Enter" && n.preventDefault(),
html: m.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__ */ t(i, { children: [
/* @__PURE__ */ e(i.Trigger, { asChild: !0, children: /* @__PURE__ */ e("div", { className: "cursor-pointer rounded-sm border bg-gray-50 px-3 py-1.5", children: /* @__PURE__ */ e(C, {}) }) }),
/* @__PURE__ */ t(i.Content, { align: "center", side: "left", children: [
/* @__PURE__ */ e(
v,
{
type: l.THEME,
fieldName: `button.presets.${o}.value.typography`,
className: "mt-0"
}
),
/* @__PURE__ */ e(
g,
{
fieldName: `button.presets.${o}.value.textShadow`,
type: l.THEME
}
),
/* @__PURE__ */ t(s, { defaultValue: r.DEFAULT, className: "mt-4", children: [
/* @__PURE__ */ t(s.List, { className: "h-8 w-full rounded-full", children: [
/* @__PURE__ */ e(
s.Trigger,
{
className: "flex-1 rounded-full p-[3px] text-[13px]",
value: r.DEFAULT,
children: "Normal"
}
),
/* @__PURE__ */ e(
s.Trigger,
{
className: "flex-1 rounded-full p-[3px] text-[13px]",
value: r.HOVER,
children: "Hover"
}
)
] }),
/* @__PURE__ */ t(s.Content, { value: r.DEFAULT, children: [
/* @__PURE__ */ e(
c,
{
fieldName: `button.presets.${o}.value.color`,
type: l.THEME,
mode: r.DEFAULT
}
),
/* @__PURE__ */ e(
u,
{
fieldName: `button.presets.${o}.value.background`,
type: l.THEME,
mode: r.DEFAULT,
showImage: !1
}
)
] }),
/* @__PURE__ */ t(s.Content, { value: r.HOVER, children: [
/* @__PURE__ */ e(
c,
{
fieldName: `button.presets.${o}.value.color`,
mode: r.HOVER,
type: l.THEME
}
),
/* @__PURE__ */ e(
u,
{
fieldName: `button.presets.${o}.value.background`,
type: l.THEME,
mode: r.HOVER,
showImage: !1
}
)
] })
] }),
/* @__PURE__ */ e(i.Arrow, { width: 16, height: 8, fill: "white" })
] })
] })
] }, o)),
/* @__PURE__ */ e("div", { className: "mt-5 flex justify-center", children: /* @__PURE__ */ t(
y,
{
onClick: () => {
const m = f.cloneDeep(a);
m.push({
name: `Type #${a.length + 1}`,
value: {},
id: b()
}), p(m);
},
variant: "outline",
className: "flex",
children: [
/* @__PURE__ */ e(x, { size: 20, className: "me-1" }),
"Add Type"
]
}
) })
] });
};
export {
S as default
};
//# sourceMappingURL=theme-button-presets.js.map