@dndbuilder.com/react/dist/packages/react/src/components/controls/text-shadow.control.js

Drag and drop builder for React

"use client";
import { jsxs as a, jsx as e } from "react/jsx-runtime";
import { ColorPicker as N } from "../shared/color-picker.js";
import { Input as c } from "../shared/input.js";
import { Label as i } from "../shared/label.js";
import { Popover as t } from "../shared/popover.js";
import { RangeSlider as m } from "../shared/range-slider.js";
import { useSettings as v } from "../../hooks/use-settings.js";
import { BsFillSquareFill as C } from "../../../../../node_modules/.pnpm/react-icons@5.5.0_react@19.0.0/node_modules/react-icons/bs/index.js";
import { useAppSelector as w } from "../../hooks/use-app-selector.js";
import { classNames as V } from "../../../../../utils.js";
import { CiEdit as y } from "../../../../../node_modules/.pnpm/react-icons@5.5.0_react@19.0.0/node_modules/react-icons/ci/index.js";
import { getCurrentBreakpoint as S } from "../../../../../store/selectors.js";
const I = ({
  type: p,
  responsive: d,
  mode: n,
  fieldName: s = "textShadow",
  label: g = "Text Shadow",
  className: x
}) => {
  const h = w(S), [b, u] = v(
    d && n ? `${s}.${h}.${n}` : d ? `${s}.${h}` : n ? `${s}.${n}` : s,
    p
  ), l = b ?? {
    color: "rgba(0, 0, 0, 0.3)",
    horizontal: 0,
    vertical: 0,
    blur: 0
  }, o = (r, f) => {
    u({
      ...l,
      [f]: r
    });
  };
  return /* @__PURE__ */ a("div", { className: V("mt-4 flex items-center gap-1.5", x), children: [
    /* @__PURE__ */ e(i, { className: "me-auto ", children: g }),
    /* @__PURE__ */ a(t, { children: [
      /* @__PURE__ */ e(t.Trigger, { asChild: !0, children: /* @__PURE__ */ e("div", { className: "cursor-pointer rounded-sm bg-gray-50 px-3 py-1.5 transition-colors duration-200 hover:bg-gray-300", children: /* @__PURE__ */ e(y, {}) }) }),
      /* @__PURE__ */ e(t.Portal, { children: /* @__PURE__ */ a(t.Content, { align: "end", alignOffset: -8, className: "w-[260px] bg-white p-4", children: [
        /* @__PURE__ */ a("div", { className: "flex items-center justify-between", children: [
          /* @__PURE__ */ e(i, { children: "Color" }),
          /* @__PURE__ */ a(t, { children: [
            /* @__PURE__ */ e(t.Trigger, { asChild: !0, className: "rounded-xs border p-1", children: /* @__PURE__ */ e("div", { children: /* @__PURE__ */ e(C, { style: { color: l.color }, className: "rounded-xs" }) }) }),
            /* @__PURE__ */ a(t.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(
                N,
                {
                  color: l.color,
                  onChange: (r) => {
                    u({
                      ...l,
                      color: r
                    });
                  }
                }
              ) })
            ] })
          ] })
        ] }),
        /* @__PURE__ */ a("div", { className: "mt-3", children: [
          /* @__PURE__ */ e(i, { className: "mb-1.5 block ", children: "Blur" }),
          /* @__PURE__ */ a("div", { className: "flex gap-1.5", children: [
            /* @__PURE__ */ e(
              m,
              {
                defaultValue: [l.blur ?? 0],
                onValueChange: (r) => {
                  o(r[0], "blur-sm");
                },
                max: 100,
                step: 1,
                min: 0
              }
            ),
            /* @__PURE__ */ e(
              c,
              {
                type: "number",
                defaultValue: l.blur,
                onChange: (r) => {
                  o(Number(r.target.value), "blur-sm");
                },
                min: 0,
                max: 100,
                className: "w-[60px]"
              }
            )
          ] })
        ] }),
        /* @__PURE__ */ a("div", { className: "mt-4", children: [
          /* @__PURE__ */ e(i, { className: "mb-1.5 block ", children: "Horizontal" }),
          /* @__PURE__ */ a("div", { className: "flex gap-1.5", children: [
            /* @__PURE__ */ e(
              m,
              {
                defaultValue: [l.horizontal ?? 0],
                onValueChange: (r) => {
                  o(r[0], "horizontal");
                },
                max: 100,
                step: 1,
                min: 0
              }
            ),
            /* @__PURE__ */ e(
              c,
              {
                type: "number",
                defaultValue: l.horizontal,
                onChange: (r) => {
                  o(Number(r.target.value), "horizontal");
                },
                min: 0,
                max: 100,
                className: "w-[60px]"
              }
            )
          ] })
        ] }),
        /* @__PURE__ */ a("div", { className: "mt-3", children: [
          /* @__PURE__ */ e(i, { className: "mb-1.5 block ", children: "Vertical" }),
          /* @__PURE__ */ a("div", { className: "flex gap-1.5", children: [
            /* @__PURE__ */ e(
              m,
              {
                defaultValue: [l.vertical ?? 0],
                onValueChange: (r) => {
                  o(r[0], "vertical");
                },
                max: 100,
                step: 1,
                min: 0
              }
            ),
            /* @__PURE__ */ e(
              c,
              {
                type: "number",
                defaultValue: l.vertical,
                onChange: (r) => {
                  o(Number(r.target.value), "vertical");
                },
                min: 0,
                max: 100,
                className: "w-[60px]"
              }
            )
          ] })
        ] }),
        /* @__PURE__ */ e(t.Arrow, { width: 16, height: 8, fill: "white" })
      ] }) })
    ] })
  ] });
};
export {
  I as TextShadowControl
};
//# sourceMappingURL=text-shadow.control.js.map