@stll/folio-react 0.6.0 → 0.8.0

package/dist/ImagePropertiesDialog-CLsDIUWb.js

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