@dndbuilder.com/react
Version:
Drag and drop builder for React
164 lines (163 loc) • 5.24 kB
JavaScript
"use client";
import { jsx as e, jsxs as r, Fragment as p } from "react/jsx-runtime";
import { BackgroundControl as s } from "../../../components/controls/background.control.js";
import { ColorControl as d } from "../../../components/controls/color.control.js";
import { SelectControl as f } from "../../../components/controls/select.control.js";
import { SliderInputControl as c } from "../../../components/controls/slider-input.control.js";
import { SpacingControl as n } from "../../../components/controls/spacing.control.js";
import { TextShadowControl as C } from "../../../components/controls/text-shadow.control.js";
import { TypographyControl as y } from "../../../components/controls/typography.control.js";
import { Accordion as a } from "../../../components/shared/accordion.js";
import { Separator as u } from "../../../components/shared/separator.js";
import { Tabs as l } from "../../../components/shared/tabs.js";
import { useSettings as L } from "../../../hooks/use-settings.js";
import { SettingsType as t } from "../../../types/index.js";
import { PseudoClass as o, Unit as i } from "../../../types/style.js";
const S = () => {
const [m] = L("border.style.desktop.default", t.BLOCK);
return /* @__PURE__ */ e(a, { defaultValue: "Button", type: "single", collapsible: !0, children: /* @__PURE__ */ r(a.Item, { value: "Button", children: [
/* @__PURE__ */ e(a.Trigger, { className: "p-4", children: "Button" }),
/* @__PURE__ */ r(a.Content, { className: "px-4", children: [
/* @__PURE__ */ e(y, { fieldName: "typography", className: "mt-0", type: t.BLOCK }),
/* @__PURE__ */ e(
C,
{
fieldName: "textShadow.desktop",
type: t.BLOCK,
mode: o.DEFAULT
}
),
/* @__PURE__ */ r(l, { defaultValue: o.DEFAULT, children: [
/* @__PURE__ */ r(l.List, { className: "mb-2 mt-5 h-8 w-full rounded-full", children: [
/* @__PURE__ */ e(
l.Trigger,
{
className: "flex-1 rounded-full p-[3px] text-[13px]",
value: o.DEFAULT,
children: "Normal"
}
),
/* @__PURE__ */ e(
l.Trigger,
{
className: "flex-1 rounded-full p-[3px] text-[13px]",
value: o.HOVER,
children: "Hover"
}
)
] }),
/* @__PURE__ */ r(l.Content, { value: o.DEFAULT, children: [
/* @__PURE__ */ e(
d,
{
fieldName: "textColor",
mode: o.DEFAULT,
type: t.BLOCK
}
),
/* @__PURE__ */ e(
s,
{
fieldName: "background",
mode: o.DEFAULT,
type: t.BLOCK,
showImage: !1
}
)
] }),
/* @__PURE__ */ r(l.Content, { value: o.HOVER, children: [
/* @__PURE__ */ e(
d,
{
fieldName: "textColor",
mode: o.HOVER,
type: t.BLOCK
}
),
/* @__PURE__ */ e(
s,
{
fieldName: "background",
mode: o.HOVER,
type: t.BLOCK,
showImage: !1
}
),
/* @__PURE__ */ e(
c,
{
label: "Transition Duration",
fieldName: "transitionDuration",
type: t.BLOCK,
min: 0,
max: 1e4
}
)
] })
] }),
/* @__PURE__ */ e(u, { className: "my-4" }),
/* @__PURE__ */ e(
f,
{
options: [
{ content: "None", value: "none" },
{ content: "Solid", value: "solid" },
{ content: "Double", value: "double" },
{ content: "Dotted", value: "dotted" },
{ content: "Groove", value: "groove" }
],
fieldName: "border.style.desktop",
label: "Border Type",
type: t.BLOCK,
mode: o.DEFAULT
}
),
/* @__PURE__ */ e(p, { children: m && m !== "none" && /* @__PURE__ */ r(p, { children: [
/* @__PURE__ */ e(
n,
{
fieldName: "border.width",
label: "Border Width",
responsive: !0,
type: t.BLOCK,
mode: o.DEFAULT
}
),
/* @__PURE__ */ e(
d,
{
label: "Border Color",
fieldName: "border.color.desktop",
type: t.BLOCK,
mode: o.DEFAULT
}
)
] }) }),
/* @__PURE__ */ e(
n,
{
fieldName: "border.radius",
label: "Border Radius",
responsive: !0,
type: t.BLOCK,
mode: o.DEFAULT
}
),
/* @__PURE__ */ e(u, { className: "my-4" }),
/* @__PURE__ */ e(
n,
{
fieldName: "padding",
label: "Padding",
responsive: !0,
units: [i.PX, i.EM, i.REM],
type: t.BLOCK
}
)
] })
] }) });
};
export {
S as default
};
//# sourceMappingURL=button-style.control.js.map