@stll/folio-react 0.25.3 → 0.27.0

package/dist/ImagePropertiesDialog-o79NCGk7.js

@@ -1,613 +0,0 @@
-import { t as __exportAll } from "./rolldown-runtime-BBjsoOtd.js";
-import { r as useFolioUI } from "./folio-ui-DO95voaI.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 };