@dndbuilder.com/react
Version:
Drag and drop builder for React
152 lines (151 loc) • 4.67 kB
JavaScript
"use client";
import { jsx as r, jsxs as o, Fragment as f } from "react/jsx-runtime";
import { ColorControl as m } from "../../../components/controls/color.control.js";
import { SliderUnitControl as c } from "../../../components/controls/slider-unit.control.js";
import { SpacingControl as p } from "../../../components/controls/spacing.control.js";
import { Accordion as n } from "../../../components/shared/accordion.js";
import { Separator as C } from "../../../components/shared/separator.js";
import { Tabs as a } from "../../../components/shared/tabs.js";
import { useSettings as u } from "../../../hooks/use-settings.js";
import { SettingsType as l } from "../../../types/index.js";
import { Unit as e, PseudoClass as t } from "../../../types/style.js";
const D = () => {
const [i] = u("view.desktop", l.BLOCK), [s] = u(
"rotate.{{BREAKPOINT}}.unit",
l.BLOCK
), d = {
[e.DEG]: { min: 1, max: 360, step: 1 },
[e.GRAD]: { min: 1, max: 400, step: 1 },
[e.RAD]: { min: 0.017, max: 6.283, step: 1e-3 },
[e.TURN]: { min: 0.01, max: 1, step: 0.01 }
};
return /* @__PURE__ */ r(n, { defaultValue: "General", type: "single", collapsible: !0, children: /* @__PURE__ */ o(n.Item, { value: "General", children: [
/* @__PURE__ */ r(n.Trigger, { className: "p-4", children: "General" }),
/* @__PURE__ */ o(n.Content, { className: "px-4", children: [
/* @__PURE__ */ o(a, { defaultValue: t.DEFAULT, children: [
/* @__PURE__ */ o(a.List, { className: "mb-2 h-8 w-full rounded-full", children: [
/* @__PURE__ */ r(
a.Trigger,
{
className: "flex-1 rounded-full p-[3px] text-[13px]",
value: t.DEFAULT,
children: "Normal"
}
),
/* @__PURE__ */ r(
a.Trigger,
{
className: "flex-1 rounded-full p-[3px] text-[13px]",
value: t.HOVER,
children: "Hover"
}
)
] }),
/* @__PURE__ */ o(a.Content, { value: t.DEFAULT, children: [
/* @__PURE__ */ r(
m,
{
label: "Primary Color",
fieldName: "color",
type: l.BLOCK,
className: "mt-0",
mode: t.DEFAULT,
side: "bottom"
}
),
i !== "default" && /* @__PURE__ */ r(
m,
{
label: "Secondary Color",
fieldName: "secondaryColor",
type: l.BLOCK,
className: "mt-3",
mode: t.DEFAULT
}
)
] }),
/* @__PURE__ */ o(a.Content, { value: t.HOVER, children: [
/* @__PURE__ */ r(
m,
{
label: "Primary Color",
fieldName: "color",
type: l.BLOCK,
className: "mt-0",
mode: t.HOVER
}
),
i !== "default" && /* @__PURE__ */ r(
m,
{
label: "Secondary Color",
fieldName: "secondaryColor",
type: l.BLOCK,
className: "mt-3",
mode: t.HOVER
}
)
] })
] }),
/* @__PURE__ */ r(C, { className: "my-4" }),
/* @__PURE__ */ r(
c,
{
responsive: !0,
label: "Size",
fieldName: "size",
type: l.BLOCK,
units: [e.PX, e.REM, e.EM]
}
),
/* @__PURE__ */ r(
c,
{
responsive: !0,
label: "Rotate",
fieldName: "rotate",
type: l.BLOCK,
units: [e.DEG, e.GRAD, e.RAD, e.TURN],
step: d[s ?? e.DEG].step,
min: d[s ?? e.DEG].min,
max: d[s ?? e.DEG].max
}
),
i !== "default" && /* @__PURE__ */ o(f, { children: [
/* @__PURE__ */ r(
p,
{
type: l.BLOCK,
fieldName: "padding",
label: "Padding",
responsive: !0
}
),
/* @__PURE__ */ r(
p,
{
type: l.BLOCK,
fieldName: "border.radius",
label: "Border Radius",
responsive: !0,
units: [e.PX, e.PERCENTAGE]
}
)
] }),
i === "framed" && /* @__PURE__ */ r(
p,
{
type: l.BLOCK,
fieldName: "border.width",
label: "Border Width",
responsive: !0,
units: [e.PX]
}
)
] })
] }) });
};
export {
D as default
};
//# sourceMappingURL=icon-style.control.js.map