@stll/folio-react 0.7.0 → 0.8.1

package/dist/ImagePropertiesDialog-CzK8HCaW.js

@@ -1,465 +0,0 @@
-import { t as __exportAll } from "./rolldown-runtime-BBjsoOtd.js";
-import { r as useFolioUI } from "./folio-ui-C-85DSuK.js";
-import { u as useCloseOnDialogOpenChange } from "./dialogChrome-BoGYPgeu.js";
-import { c } from "react-compiler-runtime";
-import { useEffect, useId, useState } from "react";
-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(102);
-	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 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] !== DialogTitle) {
-		t9 = /* @__PURE__ */ jsx(DialogTitle, {
-			className: "border-b px-5 py-3 text-base font-semibold",
-			children: "Image Properties"
-		});
-		$[22] = DialogTitle;
-		$[23] = t9;
-	} else t9 = $[23];
-	let t10;
-	if ($[24] === Symbol.for("react.memo_cache_sentinel")) {
-		t10 = /* @__PURE__ */ jsx("div", {
-			className: "text-foreground text-[13px] font-semibold",
-			children: "Alt Text"
-		});
-		$[24] = t10;
-	} else t10 = $[24];
-	let t11;
-	if ($[25] === Symbol.for("react.memo_cache_sentinel")) {
-		t11 = (e) => setAlt(e.target.value);
-		$[25] = t11;
-	} else t11 = $[25];
-	let t12;
-	if ($[26] !== alt) {
-		t12 = /* @__PURE__ */ jsxs("div", {
-			className: "flex flex-col gap-2",
-			children: [t10, /* @__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: "Describe this image for accessibility..."
-			})]
-		});
-		$[26] = alt;
-		$[27] = t12;
-	} else t12 = $[27];
-	let t13;
-	if ($[28] === Symbol.for("react.memo_cache_sentinel")) {
-		t13 = /* @__PURE__ */ jsx("div", {
-			className: "text-foreground text-[13px] font-semibold",
-			children: "Border"
-		});
-		$[28] = t13;
-	} else t13 = $[28];
-	let t14;
-	if ($[29] !== fieldIds.borderWidth) {
-		t14 = /* @__PURE__ */ jsx("label", {
-			htmlFor: fieldIds.borderWidth,
-			className: "w-[60px] text-muted-foreground text-xs",
-			children: "Width"
-		});
-		$[29] = fieldIds.borderWidth;
-		$[30] = t14;
-	} else t14 = $[30];
-	let t15;
-	if ($[31] === Symbol.for("react.memo_cache_sentinel")) {
-		t15 = (e_0) => setBorderWidth(Number(e_0.target.value) || 0);
-		$[31] = t15;
-	} else t15 = $[31];
-	let t16;
-	if ($[32] !== borderWidth || $[33] !== fieldIds.borderWidth) {
-		t16 = /* @__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: t15
-		});
-		$[32] = borderWidth;
-		$[33] = fieldIds.borderWidth;
-		$[34] = t16;
-	} else t16 = $[34];
-	let t17;
-	if ($[35] === Symbol.for("react.memo_cache_sentinel")) {
-		t17 = /* @__PURE__ */ jsx("span", {
-			className: "text-muted-foreground text-xs",
-			children: "px"
-		});
-		$[35] = t17;
-	} else t17 = $[35];
-	let t18;
-	if ($[36] !== t14 || $[37] !== t16) {
-		t18 = /* @__PURE__ */ jsxs("div", {
-			className: "flex items-center gap-2",
-			children: [
-				t14,
-				t16,
-				t17
-			]
-		});
-		$[36] = t14;
-		$[37] = t16;
-		$[38] = t18;
-	} else t18 = $[38];
-	let t19;
-	if ($[39] !== fieldIds.borderStyle) {
-		t19 = /* @__PURE__ */ jsx("label", {
-			htmlFor: fieldIds.borderStyle,
-			className: "w-[60px] text-muted-foreground text-xs",
-			children: "Style"
-		});
-		$[39] = fieldIds.borderStyle;
-		$[40] = t19;
-	} else t19 = $[40];
-	let t20;
-	let t21;
-	let t22;
-	let t23;
-	let t24;
-	let t25;
-	let t26;
-	let t27;
-	let t28;
-	if ($[41] === Symbol.for("react.memo_cache_sentinel")) {
-		t20 = (e_1) => setBorderStyle(e_1.target.value);
-		t21 = /* @__PURE__ */ jsx("option", {
-			value: "solid",
-			children: "Solid"
-		});
-		t22 = /* @__PURE__ */ jsx("option", {
-			value: "dashed",
-			children: "Dashed"
-		});
-		t23 = /* @__PURE__ */ jsx("option", {
-			value: "dotted",
-			children: "Dotted"
-		});
-		t24 = /* @__PURE__ */ jsx("option", {
-			value: "double",
-			children: "Double"
-		});
-		t25 = /* @__PURE__ */ jsx("option", {
-			value: "groove",
-			children: "Groove"
-		});
-		t26 = /* @__PURE__ */ jsx("option", {
-			value: "ridge",
-			children: "Ridge"
-		});
-		t27 = /* @__PURE__ */ jsx("option", {
-			value: "inset",
-			children: "Inset"
-		});
-		t28 = /* @__PURE__ */ jsx("option", {
-			value: "outset",
-			children: "Outset"
-		});
-		$[41] = t20;
-		$[42] = t21;
-		$[43] = t22;
-		$[44] = t23;
-		$[45] = t24;
-		$[46] = t25;
-		$[47] = t26;
-		$[48] = t27;
-		$[49] = t28;
-	} else {
-		t20 = $[41];
-		t21 = $[42];
-		t22 = $[43];
-		t23 = $[44];
-		t24 = $[45];
-		t25 = $[46];
-		t26 = $[47];
-		t27 = $[48];
-		t28 = $[49];
-	}
-	let t29;
-	if ($[50] !== borderStyle || $[51] !== fieldIds.borderStyle) {
-		t29 = /* @__PURE__ */ jsxs("select", {
-			id: fieldIds.borderStyle,
-			className: "border-input bg-background text-foreground flex-1 rounded border px-1.5 py-1 text-xs outline-none",
-			value: borderStyle,
-			onChange: t20,
-			children: [
-				t21,
-				t22,
-				t23,
-				t24,
-				t25,
-				t26,
-				t27,
-				t28
-			]
-		});
-		$[50] = borderStyle;
-		$[51] = fieldIds.borderStyle;
-		$[52] = t29;
-	} else t29 = $[52];
-	let t30;
-	if ($[53] !== t19 || $[54] !== t29) {
-		t30 = /* @__PURE__ */ jsxs("div", {
-			className: "flex items-center gap-2",
-			children: [t19, t29]
-		});
-		$[53] = t19;
-		$[54] = t29;
-		$[55] = t30;
-	} else t30 = $[55];
-	let t31;
-	if ($[56] !== fieldIds.borderColor) {
-		t31 = /* @__PURE__ */ jsx("label", {
-			htmlFor: fieldIds.borderColor,
-			className: "w-[60px] text-muted-foreground text-xs",
-			children: "Color"
-		});
-		$[56] = fieldIds.borderColor;
-		$[57] = t31;
-	} else t31 = $[57];
-	let t32;
-	if ($[58] === Symbol.for("react.memo_cache_sentinel")) {
-		t32 = (e_2) => setBorderColor(e_2.target.value);
-		$[58] = t32;
-	} else t32 = $[58];
-	let t33;
-	if ($[59] !== borderColor || $[60] !== fieldIds.borderColor) {
-		t33 = /* @__PURE__ */ jsx("input", {
-			id: fieldIds.borderColor,
-			type: "color",
-			value: borderColor,
-			onChange: t32,
-			className: "border-input h-6 w-8 cursor-pointer rounded border p-0"
-		});
-		$[59] = borderColor;
-		$[60] = fieldIds.borderColor;
-		$[61] = t33;
-	} else t33 = $[61];
-	let t34;
-	if ($[62] === Symbol.for("react.memo_cache_sentinel")) {
-		t34 = (e_3) => setBorderColor(e_3.target.value);
-		$[62] = t34;
-	} else t34 = $[62];
-	let t35;
-	if ($[63] !== borderColor) {
-		t35 = /* @__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: t34
-		});
-		$[63] = borderColor;
-		$[64] = t35;
-	} else t35 = $[64];
-	let t36;
-	if ($[65] !== t31 || $[66] !== t33 || $[67] !== t35) {
-		t36 = /* @__PURE__ */ jsxs("div", {
-			className: "flex items-center gap-2",
-			children: [
-				t31,
-				t33,
-				t35
-			]
-		});
-		$[65] = t31;
-		$[66] = t33;
-		$[67] = t35;
-		$[68] = t36;
-	} else t36 = $[68];
-	let t37;
-	if ($[69] !== borderColor || $[70] !== borderStyle || $[71] !== borderWidth) {
-		t37 = 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: "Preview"
-		});
-		$[69] = borderColor;
-		$[70] = borderStyle;
-		$[71] = borderWidth;
-		$[72] = t37;
-	} else t37 = $[72];
-	let t38;
-	if ($[73] !== t18 || $[74] !== t30 || $[75] !== t36 || $[76] !== t37) {
-		t38 = /* @__PURE__ */ jsxs("div", {
-			className: "flex flex-col gap-2",
-			children: [
-				t13,
-				t18,
-				t30,
-				t36,
-				t37
-			]
-		});
-		$[73] = t18;
-		$[74] = t30;
-		$[75] = t36;
-		$[76] = t37;
-		$[77] = t38;
-	} else t38 = $[77];
-	let t39;
-	if ($[78] !== t12 || $[79] !== t38) {
-		t39 = /* @__PURE__ */ jsxs("div", {
-			className: "flex flex-col gap-4 px-5 py-4",
-			children: [t12, t38]
-		});
-		$[78] = t12;
-		$[79] = t38;
-		$[80] = t39;
-	} else t39 = $[80];
-	let t40;
-	if ($[81] !== DialogClose) {
-		t40 = /* @__PURE__ */ jsx(DialogClose, {
-			className: "border-input rounded border px-4 py-1.5 text-[13px]",
-			children: "Cancel"
-		});
-		$[81] = DialogClose;
-		$[82] = t40;
-	} else t40 = $[82];
-	let t41;
-	if ($[83] !== handleApply) {
-		t41 = /* @__PURE__ */ jsx("button", {
-			className: "bg-primary text-primary-foreground rounded px-4 py-1.5 text-[13px] font-medium",
-			onClick: handleApply,
-			type: "button",
-			children: "Apply"
-		});
-		$[83] = handleApply;
-		$[84] = t41;
-	} else t41 = $[84];
-	let t42;
-	if ($[85] !== t40 || $[86] !== t41) {
-		t42 = /* @__PURE__ */ jsxs("div", {
-			className: "flex justify-end gap-2 border-t px-5 py-3",
-			children: [t40, t41]
-		});
-		$[85] = t40;
-		$[86] = t41;
-		$[87] = t42;
-	} else t42 = $[87];
-	let t43;
-	if ($[88] !== DialogPopup || $[89] !== t39 || $[90] !== t42 || $[91] !== t9) {
-		t43 = /* @__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: [
-				t9,
-				t39,
-				t42
-			]
-		});
-		$[88] = DialogPopup;
-		$[89] = t39;
-		$[90] = t42;
-		$[91] = t9;
-		$[92] = t43;
-	} else t43 = $[92];
-	let t44;
-	if ($[93] !== DialogPortal || $[94] !== t43 || $[95] !== t8) {
-		t44 = /* @__PURE__ */ jsxs(DialogPortal, { children: [t8, t43] });
-		$[93] = DialogPortal;
-		$[94] = t43;
-		$[95] = t8;
-		$[96] = t44;
-	} else t44 = $[96];
-	let t45;
-	if ($[97] !== Dialog || $[98] !== handleOpenChange || $[99] !== isOpen || $[100] !== t44) {
-		t45 = /* @__PURE__ */ jsx(Dialog, {
-			open: isOpen,
-			onOpenChange: handleOpenChange,
-			children: t44
-		});
-		$[97] = Dialog;
-		$[98] = handleOpenChange;
-		$[99] = isOpen;
-		$[100] = t44;
-		$[101] = t45;
-	} else t45 = $[101];
-	return t45;
-}
-//#endregion
-export { ImagePropertiesDialog_exports as n, ImagePropertiesDialog as t };