@stll/folio-react 0.0.1-placeholder.0 → 0.1.0

package/dist/ImagePositionDialog-BQnOnDf4.js

@@ -0,0 +1,393 @@
+import { r as useFolioUI } from "./folio-ui-o_rftArH.js";
+import { useEffect, useId, useState } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region src/components/dialogs/ImagePositionDialog.tsx
+/**
+* Image Position Dialog
+*
+* Modal for editing image positioning settings:
+* - Horizontal: alignment or offset, relative to page/column/margin/paragraph
+* - Vertical: alignment or offset, relative to page/margin/paragraph/line
+* - Distance from text (top/bottom/left/right)
+*/
+function ImagePositionDialog({ isOpen, onClose, onApply, currentData }) {
+	const { Root: Dialog, Portal: DialogPortal, Backdrop: DialogBackdrop, Popup: DialogPopup, Title: DialogTitle, Close: DialogClose } = useFolioUI().Dialog;
+	const id = useId();
+	const [hMode, setHMode] = useState("align");
+	const [hAlign, setHAlign] = useState("center");
+	const [hRelativeTo, setHRelativeTo] = useState("column");
+	const [hOffset, setHOffset] = useState(0);
+	const [vMode, setVMode] = useState("align");
+	const [vAlign, setVAlign] = useState("top");
+	const [vRelativeTo, setVRelativeTo] = useState("paragraph");
+	const [vOffset, setVOffset] = useState(0);
+	const [distTop, setDistTop] = useState(0);
+	const [distBottom, setDistBottom] = useState(0);
+	const [distLeft, setDistLeft] = useState(0);
+	const [distRight, setDistRight] = useState(0);
+	useEffect(() => {
+		if (!isOpen) return;
+		const h = currentData?.horizontal;
+		const v = currentData?.vertical;
+		if (h?.align) {
+			setHMode("align");
+			setHAlign(h.align);
+		} else if (h?.posOffset !== void 0) {
+			setHMode("offset");
+			setHOffset(h.posOffset);
+		}
+		if (h?.relativeTo) setHRelativeTo(h.relativeTo);
+		if (v?.align) {
+			setVMode("align");
+			setVAlign(v.align);
+		} else if (v?.posOffset !== void 0) {
+			setVMode("offset");
+			setVOffset(v.posOffset);
+		}
+		if (v?.relativeTo) setVRelativeTo(v.relativeTo);
+		setDistTop(currentData?.distTop ?? 0);
+		setDistBottom(currentData?.distBottom ?? 0);
+		setDistLeft(currentData?.distLeft ?? 0);
+		setDistRight(currentData?.distRight ?? 0);
+	}, [isOpen, currentData]);
+	const handleApply = () => {
+		const data = {};
+		data.horizontal = {
+			relativeTo: hRelativeTo,
+			...hMode === "align" ? { align: hAlign } : { posOffset: hOffset }
+		};
+		data.vertical = {
+			relativeTo: vRelativeTo,
+			...vMode === "align" ? { align: vAlign } : { posOffset: vOffset }
+		};
+		data.distTop = distTop;
+		data.distBottom = distBottom;
+		data.distLeft = distLeft;
+		data.distRight = distRight;
+		onApply(data);
+		onClose();
+	};
+	const labelCls = "w-[75px] text-muted-foreground text-xs";
+	const inputCls = "border-input bg-background text-foreground flex-1 rounded border px-1.5 py-1 text-xs outline-none";
+	const sectionLabelCls = "text-foreground text-[13px] font-semibold";
+	const distLabelCls = "w-[45px] text-muted-foreground text-xs";
+	const fieldIds = {
+		hMode: `${id}-img-pos-h-mode`,
+		hAlign: `${id}-img-pos-h-align`,
+		hOffset: `${id}-img-pos-h-offset`,
+		hRelativeTo: `${id}-img-pos-h-rel`,
+		vMode: `${id}-img-pos-v-mode`,
+		vAlign: `${id}-img-pos-v-align`,
+		vOffset: `${id}-img-pos-v-offset`,
+		vRelativeTo: `${id}-img-pos-v-rel`,
+		distTop: `${id}-img-pos-dist-top`,
+		distBottom: `${id}-img-pos-dist-bottom`,
+		distLeft: `${id}-img-pos-dist-left`,
+		distRight: `${id}-img-pos-dist-right`
+	};
+	return /* @__PURE__ */ jsx(Dialog, {
+		open: isOpen,
+		onOpenChange: (open) => {
+			if (!open) onClose();
+		},
+		children: /* @__PURE__ */ jsxs(DialogPortal, { children: [/* @__PURE__ */ jsx(DialogBackdrop, { className: "fixed inset-0 z-[10000] bg-black/50" }), /* @__PURE__ */ jsxs(DialogPopup, {
+			className: "bg-popover fixed start-1/2 top-1/2 z-[10001] w-full max-w-[480px] min-w-[400px] -translate-x-1/2 -translate-y-1/2 rounded-lg border shadow-xl",
+			children: [
+				/* @__PURE__ */ jsx(DialogTitle, {
+					className: "border-b px-5 py-3 text-base font-semibold",
+					children: "Image Position"
+				}),
+				/* @__PURE__ */ jsxs("div", {
+					className: "flex flex-col gap-4 px-5 py-4",
+					children: [
+						/* @__PURE__ */ jsxs("div", {
+							className: "flex flex-col gap-2",
+							children: [
+								/* @__PURE__ */ jsx("div", {
+									className: sectionLabelCls,
+									children: "Horizontal"
+								}),
+								/* @__PURE__ */ jsxs("div", {
+									className: "flex items-center gap-2",
+									children: [/* @__PURE__ */ jsx("label", {
+										className: labelCls,
+										htmlFor: fieldIds.hMode,
+										children: "Position"
+									}), /* @__PURE__ */ jsxs("select", {
+										className: inputCls,
+										id: fieldIds.hMode,
+										value: hMode,
+										onChange: (e) => setHMode(e.target.value),
+										children: [/* @__PURE__ */ jsx("option", {
+											value: "align",
+											children: "Alignment"
+										}), /* @__PURE__ */ jsx("option", {
+											value: "offset",
+											children: "Offset"
+										})]
+									})]
+								}),
+								hMode === "align" ? /* @__PURE__ */ jsxs("div", {
+									className: "flex items-center gap-2",
+									children: [/* @__PURE__ */ jsx("label", {
+										className: labelCls,
+										htmlFor: fieldIds.hAlign,
+										children: "Align"
+									}), /* @__PURE__ */ jsxs("select", {
+										className: inputCls,
+										id: fieldIds.hAlign,
+										value: hAlign,
+										onChange: (e) => setHAlign(e.target.value),
+										children: [
+											/* @__PURE__ */ jsx("option", {
+												value: "left",
+												children: "Left"
+											}),
+											/* @__PURE__ */ jsx("option", {
+												value: "center",
+												children: "Center"
+											}),
+											/* @__PURE__ */ jsx("option", {
+												value: "right",
+												children: "Right"
+											})
+										]
+									})]
+								}) : /* @__PURE__ */ jsxs("div", {
+									className: "flex items-center gap-2",
+									children: [/* @__PURE__ */ jsx("label", {
+										className: labelCls,
+										htmlFor: fieldIds.hOffset,
+										children: "Offset (px)"
+									}), /* @__PURE__ */ jsx("input", {
+										className: inputCls,
+										id: fieldIds.hOffset,
+										type: "number",
+										value: hOffset,
+										onChange: (e) => setHOffset(Number(e.target.value) || 0)
+									})]
+								}),
+								/* @__PURE__ */ jsxs("div", {
+									className: "flex items-center gap-2",
+									children: [/* @__PURE__ */ jsx("label", {
+										className: labelCls,
+										htmlFor: fieldIds.hRelativeTo,
+										children: "Relative to"
+									}), /* @__PURE__ */ jsxs("select", {
+										className: inputCls,
+										id: fieldIds.hRelativeTo,
+										value: hRelativeTo,
+										onChange: (e) => setHRelativeTo(e.target.value),
+										children: [
+											/* @__PURE__ */ jsx("option", {
+												value: "page",
+												children: "Page"
+											}),
+											/* @__PURE__ */ jsx("option", {
+												value: "column",
+												children: "Column"
+											}),
+											/* @__PURE__ */ jsx("option", {
+												value: "margin",
+												children: "Margin"
+											}),
+											/* @__PURE__ */ jsx("option", {
+												value: "character",
+												children: "Character"
+											})
+										]
+									})]
+								})
+							]
+						}),
+						/* @__PURE__ */ jsxs("div", {
+							className: "flex flex-col gap-2",
+							children: [
+								/* @__PURE__ */ jsx("div", {
+									className: sectionLabelCls,
+									children: "Vertical"
+								}),
+								/* @__PURE__ */ jsxs("div", {
+									className: "flex items-center gap-2",
+									children: [/* @__PURE__ */ jsx("label", {
+										className: labelCls,
+										htmlFor: fieldIds.vMode,
+										children: "Position"
+									}), /* @__PURE__ */ jsxs("select", {
+										className: inputCls,
+										id: fieldIds.vMode,
+										value: vMode,
+										onChange: (e) => setVMode(e.target.value),
+										children: [/* @__PURE__ */ jsx("option", {
+											value: "align",
+											children: "Alignment"
+										}), /* @__PURE__ */ jsx("option", {
+											value: "offset",
+											children: "Offset"
+										})]
+									})]
+								}),
+								vMode === "align" ? /* @__PURE__ */ jsxs("div", {
+									className: "flex items-center gap-2",
+									children: [/* @__PURE__ */ jsx("label", {
+										className: labelCls,
+										htmlFor: fieldIds.vAlign,
+										children: "Align"
+									}), /* @__PURE__ */ jsxs("select", {
+										className: inputCls,
+										id: fieldIds.vAlign,
+										value: vAlign,
+										onChange: (e) => setVAlign(e.target.value),
+										children: [
+											/* @__PURE__ */ jsx("option", {
+												value: "top",
+												children: "Top"
+											}),
+											/* @__PURE__ */ jsx("option", {
+												value: "center",
+												children: "Center"
+											}),
+											/* @__PURE__ */ jsx("option", {
+												value: "bottom",
+												children: "Bottom"
+											})
+										]
+									})]
+								}) : /* @__PURE__ */ jsxs("div", {
+									className: "flex items-center gap-2",
+									children: [/* @__PURE__ */ jsx("label", {
+										className: labelCls,
+										htmlFor: fieldIds.vOffset,
+										children: "Offset (px)"
+									}), /* @__PURE__ */ jsx("input", {
+										className: inputCls,
+										id: fieldIds.vOffset,
+										type: "number",
+										value: vOffset,
+										onChange: (e) => setVOffset(Number(e.target.value) || 0)
+									})]
+								}),
+								/* @__PURE__ */ jsxs("div", {
+									className: "flex items-center gap-2",
+									children: [/* @__PURE__ */ jsx("label", {
+										className: labelCls,
+										htmlFor: fieldIds.vRelativeTo,
+										children: "Relative to"
+									}), /* @__PURE__ */ jsxs("select", {
+										className: inputCls,
+										id: fieldIds.vRelativeTo,
+										value: vRelativeTo,
+										onChange: (e) => setVRelativeTo(e.target.value),
+										children: [
+											/* @__PURE__ */ jsx("option", {
+												value: "page",
+												children: "Page"
+											}),
+											/* @__PURE__ */ jsx("option", {
+												value: "margin",
+												children: "Margin"
+											}),
+											/* @__PURE__ */ jsx("option", {
+												value: "paragraph",
+												children: "Paragraph"
+											}),
+											/* @__PURE__ */ jsx("option", {
+												value: "line",
+												children: "Line"
+											})
+										]
+									})]
+								})
+							]
+						}),
+						/* @__PURE__ */ jsxs("div", {
+							className: "flex flex-col gap-2",
+							children: [/* @__PURE__ */ jsx("div", {
+								className: sectionLabelCls,
+								children: "Distance from text (px)"
+							}), /* @__PURE__ */ jsxs("div", {
+								className: "grid grid-cols-2 gap-2",
+								children: [
+									/* @__PURE__ */ jsxs("div", {
+										className: "flex items-center gap-2",
+										children: [/* @__PURE__ */ jsx("label", {
+											className: distLabelCls,
+											htmlFor: fieldIds.distTop,
+											children: "Top"
+										}), /* @__PURE__ */ jsx("input", {
+											className: inputCls,
+											id: fieldIds.distTop,
+											min: 0,
+											type: "number",
+											value: distTop,
+											onChange: (e) => setDistTop(Number(e.target.value) || 0)
+										})]
+									}),
+									/* @__PURE__ */ jsxs("div", {
+										className: "flex items-center gap-2",
+										children: [/* @__PURE__ */ jsx("label", {
+											className: distLabelCls,
+											htmlFor: fieldIds.distBottom,
+											children: "Bottom"
+										}), /* @__PURE__ */ jsx("input", {
+											className: inputCls,
+											id: fieldIds.distBottom,
+											min: 0,
+											type: "number",
+											value: distBottom,
+											onChange: (e) => setDistBottom(Number(e.target.value) || 0)
+										})]
+									}),
+									/* @__PURE__ */ jsxs("div", {
+										className: "flex items-center gap-2",
+										children: [/* @__PURE__ */ jsx("label", {
+											className: distLabelCls,
+											htmlFor: fieldIds.distLeft,
+											children: "Left"
+										}), /* @__PURE__ */ jsx("input", {
+											className: inputCls,
+											id: fieldIds.distLeft,
+											min: 0,
+											type: "number",
+											value: distLeft,
+											onChange: (e) => setDistLeft(Number(e.target.value) || 0)
+										})]
+									}),
+									/* @__PURE__ */ jsxs("div", {
+										className: "flex items-center gap-2",
+										children: [/* @__PURE__ */ jsx("label", {
+											className: distLabelCls,
+											htmlFor: fieldIds.distRight,
+											children: "Right"
+										}), /* @__PURE__ */ jsx("input", {
+											className: inputCls,
+											id: fieldIds.distRight,
+											min: 0,
+											type: "number",
+											value: distRight,
+											onChange: (e) => setDistRight(Number(e.target.value) || 0)
+										})]
+									})
+								]
+							})]
+						})
+					]
+				}),
+				/* @__PURE__ */ jsxs("div", {
+					className: "flex justify-end gap-2 border-t px-5 py-3",
+					children: [/* @__PURE__ */ jsx(DialogClose, {
+						className: "border-input rounded border px-4 py-1.5 text-[13px]",
+						children: "Cancel"
+					}), /* @__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"
+					})]
+				})
+			]
+		})] })
+	});
+}
+//#endregion
+export { ImagePositionDialog };

package/dist/ImagePropertiesDialog-Dn4N7qZv.js

@@ -0,0 +1,196 @@
+import { r as useFolioUI } from "./folio-ui-o_rftArH.js";
+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
+*/
+function ImagePropertiesDialog({ isOpen, onClose, onApply, currentData }) {
+	const { Root: Dialog, Portal: DialogPortal, Backdrop: DialogBackdrop, Popup: DialogPopup, Title: DialogTitle, Close: DialogClose } = useFolioUI().Dialog;
+	const id = useId();
+	const [alt, setAlt] = useState("");
+	const [borderWidth, setBorderWidth] = useState(0);
+	const [borderColor, setBorderColor] = useState("#000000");
+	const [borderStyle, setBorderStyle] = useState("solid");
+	useEffect(() => {
+		if (!isOpen) return;
+		setAlt(currentData?.alt ?? "");
+		setBorderWidth(currentData?.borderWidth ?? 0);
+		setBorderColor(currentData?.borderColor ?? "#000000");
+		setBorderStyle(currentData?.borderStyle ?? "solid");
+	}, [isOpen, currentData]);
+	const handleApply = () => {
+		onApply({
+			...alt ? { alt } : {},
+			...borderWidth > 0 ? {
+				borderWidth,
+				borderColor,
+				borderStyle
+			} : {}
+		});
+		onClose();
+	};
+	const labelCls = "w-[60px] text-muted-foreground text-xs";
+	const inputCls = "border-input bg-background text-foreground flex-1 rounded border px-1.5 py-1 text-xs outline-none";
+	const sectionLabelCls = "text-foreground text-[13px] font-semibold";
+	const fieldIds = {
+		borderWidth: `${id}-img-border-width`,
+		borderStyle: `${id}-img-border-style`,
+		borderColor: `${id}-img-border-color`
+	};
+	return /* @__PURE__ */ jsx(Dialog, {
+		open: isOpen,
+		onOpenChange: (open) => {
+			if (!open) onClose();
+		},
+		children: /* @__PURE__ */ jsxs(DialogPortal, { children: [/* @__PURE__ */ jsx(DialogBackdrop, { className: "fixed inset-0 z-[10000] bg-black/50" }), /* @__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: [
+				/* @__PURE__ */ jsx(DialogTitle, {
+					className: "border-b px-5 py-3 text-base font-semibold",
+					children: "Image Properties"
+				}),
+				/* @__PURE__ */ jsxs("div", {
+					className: "flex flex-col gap-4 px-5 py-4",
+					children: [/* @__PURE__ */ jsxs("div", {
+						className: "flex flex-col gap-2",
+						children: [/* @__PURE__ */ jsx("div", {
+							className: sectionLabelCls,
+							children: "Alt Text"
+						}), /* @__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: (e) => setAlt(e.target.value),
+							placeholder: "Describe this image for accessibility..."
+						})]
+					}), /* @__PURE__ */ jsxs("div", {
+						className: "flex flex-col gap-2",
+						children: [
+							/* @__PURE__ */ jsx("div", {
+								className: sectionLabelCls,
+								children: "Border"
+							}),
+							/* @__PURE__ */ jsxs("div", {
+								className: "flex items-center gap-2",
+								children: [
+									/* @__PURE__ */ jsx("label", {
+										htmlFor: fieldIds.borderWidth,
+										className: labelCls,
+										children: "Width"
+									}),
+									/* @__PURE__ */ jsx("input", {
+										id: fieldIds.borderWidth,
+										type: "number",
+										className: `${inputCls} max-w-[80px]`,
+										min: 0,
+										max: 20,
+										step: .5,
+										value: borderWidth,
+										onChange: (e) => setBorderWidth(Number(e.target.value) || 0)
+									}),
+									/* @__PURE__ */ jsx("span", {
+										className: "text-muted-foreground text-xs",
+										children: "px"
+									})
+								]
+							}),
+							/* @__PURE__ */ jsxs("div", {
+								className: "flex items-center gap-2",
+								children: [/* @__PURE__ */ jsx("label", {
+									htmlFor: fieldIds.borderStyle,
+									className: labelCls,
+									children: "Style"
+								}), /* @__PURE__ */ jsxs("select", {
+									id: fieldIds.borderStyle,
+									className: inputCls,
+									value: borderStyle,
+									onChange: (e) => setBorderStyle(e.target.value),
+									children: [
+										/* @__PURE__ */ jsx("option", {
+											value: "solid",
+											children: "Solid"
+										}),
+										/* @__PURE__ */ jsx("option", {
+											value: "dashed",
+											children: "Dashed"
+										}),
+										/* @__PURE__ */ jsx("option", {
+											value: "dotted",
+											children: "Dotted"
+										}),
+										/* @__PURE__ */ jsx("option", {
+											value: "double",
+											children: "Double"
+										}),
+										/* @__PURE__ */ jsx("option", {
+											value: "groove",
+											children: "Groove"
+										}),
+										/* @__PURE__ */ jsx("option", {
+											value: "ridge",
+											children: "Ridge"
+										}),
+										/* @__PURE__ */ jsx("option", {
+											value: "inset",
+											children: "Inset"
+										}),
+										/* @__PURE__ */ jsx("option", {
+											value: "outset",
+											children: "Outset"
+										})
+									]
+								})]
+							}),
+							/* @__PURE__ */ jsxs("div", {
+								className: "flex items-center gap-2",
+								children: [
+									/* @__PURE__ */ jsx("label", {
+										htmlFor: fieldIds.borderColor,
+										className: labelCls,
+										children: "Color"
+									}),
+									/* @__PURE__ */ jsx("input", {
+										id: fieldIds.borderColor,
+										type: "color",
+										value: borderColor,
+										onChange: (e) => setBorderColor(e.target.value),
+										className: "border-input h-6 w-8 cursor-pointer rounded border p-0"
+									}),
+									/* @__PURE__ */ jsx("input", {
+										type: "text",
+										className: `${inputCls} max-w-[90px]`,
+										value: borderColor,
+										onChange: (e) => setBorderColor(e.target.value)
+									})
+								]
+							}),
+							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"
+							})
+						]
+					})]
+				}),
+				/* @__PURE__ */ jsxs("div", {
+					className: "flex justify-end gap-2 border-t px-5 py-3",
+					children: [/* @__PURE__ */ jsx(DialogClose, {
+						className: "border-input rounded border px-4 py-1.5 text-[13px]",
+						children: "Cancel"
+					}), /* @__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"
+					})]
+				})
+			]
+		})] })
+	});
+}
+//#endregion
+export { ImagePropertiesDialog };