@dndbuilder.com/react
Version:
Drag and drop builder for React
156 lines (155 loc) • 6.27 kB
JavaScript
"use client";
import { jsxs as l, jsx as e } from "react/jsx-runtime";
import { Input as m } from "../shared/input.js";
import { Popover as i } from "../shared/popover.js";
import { BsFillSquareFill 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";
import { ColorPicker as y } from "../shared/color-picker.js";
import { Label as n } from "../shared/label.js";
import { Select as a } from "../shared/select.js";
import { useAppSelector as b } from "../../hooks/use-app-selector.js";
import { useSettings as k } from "../../hooks/use-settings.js";
import { getCurrentBreakpoint as B } from "../../../../../store/selectors.js";
import { classNames as $ } from "../../../../../utils.js";
import { BreakpointSelector as P } from "../shared/breakpoint-selector.js";
const D = ({
mode: c,
className: g,
responsive: d,
fieldName: o = "boxShadow",
label: u = "Box Shadow",
type: f
}) => {
const p = b(B), [r, h] = k(
d && c ? `${o}.${p}.${c}` : d ? `${o}.${p}` : c ? `${o}.${c}` : o,
f
), s = (t, v) => {
h((N) => ({
...N,
[v]: t
}));
};
return /* @__PURE__ */ l("div", { className: $("mt-4 flex justify-between", g), children: [
u && /* @__PURE__ */ l(n, { className: "flex items-center gap-1", children: [
u,
" ",
d && /* @__PURE__ */ e(P, {})
] }),
/* @__PURE__ */ l(i, { children: [
/* @__PURE__ */ e(i.Trigger, { asChild: !0, children: /* @__PURE__ */ e("button", { className: "rounded border bg-gray-50 px-3 py-1.5 transition-colors duration-200 hover:bg-gray-300", children: /* @__PURE__ */ e(C, {}) }) }),
/* @__PURE__ */ e(i.Portal, { children: /* @__PURE__ */ l(i.Content, { align: "end", alignOffset: -8, className: "w-[260px] bg-white p-4", children: [
/* @__PURE__ */ l("div", { className: "flex items-center justify-between", children: [
/* @__PURE__ */ e(n, { children: "Color" }),
/* @__PURE__ */ l(i, { children: [
/* @__PURE__ */ e(i.Trigger, { className: "rounded-xs border p-1", children: /* @__PURE__ */ e(x, { style: { color: r == null ? void 0 : r.color }, className: "rounded-xs" }) }),
/* @__PURE__ */ l(i.Content, { className: "p-0", children: [
/* @__PURE__ */ e("p", { className: "px-4 py-3 shadow-md", children: "Color Picker" }),
/* @__PURE__ */ e("div", { className: "p-4", children: /* @__PURE__ */ e(
y,
{
color: r == null ? void 0 : r.color,
onChange: (t) => {
h({
...r,
color: t
});
}
}
) })
] })
] })
] }),
/* @__PURE__ */ l("div", { className: "mt-4 grid grid-cols-2 gap-3", children: [
/* @__PURE__ */ l("div", { children: [
/* @__PURE__ */ e(n, { className: "mb-1.5 block text-xs text-gray-800", children: "Horizontal" }),
/* @__PURE__ */ e(
m,
{
type: "number",
value: (r == null ? void 0 : r.horizontal) ?? "",
min: -100,
max: 100,
className: "w-full",
onChange: (t) => {
s(Number(t.target.value), "horizontal");
}
}
)
] }),
/* @__PURE__ */ l("div", { children: [
/* @__PURE__ */ e(n, { className: "mb-1.5 block text-xs text-gray-800", children: "Vertical" }),
/* @__PURE__ */ e(
m,
{
type: "number",
value: (r == null ? void 0 : r.vertical) ?? "",
onChange: (t) => {
s(Number(t.target.value), "vertical");
},
min: -100,
max: 100,
className: "w-full"
}
)
] }),
/* @__PURE__ */ l("div", { children: [
/* @__PURE__ */ e(n, { className: "mb-1.5 block text-xs text-gray-800", children: "Blur" }),
/* @__PURE__ */ e(
m,
{
type: "number",
value: (r == null ? void 0 : r.blur) ?? "",
onChange: (t) => {
s(Number(t.target.value), "blur-sm");
},
min: 0,
max: 100,
className: "w-full"
}
)
] }),
/* @__PURE__ */ l("div", { children: [
/* @__PURE__ */ e(n, { className: "mb-1.5 block text-xs text-gray-800", children: "Spread" }),
/* @__PURE__ */ e(
m,
{
type: "number",
value: (r == null ? void 0 : r.spread) ?? "",
onChange: (t) => {
s(Number(t.target.value), "spread");
},
min: 0,
max: 100,
className: "w-full"
}
)
] })
] }),
/* @__PURE__ */ l("div", { className: "mt-4 grid grid-cols-2 items-center gap-1.5", children: [
/* @__PURE__ */ e(n, { children: "Position" }),
/* @__PURE__ */ l(
a,
{
value: (r == null ? void 0 : r.position) || "select",
onValueChange: (t) => {
s(t, "position");
},
children: [
/* @__PURE__ */ e(a.Trigger, { children: /* @__PURE__ */ e(a.Value, {}) }),
/* @__PURE__ */ l(a.Content, { children: [
/* @__PURE__ */ e(a.Item, { value: "outset", children: "Outset" }),
/* @__PURE__ */ e(a.Item, { value: "inset", children: "Inset" })
] })
]
}
)
] }),
/* @__PURE__ */ e(i.Arrow, { width: 16, height: 8, fill: "white" })
] }) })
] })
] });
};
export {
D as BoxShadowControl
};
//# sourceMappingURL=box-shadow.control.js.map