@dndbuilder.com/react
Version:
Drag and drop builder for React
182 lines (181 loc) • 6.54 kB
JavaScript
"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 y from "./theme-button-presets.js";
import { SelectControl as g } from "../../controls/select.control.js";
import { useSettings as N } 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] = N(
"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-gray-600 hover:text-gray-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(
g,
{
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(y, {}) })
] })
] })
] });
};
export {
P as default
};
//# sourceMappingURL=theme-button-settings.js.map