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

package/dist/PageSetupDialog-CxJUEkoC.js

@@ -0,0 +1,310 @@
+import { r as useFolioUI } from "./folio-ui-o_rftArH.js";
+import { useEffect, useId, useState } from "react";
+import { TWIPS_PER_INCH } from "@stll/folio-core/utils/units";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region src/components/dialogs/PageSetupDialog.tsx
+/**
+* Page Setup Dialog
+*
+* Modal for editing page layout properties:
+* - Page size (Letter, A4, Legal, etc.)
+* - Orientation (portrait/landscape)
+* - Margins (top, bottom, left, right) in inches
+*/
+/** Common page sizes in twips (width x height in portrait orientation) */
+const PAGE_SIZES = [
+	{
+		label: "Letter (8.5\" × 11\")",
+		width: 12240,
+		height: 15840
+	},
+	{
+		label: "A4 (8.27\" × 11.69\")",
+		width: 11906,
+		height: 16838
+	},
+	{
+		label: "Legal (8.5\" × 14\")",
+		width: 12240,
+		height: 20160
+	},
+	{
+		label: "A3 (11.69\" × 16.54\")",
+		width: 16838,
+		height: 23811
+	},
+	{
+		label: "A5 (5.83\" × 8.27\")",
+		width: 8391,
+		height: 11906
+	},
+	{
+		label: "B5 (6.93\" × 9.84\")",
+		width: 9979,
+		height: 14175
+	},
+	{
+		label: "Executive (7.25\" × 10.5\")",
+		width: 10440,
+		height: 15120
+	}
+];
+function twipsToInches(twips) {
+	return Math.round(twips / TWIPS_PER_INCH * 100) / 100;
+}
+function inchesToTwips(inches) {
+	return Math.round(inches * TWIPS_PER_INCH);
+}
+/** Find matching page size preset, ignoring orientation */
+function findPageSizeIndex(w, h) {
+	const pw = Math.min(w, h);
+	const ph = Math.max(w, h);
+	return PAGE_SIZES.findIndex((s) => Math.abs(s.width - pw) < 20 && Math.abs(s.height - ph) < 20);
+}
+const DEFAULT_WIDTH = 12240;
+const DEFAULT_HEIGHT = 15840;
+const DEFAULT_MARGIN = 1440;
+function PageSetupDialog({ isOpen, onClose, onApply, currentProps }) {
+	const { Root: Dialog, Portal: DialogPortal, Backdrop: DialogBackdrop, Popup: DialogPopup, Title: DialogTitle, Close: DialogClose } = useFolioUI().Dialog;
+	const id = useId();
+	const [pageWidth, setPageWidth] = useState(DEFAULT_WIDTH);
+	const [pageHeight, setPageHeight] = useState(DEFAULT_HEIGHT);
+	const [orientation, setOrientation] = useState("portrait");
+	const [marginTop, setMarginTop] = useState(DEFAULT_MARGIN);
+	const [marginBottom, setMarginBottom] = useState(DEFAULT_MARGIN);
+	const [marginLeft, setMarginLeft] = useState(DEFAULT_MARGIN);
+	const [marginRight, setMarginRight] = useState(DEFAULT_MARGIN);
+	useEffect(() => {
+		if (!isOpen) return;
+		const w = currentProps?.pageWidth || DEFAULT_WIDTH;
+		const h = currentProps?.pageHeight || DEFAULT_HEIGHT;
+		const orient = currentProps?.orientation || (w > h ? "landscape" : "portrait");
+		setPageWidth(w);
+		setPageHeight(h);
+		setOrientation(orient);
+		setMarginTop(currentProps?.marginTop ?? DEFAULT_MARGIN);
+		setMarginBottom(currentProps?.marginBottom ?? DEFAULT_MARGIN);
+		setMarginLeft(currentProps?.marginLeft ?? DEFAULT_MARGIN);
+		setMarginRight(currentProps?.marginRight ?? DEFAULT_MARGIN);
+	}, [isOpen, currentProps]);
+	const handlePageSizeChange = (index) => {
+		if (index < 0) return;
+		const size = PAGE_SIZES[index];
+		if (!size) return;
+		if (orientation === "landscape") {
+			setPageWidth(size.height);
+			setPageHeight(size.width);
+		} else {
+			setPageWidth(size.width);
+			setPageHeight(size.height);
+		}
+	};
+	const handleOrientationChange = (newOrientation) => {
+		if (newOrientation === orientation) return;
+		setOrientation(newOrientation);
+		setPageWidth(pageHeight);
+		setPageHeight(pageWidth);
+	};
+	const handleApply = () => {
+		onApply({
+			pageWidth,
+			pageHeight,
+			orientation,
+			marginTop,
+			marginBottom,
+			marginLeft,
+			marginRight
+		});
+		onClose();
+	};
+	const sizeIndex = findPageSizeIndex(pageWidth, pageHeight);
+	const labelCls = "w-20 text-muted-foreground text-[13px]";
+	const inputCls = "border-input bg-background text-foreground flex-1 rounded border px-2 py-1.5 text-[13px] outline-none";
+	const sectionLabelCls = "text-muted-foreground text-xs font-semibold uppercase tracking-wide";
+	const fieldIds = {
+		size: `${id}-ps-size`,
+		orientation: `${id}-ps-orientation`,
+		marginTop: `${id}-ps-margin-top`,
+		marginBottom: `${id}-ps-margin-bottom`,
+		marginLeft: `${id}-ps-margin-left`,
+		marginRight: `${id}-ps-margin-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: "Page Setup"
+				}),
+				/* @__PURE__ */ jsxs("div", {
+					className: "flex flex-col gap-3.5 px-5 py-4",
+					children: [
+						/* @__PURE__ */ jsx("div", {
+							className: sectionLabelCls,
+							children: "Page Size"
+						}),
+						/* @__PURE__ */ jsxs("div", {
+							className: "flex items-center gap-3",
+							children: [/* @__PURE__ */ jsx("label", {
+								htmlFor: fieldIds.size,
+								className: labelCls,
+								children: "Size"
+							}), /* @__PURE__ */ jsxs("select", {
+								id: fieldIds.size,
+								className: inputCls,
+								value: sizeIndex,
+								onChange: (e) => handlePageSizeChange(Number(e.target.value)),
+								children: [PAGE_SIZES.map((size, i) => /* @__PURE__ */ jsx("option", {
+									value: i,
+									children: size.label
+								}, size.label)), sizeIndex < 0 && /* @__PURE__ */ jsx("option", {
+									value: -1,
+									children: "Custom"
+								})]
+							})]
+						}),
+						/* @__PURE__ */ jsxs("div", {
+							className: "flex items-center gap-3",
+							children: [/* @__PURE__ */ jsx("label", {
+								htmlFor: fieldIds.orientation,
+								className: labelCls,
+								children: "Orientation"
+							}), /* @__PURE__ */ jsxs("select", {
+								id: fieldIds.orientation,
+								className: inputCls,
+								value: orientation,
+								onChange: (e) => handleOrientationChange(e.target.value),
+								children: [/* @__PURE__ */ jsx("option", {
+									value: "portrait",
+									children: "Portrait"
+								}), /* @__PURE__ */ jsx("option", {
+									value: "landscape",
+									children: "Landscape"
+								})]
+							})]
+						}),
+						/* @__PURE__ */ jsx("div", {
+							className: `${sectionLabelCls} mt-1`,
+							children: "Margins"
+						}),
+						/* @__PURE__ */ jsxs("div", {
+							className: "flex items-center gap-3",
+							children: [
+								/* @__PURE__ */ jsx("label", {
+									htmlFor: fieldIds.marginTop,
+									className: labelCls,
+									children: "Top"
+								}),
+								/* @__PURE__ */ jsx("input", {
+									id: fieldIds.marginTop,
+									type: "number",
+									className: inputCls,
+									min: 0,
+									max: 10,
+									step: .1,
+									value: twipsToInches(marginTop),
+									onChange: (e) => setMarginTop(inchesToTwips(Number(e.target.value) || 0))
+								}),
+								/* @__PURE__ */ jsx("span", {
+									className: "text-muted-foreground w-4 text-[11px]",
+									children: "in"
+								})
+							]
+						}),
+						/* @__PURE__ */ jsxs("div", {
+							className: "flex items-center gap-3",
+							children: [
+								/* @__PURE__ */ jsx("label", {
+									htmlFor: fieldIds.marginBottom,
+									className: labelCls,
+									children: "Bottom"
+								}),
+								/* @__PURE__ */ jsx("input", {
+									id: fieldIds.marginBottom,
+									type: "number",
+									className: inputCls,
+									min: 0,
+									max: 10,
+									step: .1,
+									value: twipsToInches(marginBottom),
+									onChange: (e) => setMarginBottom(inchesToTwips(Number(e.target.value) || 0))
+								}),
+								/* @__PURE__ */ jsx("span", {
+									className: "text-muted-foreground w-4 text-[11px]",
+									children: "in"
+								})
+							]
+						}),
+						/* @__PURE__ */ jsxs("div", {
+							className: "flex items-center gap-3",
+							children: [
+								/* @__PURE__ */ jsx("label", {
+									htmlFor: fieldIds.marginLeft,
+									className: labelCls,
+									children: "Left"
+								}),
+								/* @__PURE__ */ jsx("input", {
+									id: fieldIds.marginLeft,
+									type: "number",
+									className: inputCls,
+									min: 0,
+									max: 10,
+									step: .1,
+									value: twipsToInches(marginLeft),
+									onChange: (e) => setMarginLeft(inchesToTwips(Number(e.target.value) || 0))
+								}),
+								/* @__PURE__ */ jsx("span", {
+									className: "text-muted-foreground w-4 text-[11px]",
+									children: "in"
+								})
+							]
+						}),
+						/* @__PURE__ */ jsxs("div", {
+							className: "flex items-center gap-3",
+							children: [
+								/* @__PURE__ */ jsx("label", {
+									htmlFor: fieldIds.marginRight,
+									className: labelCls,
+									children: "Right"
+								}),
+								/* @__PURE__ */ jsx("input", {
+									id: fieldIds.marginRight,
+									type: "number",
+									className: inputCls,
+									min: 0,
+									max: 10,
+									step: .1,
+									value: twipsToInches(marginRight),
+									onChange: (e) => setMarginRight(inchesToTwips(Number(e.target.value) || 0))
+								}),
+								/* @__PURE__ */ jsx("span", {
+									className: "text-muted-foreground w-4 text-[11px]",
+									children: "in"
+								})
+							]
+						})
+					]
+				}),
+				/* @__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 { PageSetupDialog };

package/dist/TablePropertiesDialog-mQMnGfHu.js

@@ -0,0 +1,157 @@
+import { r as useFolioUI } from "./folio-ui-o_rftArH.js";
+import { useCallback, useEffect, useId, useState } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region src/components/dialogs/TablePropertiesDialog.tsx
+/**
+* Table Properties Dialog — width type, width value, alignment.
+*/
+function TablePropertiesDialog({ isOpen, onClose, onApply, currentProps }) {
+	const { Root: Dialog, Portal: DialogPortal, Backdrop: DialogBackdrop, Popup: DialogPopup, Title: DialogTitle, Close: DialogClose } = useFolioUI().Dialog;
+	const id = useId();
+	const [width, setWidth] = useState(currentProps?.width ?? 0);
+	const [widthType, setWidthType] = useState(currentProps?.widthType ?? "auto");
+	const [justification, setJustification] = useState(currentProps?.justification ?? "left");
+	useEffect(() => {
+		if (isOpen) {
+			setWidth(currentProps?.width ?? 0);
+			setWidthType(currentProps?.widthType ?? "auto");
+			setJustification(currentProps?.justification ?? "left");
+		}
+	}, [isOpen, currentProps]);
+	const handleApply = useCallback(() => {
+		const props = { justification: justification === "left" || justification === "center" || justification === "right" ? justification : "left" };
+		if (widthType === "auto") {
+			props.width = null;
+			props.widthType = "auto";
+		} else {
+			props.width = width;
+			props.widthType = widthType;
+		}
+		onApply(props);
+		onClose();
+	}, [
+		width,
+		widthType,
+		justification,
+		onApply,
+		onClose
+	]);
+	const labelCls = "w-20 text-muted-foreground text-[13px]";
+	const inputCls = "border-input bg-background text-foreground flex-1 rounded border px-2 py-1.5 text-[13px] outline-none";
+	const fieldIds = {
+		widthType: `${id}-tp-width-type`,
+		width: `${id}-tp-width`,
+		align: `${id}-tp-align`
+	};
+	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-[360px] -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: "Table Properties"
+				}),
+				/* @__PURE__ */ jsxs("div", {
+					className: "flex flex-col gap-3 px-5 py-4",
+					children: [
+						/* @__PURE__ */ jsxs("div", {
+							className: "flex items-center gap-3",
+							children: [/* @__PURE__ */ jsx("label", {
+								className: labelCls,
+								htmlFor: fieldIds.widthType,
+								children: "Width type"
+							}), /* @__PURE__ */ jsxs("select", {
+								className: inputCls,
+								id: fieldIds.widthType,
+								onChange: (e) => setWidthType(e.target.value),
+								value: widthType,
+								children: [
+									/* @__PURE__ */ jsx("option", {
+										value: "auto",
+										children: "Auto"
+									}),
+									/* @__PURE__ */ jsx("option", {
+										value: "dxa",
+										children: "Fixed (twips)"
+									}),
+									/* @__PURE__ */ jsx("option", {
+										value: "pct",
+										children: "Percentage"
+									})
+								]
+							})]
+						}),
+						widthType !== "auto" && /* @__PURE__ */ jsxs("div", {
+							className: "flex items-center gap-3",
+							children: [
+								/* @__PURE__ */ jsx("label", {
+									className: labelCls,
+									htmlFor: fieldIds.width,
+									children: "Width"
+								}),
+								/* @__PURE__ */ jsx("input", {
+									className: inputCls,
+									id: fieldIds.width,
+									min: 0,
+									onChange: (e) => setWidth(Number(e.target.value) || 0),
+									step: widthType === "pct" ? 5 : 100,
+									type: "number",
+									value: width
+								}),
+								/* @__PURE__ */ jsx("span", {
+									className: "text-muted-foreground text-[11px]",
+									children: widthType === "pct" ? "(50ths of %)" : "tw"
+								})
+							]
+						}),
+						/* @__PURE__ */ jsxs("div", {
+							className: "flex items-center gap-3",
+							children: [/* @__PURE__ */ jsx("label", {
+								className: labelCls,
+								htmlFor: fieldIds.align,
+								children: "Alignment"
+							}), /* @__PURE__ */ jsxs("select", {
+								className: inputCls,
+								id: fieldIds.align,
+								onChange: (e) => setJustification(e.target.value),
+								value: justification,
+								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 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 { TablePropertiesDialog };