@dndbuilder.com/react
Version:
Drag and drop builder for React
249 lines (248 loc) • 10.2 kB
JavaScript
"use client";
import { jsxs as i, jsx as e } from "react/jsx-runtime";
import { useSettings as W } from "../../hooks/use-settings.js";
import { getCurrentBreakpoint as G } from "../../../../../store/selectors.js";
import { SettingsType as V } from "../../types/index.js";
import { Unit as t } from "../../types/style.js";
import { generateUnitValue as c } from "../../utils/style.js";
import { useAppSelector as J } from "../../hooks/use-app-selector.js";
import { classNames as D } from "../../../../../utils.js";
import { useRef as K } from "react";
import { AiOutlineGlobal as Q } from "../../../../../node_modules/.pnpm/react-icons@5.5.0_react@19.0.0/node_modules/react-icons/ai/index.js";
import { BsCheck2 as Y } from "../../../../../node_modules/.pnpm/react-icons@5.5.0_react@19.0.0/node_modules/react-icons/bs/index.js";
import { CiEdit as Z } from "../../../../../node_modules/.pnpm/react-icons@5.5.0_react@19.0.0/node_modules/react-icons/ci/index.js";
import { Label as _ } from "../shared/label.js";
import { Popover as a } from "../shared/popover.js";
import { ScrollArea as X } from "../shared/scroll-area.js";
import { Tooltip as d } from "../shared/tooltip.js";
import { SelectControl as m } from "./select.control.js";
import { SliderUnitControl as s } from "./slider-unit.control.js";
import { handlePopoverScroll as ee } from "../../utils/popover.js";
import { FontFamilyControl as oe } from "./font-family.control.js";
const Ce = ({
mode: f,
type: n,
fieldName: h,
label: v = "Typography",
className: I,
showPresets: j = !0,
side: g = "bottom",
align: N = "end",
avoidCollisions: x = !1
}) => {
const r = f ? `${h}.${f}` : h, [p, q] = W(r, n), [u] = W(
"typography.presets",
V.THEME
), l = J(G), S = K(null), b = (o) => {
ee(o, S.current);
};
return /* @__PURE__ */ i("div", { className: D("mt-4 flex items-center", I), ref: S, children: [
v && /* @__PURE__ */ e(_, { className: "flex-grow", children: v }),
j && // Custom Fonts
/* @__PURE__ */ i(a, { onOpenChange: (o) => b(o), children: [
/* @__PURE__ */ i(d, { children: [
/* @__PURE__ */ e(d.Trigger, { children: /* @__PURE__ */ e(a.Trigger, { asChild: !0, children: /* @__PURE__ */ e("div", { className: "cursor-pointer rounded-l border border-r-0 px-[10px] py-2", children: /* @__PURE__ */ e(Q, { className: "text-sm" }) }) }) }),
/* @__PURE__ */ e(d.Content, { children: "Custom" })
] }),
/* @__PURE__ */ i(
a.Content,
{
className: "w-[260px] p-0",
avoidCollisions: x,
side: g,
align: N,
alignOffset: -35,
children: [
/* @__PURE__ */ e("p", { className: "border-b px-5 py-3", children: "Custom Fonts" }),
/* @__PURE__ */ e(X, { className: "h-[400px]", children: u == null ? void 0 : u.map((o) => {
var C, y, T, w, E, $, M, B, F, L, O, k, z, P, R, A, H, U;
return /* @__PURE__ */ i(
"div",
{
onClick: () => {
q({
presetId: o.id
});
},
className: "flex cursor-pointer items-center p-3 hover:bg-gray-50",
children: [
/* @__PURE__ */ e(
Y,
{
className: D(
"me-2 h-4 w-4",
(p == null ? void 0 : p.presetId) === o.id ? "opacity-100" : "opacity-0"
)
}
),
/* @__PURE__ */ e(
"p",
{
style: {
fontFamily: (y = (C = o.value) == null ? void 0 : C.fontFamily) == null ? void 0 : y.desktop,
fontSize: c((w = (T = o.value) == null ? void 0 : T.fontSize) == null ? void 0 : w[l]),
fontWeight: ($ = (E = o.value) == null ? void 0 : E.fontWeight) == null ? void 0 : $[l],
textTransform: (B = (M = o.value) == null ? void 0 : M.textTransform) == null ? void 0 : B[l],
fontStyle: (L = (F = o.value) == null ? void 0 : F.fontStyle) == null ? void 0 : L[l],
textDecoration: (k = (O = o.value) == null ? void 0 : O.textDecoration) == null ? void 0 : k[l],
lineHeight: c((P = (z = o.value) == null ? void 0 : z.lineHeight) == null ? void 0 : P[l]),
letterSpacing: c(
(A = (R = o.value) == null ? void 0 : R.letterSpacing) == null ? void 0 : A[l]
),
wordSpacing: c(
(U = (H = o.value) == null ? void 0 : H.wordSpacing) == null ? void 0 : U[l]
)
},
children: o.name
}
)
]
},
o.id
);
}) }),
/* @__PURE__ */ e(a.Arrow, { width: 16, height: 8, fill: "white" })
]
}
)
] }),
/* @__PURE__ */ i(a, { onOpenChange: (o) => b(o), children: [
/* @__PURE__ */ e(a.Trigger, { asChild: !0, children: /* @__PURE__ */ e("div", { className: "cursor-pointer rounded-r border px-[10px] py-2", children: /* @__PURE__ */ e(Z, {}) }) }),
/* @__PURE__ */ i(
a.Content,
{
className: "w-[260px] p-0",
avoidCollisions: x,
side: g,
align: N,
children: [
/* @__PURE__ */ e("h3", { className: "border-b px-5 py-3", children: "Typography" }),
/* @__PURE__ */ i(X, { className: "h-[400px] px-5", children: [
/* @__PURE__ */ e(
oe,
{
responsive: !0,
type: n,
fieldName: `${r}.fontFamily`,
label: "Font Family"
}
),
/* @__PURE__ */ e(
s,
{
responsive: !0,
type: n,
label: "Size",
fieldName: `${r}.fontSize`,
units: [t.PX, t.REM, t.EM]
}
),
/* @__PURE__ */ e(
m,
{
responsive: !0,
fieldName: `${r}.fontWeight`,
type: n,
label: "Weight",
options: [
{ content: "100 (Thin)", value: "100" },
{ content: "200 (Extra Light)", value: "200" },
{ content: "300 (Light)", value: "300" },
{ content: "400 (Normal)", value: "400" },
{ content: "500 (Medium)", value: "500" },
{ content: "600 (Semi Bold)", value: "600" },
{ content: "700 (Bold)", value: "700" },
{ content: "800 (Extra Bold)", value: "800" },
{ content: "900 (Black)", value: "900" },
{ content: "Normal", value: "normal" },
{ content: "Bold", value: "bold" }
],
className: "mt-4"
}
),
/* @__PURE__ */ e(
m,
{
responsive: !0,
type: n,
fieldName: `${r}.textTransform`,
label: "Transform",
options: [
{ content: "Uppercase", value: "uppercase" },
{ content: "Lowercase", value: "lowercase" },
{ content: "Capitalize", value: "capitalize" },
{ content: "Normal", value: "none" }
]
}
),
/* @__PURE__ */ e(
m,
{
responsive: !0,
type: n,
fieldName: `${r}.fontStyle`,
label: "Style",
options: [
{ content: "Normal", value: "normal" },
{ content: "Italic", value: "italic" },
{ content: "Oblique", value: "oblique" }
]
}
),
/* @__PURE__ */ e(
m,
{
responsive: !0,
type: n,
fieldName: `${r}.textDecoration`,
label: "Decoration",
options: [
{ content: "Underline", value: "underline" },
{ content: "Overline", value: "overline" },
{ content: "Line Through", value: "line-through" },
{ content: "None", value: "none" }
]
}
),
/* @__PURE__ */ e(
s,
{
responsive: !0,
type: n,
label: "Line Height",
fieldName: `${r}.lineHeight`,
units: [t.PX, t.REM, t.EM]
}
),
/* @__PURE__ */ e(
s,
{
responsive: !0,
type: n,
label: "Letter Spacing",
fieldName: `${r}.letterSpacing`,
units: [t.PX, t.REM, t.EM]
}
),
/* @__PURE__ */ e(
s,
{
responsive: !0,
type: n,
label: "Word Spacing",
fieldName: `${r}.wordSpacing`,
units: [t.PX, t.REM, t.EM]
}
)
] }),
/* @__PURE__ */ e(a.Arrow, { width: 16, height: 8, fill: "white" })
]
}
)
] })
] });
};
export {
Ce as TypographyControl
};
//# sourceMappingURL=typography.control.js.map