@stll/folio-react 0.25.2 → 0.26.0

package/dist/ImagePropertiesDialog-GNZLBFLB.js

@@ -0,0 +1,607 @@
+import { t as __exportAll } from "./rolldown-runtime-BBjsoOtd.js";
+import { r as useFolioUI } from "./folio-ui-rCHqCEG6.js";
+import { u as useCloseOnDialogOpenChange } from "./dialogChrome-BoGYPgeu.js";
+import { c } from "react-compiler-runtime";
+import { useId, useState } from "react";
+import { useTranslations } from "use-intl";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region src/components/dialogs/ImagePropertiesDialog.tsx
+/**
+* Image Properties Dialog
+*
+* Modal for editing image properties:
+* - Alt text for accessibility
+* - Border/outline style, color, and width
+*/
+var ImagePropertiesDialog_exports = /* @__PURE__ */ __exportAll({ ImagePropertiesDialog: () => ImagePropertiesDialog });
+function ImagePropertiesDialog(props) {
+	const $ = c(5);
+	if (!props.isOpen) return null;
+	let t0;
+	if ($[0] !== props.currentData) {
+		t0 = JSON.stringify(props.currentData);
+		$[0] = props.currentData;
+		$[1] = t0;
+	} else t0 = $[1];
+	let t1;
+	if ($[2] !== props || $[3] !== t0) {
+		t1 = /* @__PURE__ */ jsx(ImagePropertiesDialogForm, { ...props }, t0);
+		$[2] = props;
+		$[3] = t0;
+		$[4] = t1;
+	} else t1 = $[4];
+	return t1;
+}
+function ImagePropertiesDialogForm(t0) {
+	const $ = c(157);
+	const { isOpen, onClose, onApply, currentData } = t0;
+	const { Root: Dialog, Portal: DialogPortal, Backdrop: DialogBackdrop, Popup: DialogPopup, Title: DialogTitle, Close: DialogClose } = useFolioUI().Dialog;
+	const handleOpenChange = useCloseOnDialogOpenChange(onClose);
+	const t = useTranslations("folio");
+	const id = useId();
+	const [alt, setAlt] = useState(currentData?.alt ?? "");
+	const [borderWidth, setBorderWidth] = useState(currentData?.borderWidth ?? 0);
+	const [borderColor, setBorderColor] = useState(currentData?.borderColor ?? "#000000");
+	const [borderStyle, setBorderStyle] = useState(currentData?.borderStyle ?? "solid");
+	let t1;
+	if ($[0] !== alt || $[1] !== borderColor || $[2] !== borderStyle || $[3] !== borderWidth || $[4] !== onApply || $[5] !== onClose) {
+		t1 = () => {
+			onApply({
+				...alt ? { alt } : {},
+				...borderWidth > 0 ? {
+					borderWidth,
+					borderColor,
+					borderStyle
+				} : {}
+			});
+			onClose();
+		};
+		$[0] = alt;
+		$[1] = borderColor;
+		$[2] = borderStyle;
+		$[3] = borderWidth;
+		$[4] = onApply;
+		$[5] = onClose;
+		$[6] = t1;
+	} else t1 = $[6];
+	const handleApply = t1;
+	const t2 = `${id}-img-border-width`;
+	const t3 = `${id}-img-border-style`;
+	const t4 = `${id}-img-border-color`;
+	let t5;
+	if ($[7] !== t2 || $[8] !== t3 || $[9] !== t4) {
+		t5 = {
+			borderWidth: t2,
+			borderStyle: t3,
+			borderColor: t4
+		};
+		$[7] = t2;
+		$[8] = t3;
+		$[9] = t4;
+		$[10] = t5;
+	} else t5 = $[10];
+	const fieldIds = t5;
+	let t6;
+	if ($[11] !== DialogBackdrop) {
+		t6 = /* @__PURE__ */ jsx(DialogBackdrop, { className: "fixed inset-0 z-[10000] bg-black/50" });
+		$[11] = DialogBackdrop;
+		$[12] = t6;
+	} else t6 = $[12];
+	let t7;
+	if ($[13] !== t) {
+		t7 = t("dialogs.imageProperties.title");
+		$[13] = t;
+		$[14] = t7;
+	} else t7 = $[14];
+	let t8;
+	if ($[15] !== DialogTitle || $[16] !== t7) {
+		t8 = /* @__PURE__ */ jsx(DialogTitle, {
+			className: "border-b px-5 py-3 text-base font-semibold",
+			children: t7
+		});
+		$[15] = DialogTitle;
+		$[16] = t7;
+		$[17] = t8;
+	} else t8 = $[17];
+	let t9;
+	if ($[18] !== t) {
+		t9 = t("dialogs.imageProperties.altText");
+		$[18] = t;
+		$[19] = t9;
+	} else t9 = $[19];
+	let t10;
+	if ($[20] !== t9) {
+		t10 = /* @__PURE__ */ jsx("div", {
+			className: "text-foreground text-[13px] font-semibold",
+			children: t9
+		});
+		$[20] = t9;
+		$[21] = t10;
+	} else t10 = $[21];
+	let t11;
+	if ($[22] === Symbol.for("react.memo_cache_sentinel")) {
+		t11 = (e) => setAlt(e.target.value);
+		$[22] = t11;
+	} else t11 = $[22];
+	let t12;
+	if ($[23] !== t) {
+		t12 = t("dialogs.imageProperties.altTextPlaceholder");
+		$[23] = t;
+		$[24] = t12;
+	} else t12 = $[24];
+	let t13;
+	if ($[25] !== alt || $[26] !== t12) {
+		t13 = /* @__PURE__ */ jsx("textarea", {
+			className: "border-input bg-background text-foreground font-[inherit] min-h-[60px] resize-y rounded border px-1.5 py-1 text-xs outline-none",
+			value: alt,
+			onChange: t11,
+			placeholder: t12
+		});
+		$[25] = alt;
+		$[26] = t12;
+		$[27] = t13;
+	} else t13 = $[27];
+	let t14;
+	if ($[28] !== t10 || $[29] !== t13) {
+		t14 = /* @__PURE__ */ jsxs("div", {
+			className: "flex flex-col gap-2",
+			children: [t10, t13]
+		});
+		$[28] = t10;
+		$[29] = t13;
+		$[30] = t14;
+	} else t14 = $[30];
+	let t15;
+	if ($[31] !== t) {
+		t15 = t("dialogs.imageProperties.border");
+		$[31] = t;
+		$[32] = t15;
+	} else t15 = $[32];
+	let t16;
+	if ($[33] !== t15) {
+		t16 = /* @__PURE__ */ jsx("div", {
+			className: "text-foreground text-[13px] font-semibold",
+			children: t15
+		});
+		$[33] = t15;
+		$[34] = t16;
+	} else t16 = $[34];
+	const t17 = fieldIds.borderWidth;
+	let t18;
+	if ($[35] !== t) {
+		t18 = t("dialogs.imageProperties.width");
+		$[35] = t;
+		$[36] = t18;
+	} else t18 = $[36];
+	let t19;
+	if ($[37] !== fieldIds.borderWidth || $[38] !== t18) {
+		t19 = /* @__PURE__ */ jsx("label", {
+			htmlFor: t17,
+			className: "w-[60px] text-muted-foreground text-xs",
+			children: t18
+		});
+		$[37] = fieldIds.borderWidth;
+		$[38] = t18;
+		$[39] = t19;
+	} else t19 = $[39];
+	let t20;
+	if ($[40] === Symbol.for("react.memo_cache_sentinel")) {
+		t20 = (e_0) => setBorderWidth(Number(e_0.target.value) || 0);
+		$[40] = t20;
+	} else t20 = $[40];
+	let t21;
+	if ($[41] !== borderWidth || $[42] !== fieldIds.borderWidth) {
+		t21 = /* @__PURE__ */ jsx("input", {
+			id: fieldIds.borderWidth,
+			type: "number",
+			className: "border-input bg-background text-foreground flex-1 rounded border px-1.5 py-1 text-xs outline-none max-w-[80px]",
+			min: 0,
+			max: 20,
+			step: .5,
+			value: borderWidth,
+			onChange: t20
+		});
+		$[41] = borderWidth;
+		$[42] = fieldIds.borderWidth;
+		$[43] = t21;
+	} else t21 = $[43];
+	let t22;
+	if ($[44] === Symbol.for("react.memo_cache_sentinel")) {
+		t22 = /* @__PURE__ */ jsx("span", {
+			className: "text-muted-foreground text-xs",
+			children: "px"
+		});
+		$[44] = t22;
+	} else t22 = $[44];
+	let t23;
+	if ($[45] !== t19 || $[46] !== t21) {
+		t23 = /* @__PURE__ */ jsxs("div", {
+			className: "flex items-center gap-2",
+			children: [
+				t19,
+				t21,
+				t22
+			]
+		});
+		$[45] = t19;
+		$[46] = t21;
+		$[47] = t23;
+	} else t23 = $[47];
+	const t24 = fieldIds.borderStyle;
+	let t25;
+	if ($[48] !== t) {
+		t25 = t("dialogs.imageProperties.style");
+		$[48] = t;
+		$[49] = t25;
+	} else t25 = $[49];
+	let t26;
+	if ($[50] !== fieldIds.borderStyle || $[51] !== t25) {
+		t26 = /* @__PURE__ */ jsx("label", {
+			htmlFor: t24,
+			className: "w-[60px] text-muted-foreground text-xs",
+			children: t25
+		});
+		$[50] = fieldIds.borderStyle;
+		$[51] = t25;
+		$[52] = t26;
+	} else t26 = $[52];
+	const t27 = fieldIds.borderStyle;
+	let t28;
+	if ($[53] === Symbol.for("react.memo_cache_sentinel")) {
+		t28 = (e_1) => setBorderStyle(e_1.target.value);
+		$[53] = t28;
+	} else t28 = $[53];
+	let t29;
+	if ($[54] !== t) {
+		t29 = t("dialogs.imageProperties.borderStyles.solid");
+		$[54] = t;
+		$[55] = t29;
+	} else t29 = $[55];
+	let t30;
+	if ($[56] !== t29) {
+		t30 = /* @__PURE__ */ jsx("option", {
+			value: "solid",
+			children: t29
+		});
+		$[56] = t29;
+		$[57] = t30;
+	} else t30 = $[57];
+	let t31;
+	if ($[58] !== t) {
+		t31 = t("dialogs.imageProperties.borderStyles.dashed");
+		$[58] = t;
+		$[59] = t31;
+	} else t31 = $[59];
+	let t32;
+	if ($[60] !== t31) {
+		t32 = /* @__PURE__ */ jsx("option", {
+			value: "dashed",
+			children: t31
+		});
+		$[60] = t31;
+		$[61] = t32;
+	} else t32 = $[61];
+	let t33;
+	if ($[62] !== t) {
+		t33 = t("dialogs.imageProperties.borderStyles.dotted");
+		$[62] = t;
+		$[63] = t33;
+	} else t33 = $[63];
+	let t34;
+	if ($[64] !== t33) {
+		t34 = /* @__PURE__ */ jsx("option", {
+			value: "dotted",
+			children: t33
+		});
+		$[64] = t33;
+		$[65] = t34;
+	} else t34 = $[65];
+	let t35;
+	if ($[66] !== t) {
+		t35 = t("dialogs.imageProperties.borderStyles.double");
+		$[66] = t;
+		$[67] = t35;
+	} else t35 = $[67];
+	let t36;
+	if ($[68] !== t35) {
+		t36 = /* @__PURE__ */ jsx("option", {
+			value: "double",
+			children: t35
+		});
+		$[68] = t35;
+		$[69] = t36;
+	} else t36 = $[69];
+	let t37;
+	if ($[70] !== t) {
+		t37 = t("dialogs.imageProperties.borderStyles.groove");
+		$[70] = t;
+		$[71] = t37;
+	} else t37 = $[71];
+	let t38;
+	if ($[72] !== t37) {
+		t38 = /* @__PURE__ */ jsx("option", {
+			value: "groove",
+			children: t37
+		});
+		$[72] = t37;
+		$[73] = t38;
+	} else t38 = $[73];
+	let t39;
+	if ($[74] !== t) {
+		t39 = t("dialogs.imageProperties.borderStyles.ridge");
+		$[74] = t;
+		$[75] = t39;
+	} else t39 = $[75];
+	let t40;
+	if ($[76] !== t39) {
+		t40 = /* @__PURE__ */ jsx("option", {
+			value: "ridge",
+			children: t39
+		});
+		$[76] = t39;
+		$[77] = t40;
+	} else t40 = $[77];
+	let t41;
+	if ($[78] !== t) {
+		t41 = t("dialogs.imageProperties.borderStyles.inset");
+		$[78] = t;
+		$[79] = t41;
+	} else t41 = $[79];
+	let t42;
+	if ($[80] !== t41) {
+		t42 = /* @__PURE__ */ jsx("option", {
+			value: "inset",
+			children: t41
+		});
+		$[80] = t41;
+		$[81] = t42;
+	} else t42 = $[81];
+	let t43;
+	if ($[82] !== t) {
+		t43 = t("dialogs.imageProperties.borderStyles.outset");
+		$[82] = t;
+		$[83] = t43;
+	} else t43 = $[83];
+	let t44;
+	if ($[84] !== t43) {
+		t44 = /* @__PURE__ */ jsx("option", {
+			value: "outset",
+			children: t43
+		});
+		$[84] = t43;
+		$[85] = t44;
+	} else t44 = $[85];
+	let t45;
+	if ($[86] !== borderStyle || $[87] !== fieldIds.borderStyle || $[88] !== t30 || $[89] !== t32 || $[90] !== t34 || $[91] !== t36 || $[92] !== t38 || $[93] !== t40 || $[94] !== t42 || $[95] !== t44) {
+		t45 = /* @__PURE__ */ jsxs("select", {
+			id: t27,
+			className: "border-input bg-background text-foreground flex-1 rounded border px-1.5 py-1 text-xs outline-none",
+			value: borderStyle,
+			onChange: t28,
+			children: [
+				t30,
+				t32,
+				t34,
+				t36,
+				t38,
+				t40,
+				t42,
+				t44
+			]
+		});
+		$[86] = borderStyle;
+		$[87] = fieldIds.borderStyle;
+		$[88] = t30;
+		$[89] = t32;
+		$[90] = t34;
+		$[91] = t36;
+		$[92] = t38;
+		$[93] = t40;
+		$[94] = t42;
+		$[95] = t44;
+		$[96] = t45;
+	} else t45 = $[96];
+	let t46;
+	if ($[97] !== t26 || $[98] !== t45) {
+		t46 = /* @__PURE__ */ jsxs("div", {
+			className: "flex items-center gap-2",
+			children: [t26, t45]
+		});
+		$[97] = t26;
+		$[98] = t45;
+		$[99] = t46;
+	} else t46 = $[99];
+	const t47 = fieldIds.borderColor;
+	let t48;
+	if ($[100] !== t) {
+		t48 = t("dialogs.imageProperties.color");
+		$[100] = t;
+		$[101] = t48;
+	} else t48 = $[101];
+	let t49;
+	if ($[102] !== fieldIds.borderColor || $[103] !== t48) {
+		t49 = /* @__PURE__ */ jsx("label", {
+			htmlFor: t47,
+			className: "w-[60px] text-muted-foreground text-xs",
+			children: t48
+		});
+		$[102] = fieldIds.borderColor;
+		$[103] = t48;
+		$[104] = t49;
+	} else t49 = $[104];
+	let t50;
+	if ($[105] === Symbol.for("react.memo_cache_sentinel")) {
+		t50 = (e_2) => setBorderColor(e_2.target.value);
+		$[105] = t50;
+	} else t50 = $[105];
+	let t51;
+	if ($[106] !== borderColor || $[107] !== fieldIds.borderColor) {
+		t51 = /* @__PURE__ */ jsx("input", {
+			id: fieldIds.borderColor,
+			type: "color",
+			value: borderColor,
+			onChange: t50,
+			className: "border-input h-6 w-8 cursor-pointer rounded border p-0"
+		});
+		$[106] = borderColor;
+		$[107] = fieldIds.borderColor;
+		$[108] = t51;
+	} else t51 = $[108];
+	let t52;
+	if ($[109] === Symbol.for("react.memo_cache_sentinel")) {
+		t52 = (e_3) => setBorderColor(e_3.target.value);
+		$[109] = t52;
+	} else t52 = $[109];
+	let t53;
+	if ($[110] !== borderColor) {
+		t53 = /* @__PURE__ */ jsx("input", {
+			type: "text",
+			className: "border-input bg-background text-foreground flex-1 rounded border px-1.5 py-1 text-xs outline-none max-w-[90px]",
+			value: borderColor,
+			onChange: t52
+		});
+		$[110] = borderColor;
+		$[111] = t53;
+	} else t53 = $[111];
+	let t54;
+	if ($[112] !== t49 || $[113] !== t51 || $[114] !== t53) {
+		t54 = /* @__PURE__ */ jsxs("div", {
+			className: "flex items-center gap-2",
+			children: [
+				t49,
+				t51,
+				t53
+			]
+		});
+		$[112] = t49;
+		$[113] = t51;
+		$[114] = t53;
+		$[115] = t54;
+	} else t54 = $[115];
+	let t55;
+	if ($[116] !== borderColor || $[117] !== borderStyle || $[118] !== borderWidth || $[119] !== t) {
+		t55 = borderWidth > 0 && /* @__PURE__ */ jsx("div", {
+			className: "text-muted-foreground mt-1 rounded p-2 text-center text-[11px]",
+			style: { border: `${borderWidth}px ${borderStyle} ${borderColor}` },
+			children: t("dialogs.imageProperties.preview")
+		});
+		$[116] = borderColor;
+		$[117] = borderStyle;
+		$[118] = borderWidth;
+		$[119] = t;
+		$[120] = t55;
+	} else t55 = $[120];
+	let t56;
+	if ($[121] !== t16 || $[122] !== t23 || $[123] !== t46 || $[124] !== t54 || $[125] !== t55) {
+		t56 = /* @__PURE__ */ jsxs("div", {
+			className: "flex flex-col gap-2",
+			children: [
+				t16,
+				t23,
+				t46,
+				t54,
+				t55
+			]
+		});
+		$[121] = t16;
+		$[122] = t23;
+		$[123] = t46;
+		$[124] = t54;
+		$[125] = t55;
+		$[126] = t56;
+	} else t56 = $[126];
+	let t57;
+	if ($[127] !== t14 || $[128] !== t56) {
+		t57 = /* @__PURE__ */ jsxs("div", {
+			className: "flex flex-col gap-4 px-5 py-4",
+			children: [t14, t56]
+		});
+		$[127] = t14;
+		$[128] = t56;
+		$[129] = t57;
+	} else t57 = $[129];
+	let t58;
+	if ($[130] !== t) {
+		t58 = t("common.cancel");
+		$[130] = t;
+		$[131] = t58;
+	} else t58 = $[131];
+	let t59;
+	if ($[132] !== DialogClose || $[133] !== t58) {
+		t59 = /* @__PURE__ */ jsx(DialogClose, {
+			className: "border-input rounded border px-4 py-1.5 text-[13px]",
+			children: t58
+		});
+		$[132] = DialogClose;
+		$[133] = t58;
+		$[134] = t59;
+	} else t59 = $[134];
+	let t60;
+	if ($[135] !== t) {
+		t60 = t("common.apply");
+		$[135] = t;
+		$[136] = t60;
+	} else t60 = $[136];
+	let t61;
+	if ($[137] !== handleApply || $[138] !== t60) {
+		t61 = /* @__PURE__ */ jsx("button", {
+			className: "bg-primary text-primary-foreground rounded px-4 py-1.5 text-[13px] font-medium",
+			onClick: handleApply,
+			type: "button",
+			children: t60
+		});
+		$[137] = handleApply;
+		$[138] = t60;
+		$[139] = t61;
+	} else t61 = $[139];
+	let t62;
+	if ($[140] !== t59 || $[141] !== t61) {
+		t62 = /* @__PURE__ */ jsxs("div", {
+			className: "flex justify-end gap-2 border-t px-5 py-3",
+			children: [t59, t61]
+		});
+		$[140] = t59;
+		$[141] = t61;
+		$[142] = t62;
+	} else t62 = $[142];
+	let t63;
+	if ($[143] !== DialogPopup || $[144] !== t57 || $[145] !== t62 || $[146] !== t8) {
+		t63 = /* @__PURE__ */ jsxs(DialogPopup, {
+			className: "bg-popover fixed start-1/2 top-1/2 z-[10001] w-full max-w-[440px] min-w-[380px] -translate-x-1/2 -translate-y-1/2 rounded-lg border shadow-xl",
+			children: [
+				t8,
+				t57,
+				t62
+			]
+		});
+		$[143] = DialogPopup;
+		$[144] = t57;
+		$[145] = t62;
+		$[146] = t8;
+		$[147] = t63;
+	} else t63 = $[147];
+	let t64;
+	if ($[148] !== DialogPortal || $[149] !== t6 || $[150] !== t63) {
+		t64 = /* @__PURE__ */ jsxs(DialogPortal, { children: [t6, t63] });
+		$[148] = DialogPortal;
+		$[149] = t6;
+		$[150] = t63;
+		$[151] = t64;
+	} else t64 = $[151];
+	let t65;
+	if ($[152] !== Dialog || $[153] !== handleOpenChange || $[154] !== isOpen || $[155] !== t64) {
+		t65 = /* @__PURE__ */ jsx(Dialog, {
+			open: isOpen,
+			onOpenChange: handleOpenChange,
+			children: t64
+		});
+		$[152] = Dialog;
+		$[153] = handleOpenChange;
+		$[154] = isOpen;
+		$[155] = t64;
+		$[156] = t65;
+	} else t65 = $[156];
+	return t65;
+}
+//#endregion
+export { ImagePropertiesDialog_exports as n, ImagePropertiesDialog as t };

package/dist/{InsertSymbolDialog-Cn_Nifhg.js → InsertSymbolDialog-CeEhkEvc.js}

@@ -1,5 +1,5 @@
 import { t as __exportAll } from "./rolldown-runtime-BBjsoOtd.js";
-import { r as useFolioUI } from "./folio-ui-DO95voaI.js";
+import { r as useFolioUI } from "./folio-ui-rCHqCEG6.js";
 import { c as DIALOG_SECONDARY_BUTTON_CLASS, i as DIALOG_INPUT_CLASS, l as DIALOG_TITLE_CLASS, n as DIALOG_BODY_CLASS, o as DIALOG_POPUP_CLASS, r as DIALOG_FOOTER_CLASS, s as DIALOG_PRIMARY_BUTTON_CLASS, t as DIALOG_BACKDROP_CLASS, u as useCloseOnDialogOpenChange } from "./dialogChrome-BoGYPgeu.js";
 import { c } from "react-compiler-runtime";
 import { useState } from "react";