@stll/folio-react 0.5.0 → 0.7.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (31) hide show
  1. package/dist/{CommentsSidebar-BMD21hiD.js → CommentsSidebar-B8X5a8JW.js} +126 -129
  2. package/dist/{FindReplaceDialog-By2OhOPu.js → FindReplaceDialog-Bx7QaFQ_.js} +26 -19
  3. package/dist/FootnotePropertiesDialog-2lmpg9m8.js +646 -0
  4. package/dist/ImagePositionDialog-D3MileYL.js +842 -0
  5. package/dist/ImagePropertiesDialog-CzK8HCaW.js +465 -0
  6. package/dist/InsertSymbolDialog-Df9dyLvn.js +376 -0
  7. package/dist/PageSetupDialog-PSs9YdPb.js +684 -0
  8. package/dist/TablePropertiesDialog-PQxKKM0Y.js +344 -0
  9. package/dist/{TextContextMenu-CG0V37wi.js → TextContextMenu-Ci7-M4oU.js} +199 -79
  10. package/dist/compat/eigenpal.d.ts +1 -1
  11. package/dist/compat/eigenpal.js +89 -17
  12. package/dist/dialogChrome-BoGYPgeu.js +26 -0
  13. package/dist/dialogs-DK8OVUT_.d.ts +330 -0
  14. package/dist/dialogs-DsHnfN0g.js +1272 -0
  15. package/dist/dialogs.d.ts +2 -0
  16. package/dist/dialogs.js +9 -0
  17. package/dist/editor.css +1 -1
  18. package/dist/folio-ui-C-85DSuK.js +1011 -0
  19. package/dist/index.d.ts +6 -3
  20. package/dist/index.js +13 -3
  21. package/dist/messages.js +1 -26
  22. package/dist/{renderAsync-C_Jb8BBI.d.ts → renderAsync-ChQI9UJG.d.ts} +14 -5
  23. package/dist/{renderAsync-B4SrVWHb.js → renderAsync-evdyE_GW.js} +5302 -3794
  24. package/dist/rolldown-runtime-BBjsoOtd.js +27 -0
  25. package/dist/standalone.css +1 -1
  26. package/package.json +12 -6
  27. package/dist/FootnotePropertiesDialog-CoPGKND_.js +0 -265
  28. package/dist/ImagePositionDialog-B_md0l56.js +0 -393
  29. package/dist/ImagePropertiesDialog-UcGv8qr3.js +0 -196
  30. package/dist/PageSetupDialog-Ba7bs6m3.js +0 -310
  31. package/dist/TablePropertiesDialog-Ci6h1tk2.js +0 -157
@@ -1,265 +0,0 @@
1
- import { _ as useFolioUI } from "./renderAsync-B4SrVWHb.js";
2
- import { useId, useState } from "react";
3
- import { jsx, jsxs } from "react/jsx-runtime";
4
- //#region src/components/dialogs/FootnotePropertiesDialog.tsx
5
- /**
6
- * Footnote & Endnote Properties Dialog
7
- *
8
- * Edits position, numbering format, start number, and restart rules.
9
- */
10
- const numberFormatOptions = [
11
- {
12
- value: "decimal",
13
- label: "1, 2, 3, ..."
14
- },
15
- {
16
- value: "lowerRoman",
17
- label: "i, ii, iii, ..."
18
- },
19
- {
20
- value: "upperRoman",
21
- label: "I, II, III, ..."
22
- },
23
- {
24
- value: "lowerLetter",
25
- label: "a, b, c, ..."
26
- },
27
- {
28
- value: "upperLetter",
29
- label: "A, B, C, ..."
30
- },
31
- {
32
- value: "chicago",
33
- label: "*, †, ‡, ..."
34
- }
35
- ];
36
- function FootnotePropertiesDialog({ isOpen, onClose, onApply, footnotePr, endnotePr }) {
37
- const { Root: Dialog, Portal: DialogPortal, Backdrop: DialogBackdrop, Popup: DialogPopup, Title: DialogTitle, Close: DialogClose } = useFolioUI().Dialog;
38
- const id = useId();
39
- const [fnPosition, setFnPosition] = useState(footnotePr?.position ?? "pageBottom");
40
- const [fnNumFmt, setFnNumFmt] = useState(footnotePr?.numFmt ?? "decimal");
41
- const [fnNumStart, setFnNumStart] = useState(footnotePr?.numStart ?? 1);
42
- const [fnRestart, setFnRestart] = useState(footnotePr?.numRestart ?? "continuous");
43
- const [enPosition, setEnPosition] = useState(endnotePr?.position ?? "docEnd");
44
- const [enNumFmt, setEnNumFmt] = useState(endnotePr?.numFmt ?? "lowerRoman");
45
- const [enNumStart, setEnNumStart] = useState(endnotePr?.numStart ?? 1);
46
- const [enRestart, setEnRestart] = useState(endnotePr?.numRestart ?? "continuous");
47
- const handleApply = () => {
48
- onApply({
49
- position: fnPosition,
50
- numFmt: fnNumFmt,
51
- numStart: fnNumStart,
52
- numRestart: fnRestart
53
- }, {
54
- position: enPosition,
55
- numFmt: enNumFmt,
56
- numStart: enNumStart,
57
- numRestart: enRestart
58
- });
59
- onClose();
60
- };
61
- const labelCls = "block text-muted-foreground mb-1 text-xs";
62
- const selectCls = "border-input bg-background text-foreground mb-2 w-full rounded border px-2 py-1 text-[13px] outline-none";
63
- const inputCls = "border-input bg-background text-foreground w-[60px] rounded border px-2 py-1 text-[13px] outline-none";
64
- const sectionCls = "mb-4 rounded border p-3";
65
- const fieldIds = {
66
- fnPosition: `${id}-fn-position`,
67
- fnNumFmt: `${id}-fn-num-fmt`,
68
- fnStartAt: `${id}-fn-start-at`,
69
- fnNumbering: `${id}-fn-numbering`,
70
- enPosition: `${id}-en-position`,
71
- enNumFmt: `${id}-en-num-fmt`,
72
- enStartAt: `${id}-en-start-at`,
73
- enNumbering: `${id}-en-numbering`
74
- };
75
- return /* @__PURE__ */ jsx(Dialog, {
76
- open: isOpen,
77
- onOpenChange: (open) => {
78
- if (!open) onClose();
79
- },
80
- children: /* @__PURE__ */ jsxs(DialogPortal, { children: [/* @__PURE__ */ jsx(DialogBackdrop, { className: "fixed inset-0 z-[10000] bg-black/50" }), /* @__PURE__ */ jsxs(DialogPopup, {
81
- className: "bg-popover fixed start-1/2 top-1/2 z-[10001] w-full max-w-[500px] min-w-[400px] -translate-x-1/2 -translate-y-1/2 rounded-lg border shadow-xl",
82
- children: [
83
- /* @__PURE__ */ jsx(DialogTitle, {
84
- className: "border-b px-5 py-3 text-base font-semibold",
85
- children: "Footnote & Endnote Properties"
86
- }),
87
- /* @__PURE__ */ jsxs("div", {
88
- className: "flex flex-col gap-3 px-5 py-4",
89
- children: [/* @__PURE__ */ jsxs("div", {
90
- className: sectionCls,
91
- children: [
92
- /* @__PURE__ */ jsx("h4", {
93
- className: "mb-2 text-sm font-semibold",
94
- children: "Footnotes"
95
- }),
96
- /* @__PURE__ */ jsx("label", {
97
- htmlFor: fieldIds.fnPosition,
98
- className: labelCls,
99
- children: "Position"
100
- }),
101
- /* @__PURE__ */ jsxs("select", {
102
- id: fieldIds.fnPosition,
103
- className: selectCls,
104
- value: fnPosition,
105
- onChange: (e) => setFnPosition(e.target.value),
106
- children: [/* @__PURE__ */ jsx("option", {
107
- value: "pageBottom",
108
- children: "Bottom of page"
109
- }), /* @__PURE__ */ jsx("option", {
110
- value: "beneathText",
111
- children: "Below text"
112
- })]
113
- }),
114
- /* @__PURE__ */ jsx("label", {
115
- htmlFor: fieldIds.fnNumFmt,
116
- className: labelCls,
117
- children: "Number format"
118
- }),
119
- /* @__PURE__ */ jsx("select", {
120
- id: fieldIds.fnNumFmt,
121
- className: selectCls,
122
- value: fnNumFmt,
123
- onChange: (e) => setFnNumFmt(e.target.value),
124
- children: numberFormatOptions.map((o) => /* @__PURE__ */ jsx("option", {
125
- value: o.value,
126
- children: o.label
127
- }, o.value))
128
- }),
129
- /* @__PURE__ */ jsxs("div", {
130
- className: "flex items-center gap-3",
131
- children: [/* @__PURE__ */ jsxs("div", { children: [/* @__PURE__ */ jsx("label", {
132
- htmlFor: fieldIds.fnStartAt,
133
- className: labelCls,
134
- children: "Start at"
135
- }), /* @__PURE__ */ jsx("input", {
136
- id: fieldIds.fnStartAt,
137
- type: "number",
138
- min: 1,
139
- className: inputCls,
140
- value: fnNumStart,
141
- onChange: (e) => setFnNumStart(Number.parseInt(e.target.value, 10) || 1)
142
- })] }), /* @__PURE__ */ jsxs("div", {
143
- className: "flex-1",
144
- children: [/* @__PURE__ */ jsx("label", {
145
- htmlFor: fieldIds.fnNumbering,
146
- className: labelCls,
147
- children: "Numbering"
148
- }), /* @__PURE__ */ jsxs("select", {
149
- id: fieldIds.fnNumbering,
150
- className: selectCls,
151
- value: fnRestart,
152
- onChange: (e) => setFnRestart(e.target.value),
153
- children: [
154
- /* @__PURE__ */ jsx("option", {
155
- value: "continuous",
156
- children: "Continuous"
157
- }),
158
- /* @__PURE__ */ jsx("option", {
159
- value: "eachSect",
160
- children: "Restart each section"
161
- }),
162
- /* @__PURE__ */ jsx("option", {
163
- value: "eachPage",
164
- children: "Restart each page"
165
- })
166
- ]
167
- })]
168
- })]
169
- })
170
- ]
171
- }), /* @__PURE__ */ jsxs("div", {
172
- className: sectionCls,
173
- children: [
174
- /* @__PURE__ */ jsx("h4", {
175
- className: "mb-2 text-sm font-semibold",
176
- children: "Endnotes"
177
- }),
178
- /* @__PURE__ */ jsx("label", {
179
- htmlFor: fieldIds.enPosition,
180
- className: labelCls,
181
- children: "Position"
182
- }),
183
- /* @__PURE__ */ jsxs("select", {
184
- id: fieldIds.enPosition,
185
- className: selectCls,
186
- value: enPosition,
187
- onChange: (e) => setEnPosition(e.target.value),
188
- children: [/* @__PURE__ */ jsx("option", {
189
- value: "docEnd",
190
- children: "End of document"
191
- }), /* @__PURE__ */ jsx("option", {
192
- value: "sectEnd",
193
- children: "End of section"
194
- })]
195
- }),
196
- /* @__PURE__ */ jsx("label", {
197
- htmlFor: fieldIds.enNumFmt,
198
- className: labelCls,
199
- children: "Number format"
200
- }),
201
- /* @__PURE__ */ jsx("select", {
202
- id: fieldIds.enNumFmt,
203
- className: selectCls,
204
- value: enNumFmt,
205
- onChange: (e) => setEnNumFmt(e.target.value),
206
- children: numberFormatOptions.map((o) => /* @__PURE__ */ jsx("option", {
207
- value: o.value,
208
- children: o.label
209
- }, o.value))
210
- }),
211
- /* @__PURE__ */ jsxs("div", {
212
- className: "flex items-center gap-3",
213
- children: [/* @__PURE__ */ jsxs("div", { children: [/* @__PURE__ */ jsx("label", {
214
- htmlFor: fieldIds.enStartAt,
215
- className: labelCls,
216
- children: "Start at"
217
- }), /* @__PURE__ */ jsx("input", {
218
- id: fieldIds.enStartAt,
219
- type: "number",
220
- min: 1,
221
- className: inputCls,
222
- value: enNumStart,
223
- onChange: (e) => setEnNumStart(Number.parseInt(e.target.value, 10) || 1)
224
- })] }), /* @__PURE__ */ jsxs("div", {
225
- className: "flex-1",
226
- children: [/* @__PURE__ */ jsx("label", {
227
- htmlFor: fieldIds.enNumbering,
228
- className: labelCls,
229
- children: "Numbering"
230
- }), /* @__PURE__ */ jsxs("select", {
231
- id: fieldIds.enNumbering,
232
- className: selectCls,
233
- value: enRestart,
234
- onChange: (e) => setEnRestart(e.target.value),
235
- children: [/* @__PURE__ */ jsx("option", {
236
- value: "continuous",
237
- children: "Continuous"
238
- }), /* @__PURE__ */ jsx("option", {
239
- value: "eachSect",
240
- children: "Restart each section"
241
- })]
242
- })]
243
- })]
244
- })
245
- ]
246
- })]
247
- }),
248
- /* @__PURE__ */ jsxs("div", {
249
- className: "flex justify-end gap-2 border-t px-5 py-3",
250
- children: [/* @__PURE__ */ jsx(DialogClose, {
251
- className: "border-input rounded border px-4 py-1.5 text-[13px]",
252
- children: "Cancel"
253
- }), /* @__PURE__ */ jsx("button", {
254
- className: "bg-primary text-primary-foreground rounded px-4 py-1.5 text-[13px] font-medium",
255
- onClick: handleApply,
256
- type: "button",
257
- children: "Apply"
258
- })]
259
- })
260
- ]
261
- })] })
262
- });
263
- }
264
- //#endregion
265
- export { FootnotePropertiesDialog };
@@ -1,393 +0,0 @@
1
- import { _ as useFolioUI } from "./renderAsync-B4SrVWHb.js";
2
- import { useEffect, useId, useState } from "react";
3
- import { jsx, jsxs } from "react/jsx-runtime";
4
- //#region src/components/dialogs/ImagePositionDialog.tsx
5
- /**
6
- * Image Position Dialog
7
- *
8
- * Modal for editing image positioning settings:
9
- * - Horizontal: alignment or offset, relative to page/column/margin/paragraph
10
- * - Vertical: alignment or offset, relative to page/margin/paragraph/line
11
- * - Distance from text (top/bottom/left/right)
12
- */
13
- function ImagePositionDialog({ isOpen, onClose, onApply, currentData }) {
14
- const { Root: Dialog, Portal: DialogPortal, Backdrop: DialogBackdrop, Popup: DialogPopup, Title: DialogTitle, Close: DialogClose } = useFolioUI().Dialog;
15
- const id = useId();
16
- const [hMode, setHMode] = useState("align");
17
- const [hAlign, setHAlign] = useState("center");
18
- const [hRelativeTo, setHRelativeTo] = useState("column");
19
- const [hOffset, setHOffset] = useState(0);
20
- const [vMode, setVMode] = useState("align");
21
- const [vAlign, setVAlign] = useState("top");
22
- const [vRelativeTo, setVRelativeTo] = useState("paragraph");
23
- const [vOffset, setVOffset] = useState(0);
24
- const [distTop, setDistTop] = useState(0);
25
- const [distBottom, setDistBottom] = useState(0);
26
- const [distLeft, setDistLeft] = useState(0);
27
- const [distRight, setDistRight] = useState(0);
28
- useEffect(() => {
29
- if (!isOpen) return;
30
- const h = currentData?.horizontal;
31
- const v = currentData?.vertical;
32
- if (h?.align) {
33
- setHMode("align");
34
- setHAlign(h.align);
35
- } else if (h?.posOffset !== void 0) {
36
- setHMode("offset");
37
- setHOffset(h.posOffset);
38
- }
39
- if (h?.relativeTo) setHRelativeTo(h.relativeTo);
40
- if (v?.align) {
41
- setVMode("align");
42
- setVAlign(v.align);
43
- } else if (v?.posOffset !== void 0) {
44
- setVMode("offset");
45
- setVOffset(v.posOffset);
46
- }
47
- if (v?.relativeTo) setVRelativeTo(v.relativeTo);
48
- setDistTop(currentData?.distTop ?? 0);
49
- setDistBottom(currentData?.distBottom ?? 0);
50
- setDistLeft(currentData?.distLeft ?? 0);
51
- setDistRight(currentData?.distRight ?? 0);
52
- }, [isOpen, currentData]);
53
- const handleApply = () => {
54
- const data = {};
55
- data.horizontal = {
56
- relativeTo: hRelativeTo,
57
- ...hMode === "align" ? { align: hAlign } : { posOffset: hOffset }
58
- };
59
- data.vertical = {
60
- relativeTo: vRelativeTo,
61
- ...vMode === "align" ? { align: vAlign } : { posOffset: vOffset }
62
- };
63
- data.distTop = distTop;
64
- data.distBottom = distBottom;
65
- data.distLeft = distLeft;
66
- data.distRight = distRight;
67
- onApply(data);
68
- onClose();
69
- };
70
- const labelCls = "w-[75px] text-muted-foreground text-xs";
71
- const inputCls = "border-input bg-background text-foreground flex-1 rounded border px-1.5 py-1 text-xs outline-none";
72
- const sectionLabelCls = "text-foreground text-[13px] font-semibold";
73
- const distLabelCls = "w-[45px] text-muted-foreground text-xs";
74
- const fieldIds = {
75
- hMode: `${id}-img-pos-h-mode`,
76
- hAlign: `${id}-img-pos-h-align`,
77
- hOffset: `${id}-img-pos-h-offset`,
78
- hRelativeTo: `${id}-img-pos-h-rel`,
79
- vMode: `${id}-img-pos-v-mode`,
80
- vAlign: `${id}-img-pos-v-align`,
81
- vOffset: `${id}-img-pos-v-offset`,
82
- vRelativeTo: `${id}-img-pos-v-rel`,
83
- distTop: `${id}-img-pos-dist-top`,
84
- distBottom: `${id}-img-pos-dist-bottom`,
85
- distLeft: `${id}-img-pos-dist-left`,
86
- distRight: `${id}-img-pos-dist-right`
87
- };
88
- return /* @__PURE__ */ jsx(Dialog, {
89
- open: isOpen,
90
- onOpenChange: (open) => {
91
- if (!open) onClose();
92
- },
93
- children: /* @__PURE__ */ jsxs(DialogPortal, { children: [/* @__PURE__ */ jsx(DialogBackdrop, { className: "fixed inset-0 z-[10000] bg-black/50" }), /* @__PURE__ */ jsxs(DialogPopup, {
94
- 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",
95
- children: [
96
- /* @__PURE__ */ jsx(DialogTitle, {
97
- className: "border-b px-5 py-3 text-base font-semibold",
98
- children: "Image Position"
99
- }),
100
- /* @__PURE__ */ jsxs("div", {
101
- className: "flex flex-col gap-4 px-5 py-4",
102
- children: [
103
- /* @__PURE__ */ jsxs("div", {
104
- className: "flex flex-col gap-2",
105
- children: [
106
- /* @__PURE__ */ jsx("div", {
107
- className: sectionLabelCls,
108
- children: "Horizontal"
109
- }),
110
- /* @__PURE__ */ jsxs("div", {
111
- className: "flex items-center gap-2",
112
- children: [/* @__PURE__ */ jsx("label", {
113
- className: labelCls,
114
- htmlFor: fieldIds.hMode,
115
- children: "Position"
116
- }), /* @__PURE__ */ jsxs("select", {
117
- className: inputCls,
118
- id: fieldIds.hMode,
119
- value: hMode,
120
- onChange: (e) => setHMode(e.target.value),
121
- children: [/* @__PURE__ */ jsx("option", {
122
- value: "align",
123
- children: "Alignment"
124
- }), /* @__PURE__ */ jsx("option", {
125
- value: "offset",
126
- children: "Offset"
127
- })]
128
- })]
129
- }),
130
- hMode === "align" ? /* @__PURE__ */ jsxs("div", {
131
- className: "flex items-center gap-2",
132
- children: [/* @__PURE__ */ jsx("label", {
133
- className: labelCls,
134
- htmlFor: fieldIds.hAlign,
135
- children: "Align"
136
- }), /* @__PURE__ */ jsxs("select", {
137
- className: inputCls,
138
- id: fieldIds.hAlign,
139
- value: hAlign,
140
- onChange: (e) => setHAlign(e.target.value),
141
- children: [
142
- /* @__PURE__ */ jsx("option", {
143
- value: "left",
144
- children: "Left"
145
- }),
146
- /* @__PURE__ */ jsx("option", {
147
- value: "center",
148
- children: "Center"
149
- }),
150
- /* @__PURE__ */ jsx("option", {
151
- value: "right",
152
- children: "Right"
153
- })
154
- ]
155
- })]
156
- }) : /* @__PURE__ */ jsxs("div", {
157
- className: "flex items-center gap-2",
158
- children: [/* @__PURE__ */ jsx("label", {
159
- className: labelCls,
160
- htmlFor: fieldIds.hOffset,
161
- children: "Offset (px)"
162
- }), /* @__PURE__ */ jsx("input", {
163
- className: inputCls,
164
- id: fieldIds.hOffset,
165
- type: "number",
166
- value: hOffset,
167
- onChange: (e) => setHOffset(Number(e.target.value) || 0)
168
- })]
169
- }),
170
- /* @__PURE__ */ jsxs("div", {
171
- className: "flex items-center gap-2",
172
- children: [/* @__PURE__ */ jsx("label", {
173
- className: labelCls,
174
- htmlFor: fieldIds.hRelativeTo,
175
- children: "Relative to"
176
- }), /* @__PURE__ */ jsxs("select", {
177
- className: inputCls,
178
- id: fieldIds.hRelativeTo,
179
- value: hRelativeTo,
180
- onChange: (e) => setHRelativeTo(e.target.value),
181
- children: [
182
- /* @__PURE__ */ jsx("option", {
183
- value: "page",
184
- children: "Page"
185
- }),
186
- /* @__PURE__ */ jsx("option", {
187
- value: "column",
188
- children: "Column"
189
- }),
190
- /* @__PURE__ */ jsx("option", {
191
- value: "margin",
192
- children: "Margin"
193
- }),
194
- /* @__PURE__ */ jsx("option", {
195
- value: "character",
196
- children: "Character"
197
- })
198
- ]
199
- })]
200
- })
201
- ]
202
- }),
203
- /* @__PURE__ */ jsxs("div", {
204
- className: "flex flex-col gap-2",
205
- children: [
206
- /* @__PURE__ */ jsx("div", {
207
- className: sectionLabelCls,
208
- children: "Vertical"
209
- }),
210
- /* @__PURE__ */ jsxs("div", {
211
- className: "flex items-center gap-2",
212
- children: [/* @__PURE__ */ jsx("label", {
213
- className: labelCls,
214
- htmlFor: fieldIds.vMode,
215
- children: "Position"
216
- }), /* @__PURE__ */ jsxs("select", {
217
- className: inputCls,
218
- id: fieldIds.vMode,
219
- value: vMode,
220
- onChange: (e) => setVMode(e.target.value),
221
- children: [/* @__PURE__ */ jsx("option", {
222
- value: "align",
223
- children: "Alignment"
224
- }), /* @__PURE__ */ jsx("option", {
225
- value: "offset",
226
- children: "Offset"
227
- })]
228
- })]
229
- }),
230
- vMode === "align" ? /* @__PURE__ */ jsxs("div", {
231
- className: "flex items-center gap-2",
232
- children: [/* @__PURE__ */ jsx("label", {
233
- className: labelCls,
234
- htmlFor: fieldIds.vAlign,
235
- children: "Align"
236
- }), /* @__PURE__ */ jsxs("select", {
237
- className: inputCls,
238
- id: fieldIds.vAlign,
239
- value: vAlign,
240
- onChange: (e) => setVAlign(e.target.value),
241
- children: [
242
- /* @__PURE__ */ jsx("option", {
243
- value: "top",
244
- children: "Top"
245
- }),
246
- /* @__PURE__ */ jsx("option", {
247
- value: "center",
248
- children: "Center"
249
- }),
250
- /* @__PURE__ */ jsx("option", {
251
- value: "bottom",
252
- children: "Bottom"
253
- })
254
- ]
255
- })]
256
- }) : /* @__PURE__ */ jsxs("div", {
257
- className: "flex items-center gap-2",
258
- children: [/* @__PURE__ */ jsx("label", {
259
- className: labelCls,
260
- htmlFor: fieldIds.vOffset,
261
- children: "Offset (px)"
262
- }), /* @__PURE__ */ jsx("input", {
263
- className: inputCls,
264
- id: fieldIds.vOffset,
265
- type: "number",
266
- value: vOffset,
267
- onChange: (e) => setVOffset(Number(e.target.value) || 0)
268
- })]
269
- }),
270
- /* @__PURE__ */ jsxs("div", {
271
- className: "flex items-center gap-2",
272
- children: [/* @__PURE__ */ jsx("label", {
273
- className: labelCls,
274
- htmlFor: fieldIds.vRelativeTo,
275
- children: "Relative to"
276
- }), /* @__PURE__ */ jsxs("select", {
277
- className: inputCls,
278
- id: fieldIds.vRelativeTo,
279
- value: vRelativeTo,
280
- onChange: (e) => setVRelativeTo(e.target.value),
281
- children: [
282
- /* @__PURE__ */ jsx("option", {
283
- value: "page",
284
- children: "Page"
285
- }),
286
- /* @__PURE__ */ jsx("option", {
287
- value: "margin",
288
- children: "Margin"
289
- }),
290
- /* @__PURE__ */ jsx("option", {
291
- value: "paragraph",
292
- children: "Paragraph"
293
- }),
294
- /* @__PURE__ */ jsx("option", {
295
- value: "line",
296
- children: "Line"
297
- })
298
- ]
299
- })]
300
- })
301
- ]
302
- }),
303
- /* @__PURE__ */ jsxs("div", {
304
- className: "flex flex-col gap-2",
305
- children: [/* @__PURE__ */ jsx("div", {
306
- className: sectionLabelCls,
307
- children: "Distance from text (px)"
308
- }), /* @__PURE__ */ jsxs("div", {
309
- className: "grid grid-cols-2 gap-2",
310
- children: [
311
- /* @__PURE__ */ jsxs("div", {
312
- className: "flex items-center gap-2",
313
- children: [/* @__PURE__ */ jsx("label", {
314
- className: distLabelCls,
315
- htmlFor: fieldIds.distTop,
316
- children: "Top"
317
- }), /* @__PURE__ */ jsx("input", {
318
- className: inputCls,
319
- id: fieldIds.distTop,
320
- min: 0,
321
- type: "number",
322
- value: distTop,
323
- onChange: (e) => setDistTop(Number(e.target.value) || 0)
324
- })]
325
- }),
326
- /* @__PURE__ */ jsxs("div", {
327
- className: "flex items-center gap-2",
328
- children: [/* @__PURE__ */ jsx("label", {
329
- className: distLabelCls,
330
- htmlFor: fieldIds.distBottom,
331
- children: "Bottom"
332
- }), /* @__PURE__ */ jsx("input", {
333
- className: inputCls,
334
- id: fieldIds.distBottom,
335
- min: 0,
336
- type: "number",
337
- value: distBottom,
338
- onChange: (e) => setDistBottom(Number(e.target.value) || 0)
339
- })]
340
- }),
341
- /* @__PURE__ */ jsxs("div", {
342
- className: "flex items-center gap-2",
343
- children: [/* @__PURE__ */ jsx("label", {
344
- className: distLabelCls,
345
- htmlFor: fieldIds.distLeft,
346
- children: "Left"
347
- }), /* @__PURE__ */ jsx("input", {
348
- className: inputCls,
349
- id: fieldIds.distLeft,
350
- min: 0,
351
- type: "number",
352
- value: distLeft,
353
- onChange: (e) => setDistLeft(Number(e.target.value) || 0)
354
- })]
355
- }),
356
- /* @__PURE__ */ jsxs("div", {
357
- className: "flex items-center gap-2",
358
- children: [/* @__PURE__ */ jsx("label", {
359
- className: distLabelCls,
360
- htmlFor: fieldIds.distRight,
361
- children: "Right"
362
- }), /* @__PURE__ */ jsx("input", {
363
- className: inputCls,
364
- id: fieldIds.distRight,
365
- min: 0,
366
- type: "number",
367
- value: distRight,
368
- onChange: (e) => setDistRight(Number(e.target.value) || 0)
369
- })]
370
- })
371
- ]
372
- })]
373
- })
374
- ]
375
- }),
376
- /* @__PURE__ */ jsxs("div", {
377
- className: "flex justify-end gap-2 border-t px-5 py-3",
378
- children: [/* @__PURE__ */ jsx(DialogClose, {
379
- className: "border-input rounded border px-4 py-1.5 text-[13px]",
380
- children: "Cancel"
381
- }), /* @__PURE__ */ jsx("button", {
382
- className: "bg-primary text-primary-foreground rounded px-4 py-1.5 text-[13px] font-medium",
383
- onClick: handleApply,
384
- type: "button",
385
- children: "Apply"
386
- })]
387
- })
388
- ]
389
- })] })
390
- });
391
- }
392
- //#endregion
393
- export { ImagePositionDialog };