@dndbuilder.com/react
Version:
Drag and drop builder for React
432 lines (431 loc) • 12.5 kB
JavaScript
"use client";
import { jsxs as n, jsx as e } from "react/jsx-runtime";
import { BorderControl as m } from "../../../components/controls/border.control.js";
import { BoxShadowControl as u } from "../../../components/controls/box-shadow.control.js";
import { ColorControl as i } from "../../../components/controls/color.control.js";
import { SliderUnitControl as a } from "../../../components/controls/slider-unit.control.js";
import { SpacingControl as s } from "../../../components/controls/spacing.control.js";
import { ToggleGroupControl as c } from "../../../components/controls/toggle-group.control.js";
import { TypographyControl as C } from "../../../components/controls/typography.control.js";
import { Accordion as d } from "../../../components/shared/accordion.js";
import { Label as p } from "../../../components/shared/label.js";
import { Separator as f } from "../../../components/shared/separator.js";
import { Tabs as r } from "../../../components/shared/tabs.js";
import { SettingsType as t } from "../../../types/index.js";
import { Unit as l, PseudoClass as o } from "../../../types/style.js";
import { AiOutlineAlignLeft as g, AiOutlineAlignCenter as b, AiOutlineAlignRight as N } from "../../../../../../node_modules/.pnpm/react-icons@5.5.0_react@19.0.0/node_modules/react-icons/ai/index.js";
import { TfiAlignJustify as E } from "../../../../../../node_modules/.pnpm/react-icons@5.5.0_react@19.0.0/node_modules/react-icons/tfi/index.js";
const D = () => /* @__PURE__ */ n(d, { defaultValue: "Button", type: "single", collapsible: !0, children: [
/* @__PURE__ */ n(d.Item, { value: "Button", children: [
/* @__PURE__ */ e(d.Trigger, { className: "p-4", children: "Button" }),
/* @__PURE__ */ n(d.Content, { className: "px-4", children: [
/* @__PURE__ */ e(
a,
{
label: "Width",
units: [l.PX, l.REM, l.EM, l.PERCENTAGE, l.VW],
fieldName: "button.width",
type: t.BLOCK,
responsive: !0
}
),
/* @__PURE__ */ e(
a,
{
label: "Height",
units: [l.PX, l.REM, l.EM, l.PERCENTAGE, l.VH],
fieldName: "button.height",
type: t.BLOCK,
responsive: !0
}
),
/* @__PURE__ */ e(
a,
{
label: "Spacing",
fieldName: "button.spacing",
type: t.BLOCK,
responsive: !0
}
),
/* @__PURE__ */ e(
c,
{
type: t.BLOCK,
fieldName: "button.align",
label: "Alignment",
responsive: !0,
controls: [
{
tooltipContent: "Start",
toggleTrigger: /* @__PURE__ */ e(g, { className: "text-sm" }),
value: "flex-start"
},
{
tooltipContent: "Center",
toggleTrigger: /* @__PURE__ */ e(b, { className: "text-sm" }),
value: "center"
},
{
tooltipContent: "End",
toggleTrigger: /* @__PURE__ */ e(N, { className: "text-sm" }),
value: "flex-end"
},
{
tooltipContent: "Justified",
toggleTrigger: /* @__PURE__ */ e(E, { className: "text-sm" }),
value: "space-between"
}
]
}
),
/* @__PURE__ */ e(
s,
{
label: "Padding",
fieldName: "button.padding",
type: t.BLOCK,
responsive: !0
}
),
/* @__PURE__ */ e(
s,
{
label: "Margin",
fieldName: "button.margin",
type: t.BLOCK,
responsive: !0
}
),
/* @__PURE__ */ e(
C,
{
label: "Typography",
fieldName: "button.typography",
type: t.BLOCK
}
),
/* @__PURE__ */ n(r, { defaultValue: o.DEFAULT, className: "mt-4", children: [
/* @__PURE__ */ n(r.List, { className: "h-8 w-full rounded-full", children: [
/* @__PURE__ */ e(
r.Trigger,
{
className: "flex-1 rounded-full p-[3px] text-[13px]",
value: o.DEFAULT,
children: "Normal"
}
),
/* @__PURE__ */ e(
r.Trigger,
{
className: "flex-1 rounded-full p-[3px] text-[13px]",
value: o.HOVER,
children: "Hover"
}
),
/* @__PURE__ */ e(
r.Trigger,
{
className: "flex-1 rounded-full p-[3px] text-[13px]",
value: o.FOCUS,
children: "Focus"
}
)
] }),
/* @__PURE__ */ n(r.Content, { value: o.DEFAULT, children: [
/* @__PURE__ */ e(
i,
{
fieldName: "button.color",
type: t.BLOCK,
mode: o.DEFAULT
}
),
/* @__PURE__ */ e(
i,
{
label: "Background Color",
fieldName: "button.background.color",
type: t.BLOCK,
mode: o.DEFAULT
}
),
/* @__PURE__ */ e(
m,
{
fieldName: "button.border",
mode: o.DEFAULT,
type: t.BLOCK
}
),
/* @__PURE__ */ e(p, { className: "mt-4 font-semibold", children: "Icon" }),
/* @__PURE__ */ e(
i,
{
label: "Color",
fieldName: "button.icon.color",
type: t.BLOCK,
mode: o.DEFAULT
}
),
/* @__PURE__ */ e(
a,
{
label: "Size",
fieldName: "button.icon.size",
type: t.BLOCK,
responsive: !0,
mode: o.DEFAULT
}
)
] }),
/* @__PURE__ */ n(r.Content, { value: o.HOVER, children: [
/* @__PURE__ */ e(
i,
{
fieldName: "button.color",
type: t.BLOCK,
mode: o.HOVER
}
),
/* @__PURE__ */ e(
i,
{
label: "Background Color",
fieldName: "button.background.color",
type: t.BLOCK,
mode: o.HOVER
}
),
/* @__PURE__ */ e(
m,
{
fieldName: "button.border",
mode: o.HOVER,
type: t.BLOCK
}
),
/* @__PURE__ */ e(p, { className: "mt-4 font-semibold", children: "Icon" }),
/* @__PURE__ */ e(
i,
{
label: "Color",
fieldName: "button.icon.color",
type: t.BLOCK,
mode: o.HOVER
}
),
/* @__PURE__ */ e(
a,
{
label: "Size",
fieldName: "button.icon.size",
type: t.BLOCK,
responsive: !0,
mode: o.HOVER
}
)
] }),
/* @__PURE__ */ n(r.Content, { value: o.FOCUS, children: [
/* @__PURE__ */ e(
i,
{
fieldName: "button.color",
type: t.BLOCK,
mode: o.FOCUS
}
),
/* @__PURE__ */ e(
i,
{
label: "Background Color",
fieldName: "button.background.color",
type: t.BLOCK,
mode: o.FOCUS
}
),
/* @__PURE__ */ e(
m,
{
fieldName: "button.border",
mode: o.FOCUS,
type: t.BLOCK
}
),
/* @__PURE__ */ e(p, { className: "mt-4 font-semibold", children: "Icon" }),
/* @__PURE__ */ e(
i,
{
label: "Color",
fieldName: "button.icon.color",
type: t.BLOCK,
mode: o.FOCUS
}
),
/* @__PURE__ */ e(
a,
{
label: "Size",
fieldName: "button.icon.size",
type: t.BLOCK,
responsive: !0,
mode: o.FOCUS
}
)
] })
] }),
/* @__PURE__ */ e(f, { className: "my-4" }),
/* @__PURE__ */ e(p, { className: "font-semibold", children: "Image" }),
/* @__PURE__ */ e(
a,
{
label: "Width",
units: [l.PX, l.REM, l.EM, l.PERCENTAGE, l.VW],
fieldName: "button.image.width",
type: t.BLOCK,
responsive: !0
}
),
/* @__PURE__ */ e(
a,
{
label: "Max Width",
fieldName: "button.image.maxWidth",
type: t.BLOCK,
responsive: !0
}
),
/* @__PURE__ */ e(
a,
{
label: "Height",
units: [l.PX, l.REM, l.EM, l.PERCENTAGE, l.VH],
fieldName: "button.image.height",
type: t.BLOCK,
responsive: !0
}
)
] })
] }),
/* @__PURE__ */ n(d.Item, { value: "Content", children: [
/* @__PURE__ */ e(d.Trigger, { className: "p-4", children: "Content" }),
/* @__PURE__ */ n(d.Content, { className: "px-4", children: [
/* @__PURE__ */ e(
a,
{
label: "Width",
units: [l.PX, l.REM, l.EM, l.PERCENTAGE, l.VW],
fieldName: "content.width",
type: t.BLOCK,
responsive: !0
}
),
/* @__PURE__ */ e(
a,
{
label: "Height",
units: [l.PX, l.REM, l.EM, l.PERCENTAGE, l.VH],
fieldName: "content.height",
type: t.BLOCK,
responsive: !0
}
),
/* @__PURE__ */ e(
s,
{
label: "Padding",
fieldName: "content.padding",
type: t.BLOCK,
responsive: !0
}
),
/* @__PURE__ */ e(
s,
{
label: "Margin",
fieldName: "content.margin",
type: t.BLOCK,
responsive: !0
}
),
/* @__PURE__ */ n(r, { defaultValue: o.DEFAULT, className: "mt-4", children: [
/* @__PURE__ */ n(r.List, { className: "h-8 w-full rounded-full", children: [
/* @__PURE__ */ e(
r.Trigger,
{
className: "flex-1 rounded-full p-[3px] text-[13px]",
value: o.DEFAULT,
children: "Normal"
}
),
/* @__PURE__ */ e(
r.Trigger,
{
className: "flex-1 rounded-full p-[3px] text-[13px]",
value: o.HOVER,
children: "Hover"
}
)
] }),
/* @__PURE__ */ n(r.Content, { value: o.DEFAULT, children: [
/* @__PURE__ */ e(
m,
{
fieldName: "content.border",
mode: o.DEFAULT,
type: t.BLOCK
}
),
/* @__PURE__ */ e(
u,
{
fieldName: "content.boxShadow",
mode: o.DEFAULT,
type: t.BLOCK
}
),
/* @__PURE__ */ e(
i,
{
label: "Background Color",
fieldName: "content.background.color",
type: t.BLOCK,
mode: o.DEFAULT
}
)
] }),
/* @__PURE__ */ n(r.Content, { value: o.HOVER, children: [
/* @__PURE__ */ e(
m,
{
fieldName: "content.border",
mode: o.HOVER,
type: t.BLOCK
}
),
/* @__PURE__ */ e(
u,
{
fieldName: "content.boxShadow",
mode: o.HOVER,
type: t.BLOCK
}
),
/* @__PURE__ */ e(
i,
{
label: "Background Color",
fieldName: "content.background.color",
type: t.BLOCK,
mode: o.HOVER
}
)
] })
] })
] })
] })
] });
export {
D as default
};
//# sourceMappingURL=dropdown-style.control.js.map