@simple-builder/react 1.2.9 → 1.3.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 (98) hide show
  1. package/dist/{build-container-client-VF3DTHKE.mjs → build-container-client-5QC5KVS3.mjs} +215 -215
  2. package/dist/build-container-client-D2ZD6IEH.css +1964 -0
  3. package/dist/{build-container-client-O3HCUDB7.js → build-container-client-NXIMV3RF.js} +293 -293
  4. package/dist/{builder-content-325KIPAU.mjs → builder-content-3H7GF3KF.mjs} +3 -3
  5. package/dist/{builder-content-CUJJ3KBR.js → builder-content-BIVYFWCC.js} +7 -7
  6. package/dist/builder-content-NFFJ4NAB.css +1964 -0
  7. package/dist/{chunk-IACBZNOK.js → chunk-2CPAROZB.js} +7 -7
  8. package/dist/{chunk-2DLJX5FY.mjs → chunk-B5R6QY7N.mjs} +7 -7
  9. package/dist/{chunk-5DXQZNUR.mjs → chunk-CJGHP5Q7.mjs} +25 -19
  10. package/dist/{chunk-5N4LAZ6V.js → chunk-WI3YU7TV.js} +3 -3
  11. package/dist/{chunk-3F3TNWYK.mjs → chunk-XSG7W73Z.mjs} +2 -2
  12. package/dist/{chunk-6NZWMSQR.js → chunk-YKPZPQ5D.js} +29 -23
  13. package/dist/index.css +1920 -1486
  14. package/dist/index.js +6 -6
  15. package/dist/index.mjs +2 -2
  16. package/package.json +4 -4
  17. package/dist/build-container-client-56IGH4EB.mjs +0 -2263
  18. package/dist/build-container-client-6D4M5MV6.mjs +0 -2259
  19. package/dist/build-container-client-6NICVHM7.css +0 -1530
  20. package/dist/build-container-client-7UASGAWO.mjs +0 -2264
  21. package/dist/build-container-client-FP6NTFZ7.js +0 -2298
  22. package/dist/build-container-client-IC4ZMQPB.js +0 -2300
  23. package/dist/build-container-client-JR4HENF4.mjs +0 -2261
  24. package/dist/build-container-client-JS3CR4W3.js +0 -2299
  25. package/dist/build-container-client-JXYQOZHZ.js +0 -2295
  26. package/dist/build-container-client-OANZW6DH.mjs +0 -2263
  27. package/dist/build-container-client-QBXLJYQD.js +0 -2299
  28. package/dist/build-container-client-QOFTIHCU.js +0 -2297
  29. package/dist/build-container-client-XNI5DVSE.mjs +0 -2279
  30. package/dist/build-container-client-YSPLIQZC.mjs +0 -2262
  31. package/dist/build-container-client-YTZ4C67E.mjs +0 -2265
  32. package/dist/build-container-client-Z34EUPR3.js +0 -2301
  33. package/dist/build-container-client-ZXB5JG67.js +0 -2315
  34. package/dist/builder-content-5K55QBEE.js +0 -42
  35. package/dist/builder-content-5K7B4FXR.js +0 -42
  36. package/dist/builder-content-7CYIKIWQ.mjs +0 -20
  37. package/dist/builder-content-EHVMYKSR.mjs +0 -20
  38. package/dist/builder-content-IQHALH5A.js +0 -42
  39. package/dist/builder-content-J6G2PNIM.js +0 -42
  40. package/dist/builder-content-JQ7BYR4W.mjs +0 -20
  41. package/dist/builder-content-KWK44AH6.mjs +0 -20
  42. package/dist/builder-content-LYSSA6KK.js +0 -42
  43. package/dist/builder-content-MPQ7ZQN4.js +0 -42
  44. package/dist/builder-content-OE75E24Z.mjs +0 -20
  45. package/dist/builder-content-P24OTLH4.css +0 -1530
  46. package/dist/builder-content-QFRPA4VE.js +0 -42
  47. package/dist/builder-content-S2ZNOULV.mjs +0 -20
  48. package/dist/builder-content-STUVQ4ME.mjs +0 -20
  49. package/dist/builder-content-WJFD3ACD.mjs +0 -20
  50. package/dist/builder-content-ZHXFSCT7.js +0 -42
  51. package/dist/chunk-2GRDEACJ.js +0 -153
  52. package/dist/chunk-2S5KDJXM.js +0 -263
  53. package/dist/chunk-2UYKRF3Y.js +0 -263
  54. package/dist/chunk-5NN2XSII.mjs +0 -238
  55. package/dist/chunk-5VQCJART.js +0 -153
  56. package/dist/chunk-75X4HNGS.mjs +0 -238
  57. package/dist/chunk-7DFHZYGR.js +0 -263
  58. package/dist/chunk-7J7CMYXS.mjs +0 -20
  59. package/dist/chunk-BUELIHBX.mjs +0 -238
  60. package/dist/chunk-DMNRRIPC.js +0 -42
  61. package/dist/chunk-EMZAPBOH.mjs +0 -20
  62. package/dist/chunk-FKVC2UHD.js +0 -42
  63. package/dist/chunk-FN6K4WJP.mjs +0 -20
  64. package/dist/chunk-G6MYXYJU.mjs +0 -238
  65. package/dist/chunk-GVPZDUDM.js +0 -42
  66. package/dist/chunk-HA4DTJA7.mjs +0 -123
  67. package/dist/chunk-I4TPSTXB.js +0 -263
  68. package/dist/chunk-IVF3GTYS.js +0 -263
  69. package/dist/chunk-JDB6GNKI.js +0 -263
  70. package/dist/chunk-KC4V2ZJN.mjs +0 -123
  71. package/dist/chunk-KS4VUS45.mjs +0 -238
  72. package/dist/chunk-LNSOKXFY.mjs +0 -20
  73. package/dist/chunk-LPZDTDBB.js +0 -153
  74. package/dist/chunk-NJ6FM7SJ.mjs +0 -123
  75. package/dist/chunk-OOIADGIA.js +0 -153
  76. package/dist/chunk-ORODN5Q7.js +0 -153
  77. package/dist/chunk-PFSFBCPI.mjs +0 -123
  78. package/dist/chunk-QEQT2EER.mjs +0 -238
  79. package/dist/chunk-RCDOLMDG.js +0 -263
  80. package/dist/chunk-RFPQNWBX.mjs +0 -123
  81. package/dist/chunk-RTB6I3Q2.js +0 -153
  82. package/dist/chunk-RUBQ6OAO.mjs +0 -238
  83. package/dist/chunk-S4IIRN4J.mjs +0 -20
  84. package/dist/chunk-SMRPMB3V.js +0 -153
  85. package/dist/chunk-TF7VKEU2.mjs +0 -123
  86. package/dist/chunk-TPRY6DEO.js +0 -153
  87. package/dist/chunk-TSIU64AJ.mjs +0 -238
  88. package/dist/chunk-TWGYIJD2.js +0 -42
  89. package/dist/chunk-UFWIAKEA.mjs +0 -20
  90. package/dist/chunk-UH23D2JA.mjs +0 -123
  91. package/dist/chunk-UYVCZD2U.mjs +0 -20
  92. package/dist/chunk-WP7KTUTL.js +0 -42
  93. package/dist/chunk-WQ376VV2.js +0 -263
  94. package/dist/chunk-WUYG7TZ5.js +0 -42
  95. package/dist/chunk-XFIY7HQO.mjs +0 -123
  96. package/dist/chunk-XJ4ZJCQS.js +0 -42
  97. package/dist/chunk-XULCJNV7.mjs +0 -20
  98. package/dist/chunk-YMC3DDLP.js +0 -42
@@ -1,2315 +0,0 @@
1
- 'use client';
2
- 'use client';
3
- 'use client';
4
- 'use client';
5
- 'use client';
6
- 'use client';
7
- 'use client';
8
- 'use strict';
9
-
10
- require('./chunk-FKVC2UHD.js');
11
- var chunkJDB6GNKI_js = require('./chunk-JDB6GNKI.js');
12
- var chunkRTB6I3Q2_js = require('./chunk-RTB6I3Q2.js');
13
- var React25 = require('react');
14
- var lucideReact = require('lucide-react');
15
- var AlertDialogPrimitive = require('@radix-ui/react-alert-dialog');
16
- var PopoverPrimitive = require('@radix-ui/react-popover');
17
- var react = require('@tiptap/react');
18
- var extensionColor = require('@tiptap/extension-color');
19
- var extensionTextStyle = require('@tiptap/extension-text-style');
20
- var extensionUnderline = require('@tiptap/extension-underline');
21
- var starterKit = require('@tiptap/starter-kit');
22
- var TiptapLink = require('@tiptap/extension-link');
23
- var state = require('@tiptap/pm/state');
24
- var DropdownMenuPrimitive = require('@radix-ui/react-dropdown-menu');
25
- var SeparatorPrimitive = require('@radix-ui/react-separator');
26
- var TogglePrimitive = require('@radix-ui/react-toggle');
27
- var classVarianceAuthority = require('class-variance-authority');
28
- var lu = require('react-icons/lu');
29
- var ToggleGroupPrimitive = require('@radix-ui/react-toggle-group');
30
- var DialogPrimitive = require('@radix-ui/react-dialog');
31
- var reactSlot = require('@radix-ui/react-slot');
32
- var reactHookForm = require('react-hook-form');
33
- var LabelPrimitive = require('@radix-ui/react-label');
34
- var SwitchPrimitives = require('@radix-ui/react-switch');
35
- var zod$1 = require('@hookform/resolvers/zod');
36
- var zod = require('zod');
37
- var dateFns = require('date-fns');
38
- var reactDayPicker = require('react-day-picker');
39
- var SelectPrimitive = require('@radix-ui/react-select');
40
- var TabsPrimitive = require('@radix-ui/react-tabs');
41
- var ScrollAreaPrimitive = require('@radix-ui/react-scroll-area');
42
-
43
- function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
44
-
45
- function _interopNamespace(e) {
46
- if (e && e.__esModule) return e;
47
- var n = Object.create(null);
48
- if (e) {
49
- Object.keys(e).forEach(function (k) {
50
- if (k !== 'default') {
51
- var d = Object.getOwnPropertyDescriptor(e, k);
52
- Object.defineProperty(n, k, d.get ? d : {
53
- enumerable: true,
54
- get: function () { return e[k]; }
55
- });
56
- }
57
- });
58
- }
59
- n.default = e;
60
- return Object.freeze(n);
61
- }
62
-
63
- var React25__namespace = /*#__PURE__*/_interopNamespace(React25);
64
- var AlertDialogPrimitive__namespace = /*#__PURE__*/_interopNamespace(AlertDialogPrimitive);
65
- var PopoverPrimitive__namespace = /*#__PURE__*/_interopNamespace(PopoverPrimitive);
66
- var TiptapLink__default = /*#__PURE__*/_interopDefault(TiptapLink);
67
- var DropdownMenuPrimitive__namespace = /*#__PURE__*/_interopNamespace(DropdownMenuPrimitive);
68
- var SeparatorPrimitive__namespace = /*#__PURE__*/_interopNamespace(SeparatorPrimitive);
69
- var TogglePrimitive__namespace = /*#__PURE__*/_interopNamespace(TogglePrimitive);
70
- var ToggleGroupPrimitive__namespace = /*#__PURE__*/_interopNamespace(ToggleGroupPrimitive);
71
- var DialogPrimitive__namespace = /*#__PURE__*/_interopNamespace(DialogPrimitive);
72
- var LabelPrimitive__namespace = /*#__PURE__*/_interopNamespace(LabelPrimitive);
73
- var SwitchPrimitives__namespace = /*#__PURE__*/_interopNamespace(SwitchPrimitives);
74
- var SelectPrimitive__namespace = /*#__PURE__*/_interopNamespace(SelectPrimitive);
75
- var TabsPrimitive__namespace = /*#__PURE__*/_interopNamespace(TabsPrimitive);
76
- var ScrollAreaPrimitive__namespace = /*#__PURE__*/_interopNamespace(ScrollAreaPrimitive);
77
-
78
- var AlertDialog = AlertDialogPrimitive__namespace.Root;
79
- var AlertDialogTrigger = AlertDialogPrimitive__namespace.Trigger;
80
- var AlertDialogPortal = AlertDialogPrimitive__namespace.Portal;
81
- var AlertDialogOverlay = React25__namespace.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ React25__namespace.createElement(
82
- AlertDialogPrimitive__namespace.Overlay,
83
- {
84
- className: chunkRTB6I3Q2_js.cn(
85
- "sb-fixed sb-inset-0 sb-z-50 sb-bg-background/80 sb-backdrop-blur-sm data-[state=open]:sb-animate-in data-[state=closed]:sb-animate-out data-[state=closed]:sb-fade-out-0 data-[state=open]:sb-fade-in-0",
86
- className
87
- ),
88
- ...props,
89
- ref
90
- }
91
- ));
92
- AlertDialogOverlay.displayName = AlertDialogPrimitive__namespace.Overlay.displayName;
93
- var AlertDialogContent = React25__namespace.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ React25__namespace.createElement(AlertDialogPortal, null, /* @__PURE__ */ React25__namespace.createElement(AlertDialogOverlay, null), /* @__PURE__ */ React25__namespace.createElement(
94
- AlertDialogPrimitive__namespace.Content,
95
- {
96
- ref,
97
- className: chunkRTB6I3Q2_js.cn(
98
- "sb-fixed sb-font-roboto sb-left-[50%] sb-top-[50%] sb-z-50 sb-grid sb-w-full sb-max-w-lg sb-translate-x-[-50%] sb-translate-y-[-50%] sb-gap-4 sb-border sb-bg-background sb-p-6 sb-shadow-lg sb-duration-200 data-[state=open]:sb-animate-in data-[state=closed]:sb-animate-out data-[state=closed]:sb-fade-out-0 data-[state=open]:sb-fade-in-0 data-[state=closed]:sb-zoom-out-95 data-[state=open]:sb-zoom-in-95 data-[state=closed]:sb-slide-out-to-left-1/2 data-[state=closed]:sb-slide-out-to-top-[48%] data-[state=open]:sb-slide-in-from-left-1/2 data-[state=open]:sb-slide-in-from-top-[48%] sm:sb-rounded-lg",
99
- className
100
- ),
101
- ...props
102
- }
103
- )));
104
- AlertDialogContent.displayName = AlertDialogPrimitive__namespace.Content.displayName;
105
- var AlertDialogFooter = ({
106
- className,
107
- ...props
108
- }) => /* @__PURE__ */ React25__namespace.createElement(
109
- "div",
110
- {
111
- className: chunkRTB6I3Q2_js.cn(
112
- "sb-flex sb-flex-col-reverse sm:sb-flex-row sm:sb-justify-end sm:sb-space-x-2",
113
- className
114
- ),
115
- ...props
116
- }
117
- );
118
- AlertDialogFooter.displayName = "AlertDialogFooter";
119
- var AlertDialogTitle = React25__namespace.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ React25__namespace.createElement(
120
- AlertDialogPrimitive__namespace.Title,
121
- {
122
- ref,
123
- className: chunkRTB6I3Q2_js.cn("sb-text-lg sb-font-semibold", className),
124
- ...props
125
- }
126
- ));
127
- AlertDialogTitle.displayName = AlertDialogPrimitive__namespace.Title.displayName;
128
- var AlertDialogDescription = React25__namespace.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ React25__namespace.createElement(
129
- AlertDialogPrimitive__namespace.Description,
130
- {
131
- ref,
132
- className: chunkRTB6I3Q2_js.cn("sb-text-sm sb-text-muted-foreground", className),
133
- ...props
134
- }
135
- ));
136
- AlertDialogDescription.displayName = AlertDialogPrimitive__namespace.Description.displayName;
137
- var AlertDialogAction = React25__namespace.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ React25__namespace.createElement(
138
- AlertDialogPrimitive__namespace.Action,
139
- {
140
- ref,
141
- className: chunkRTB6I3Q2_js.cn(chunkJDB6GNKI_js.buttonVariants(), className),
142
- ...props
143
- }
144
- ));
145
- AlertDialogAction.displayName = AlertDialogPrimitive__namespace.Action.displayName;
146
- var AlertDialogCancel = React25__namespace.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ React25__namespace.createElement(
147
- AlertDialogPrimitive__namespace.Cancel,
148
- {
149
- ref,
150
- className: chunkRTB6I3Q2_js.cn(
151
- chunkJDB6GNKI_js.buttonVariants({ variant: "outline" }),
152
- "sb-mt-2 sm:sb-mt-0",
153
- className
154
- ),
155
- ...props
156
- }
157
- ));
158
- AlertDialogCancel.displayName = AlertDialogPrimitive__namespace.Cancel.displayName;
159
- var Popover = PopoverPrimitive__namespace.Root;
160
- var PopoverTrigger = PopoverPrimitive__namespace.Trigger;
161
- var PopoverClose = PopoverPrimitive__namespace.Close;
162
- var PopoverContent = React25__namespace.forwardRef(({ className, align = "center", sideOffset = 4, ...props }, ref) => /* @__PURE__ */ React25__namespace.createElement(PopoverPrimitive__namespace.Portal, null, /* @__PURE__ */ React25__namespace.createElement(
163
- PopoverPrimitive__namespace.Content,
164
- {
165
- ref,
166
- align,
167
- sideOffset,
168
- className: chunkRTB6I3Q2_js.cn(
169
- "sb-z-50 sb-w-72 sb-rounded-md sb-border sb-bg-popover sb-p-4 sb-text-popover-foreground sb-shadow-md sb-outline-none data-[state=open]:sb-animate-in data-[state=closed]:sb-animate-out data-[state=closed]:sb-fade-out-0 data-[state=open]:sb-fade-in-0 data-[state=closed]:sb-zoom-out-95 data-[state=open]:sb-zoom-in-95 data-[side=bottom]:sb-slide-in-from-top-2 data-[side=left]:sb-slide-in-from-right-2 data-[side=right]:sb-slide-in-from-left-2 data-[side=top]:sb-slide-in-from-bottom-2 sb-origin-[--radix-popover-content-transform-origin]",
170
- className
171
- ),
172
- ...props
173
- }
174
- )));
175
- PopoverContent.displayName = PopoverPrimitive__namespace.Content.displayName;
176
- var Link = TiptapLink__default.default.extend({
177
- inclusive: false,
178
- parseHTML() {
179
- return [{ tag: 'a[href]:not([data-type="button"]):not([href *= "javascript:" i])' }];
180
- },
181
- renderHTML({ HTMLAttributes }) {
182
- return ["a", react.mergeAttributes(this.options.HTMLAttributes, HTMLAttributes), 0];
183
- },
184
- addOptions() {
185
- return {
186
- ...this.parent?.(),
187
- openOnClick: false
188
- };
189
- },
190
- addProseMirrorPlugins() {
191
- return [
192
- ...this.parent?.() || [],
193
- new state.Plugin({
194
- props: {
195
- handleClick(view, pos) {
196
- const { schema: schema2, doc, tr } = view.state;
197
- const range = react.getMarkRange(doc.resolve(pos), schema2.marks.link);
198
- if (!range) {
199
- return;
200
- }
201
- const { from, to } = range;
202
- const start = Math.min(from, to);
203
- const end = Math.max(from, to);
204
- if (pos < start || pos > end) {
205
- return;
206
- }
207
- const $start = doc.resolve(start);
208
- const $end = doc.resolve(end);
209
- const transaction = tr.setSelection(new state.TextSelection($start, $end));
210
- view.dispatch(transaction);
211
- }
212
- }
213
- })
214
- ];
215
- }
216
- });
217
-
218
- // src/features/rich-text-editor/utils/get-output.ts
219
- var getOutput = (editor, format2) => {
220
- switch (format2) {
221
- case "json":
222
- return editor.getJSON();
223
- case "html":
224
- return editor.isEmpty ? "" : editor.getHTML();
225
- default:
226
- return editor.getText();
227
- }
228
- };
229
-
230
- // src/features/rich-text-editor/hooks/useRichTextEditor.ts
231
- var useRichTextEditor = ({
232
- value,
233
- output = "html",
234
- editorClassName,
235
- onUpdate,
236
- onBlur,
237
- ...options
238
- }) => {
239
- const handleCreate = React25.useCallback(
240
- (editor2) => {
241
- console.count("useRichTextEditor:handleCreate");
242
- if (value && editor2.isEmpty) {
243
- editor2.commands.setContent(value);
244
- }
245
- },
246
- [value]
247
- );
248
- const handleUpdate = React25.useCallback(
249
- (editor2) => {
250
- console.count("useRichTextEditor:handleUpdate");
251
- onUpdate?.(getOutput(editor2, output));
252
- },
253
- [output, onUpdate]
254
- );
255
- const handleBlur = React25.useCallback(
256
- (editor2) => {
257
- console.count("useRichTextEditor:handleBlur");
258
- onBlur?.(getOutput(editor2, output));
259
- },
260
- [output, onBlur]
261
- );
262
- const editor = react.useEditor({
263
- extensions: [starterKit.StarterKit, extensionUnderline.Underline, extensionColor.Color, extensionTextStyle.TextStyle, Link],
264
- editorProps: {
265
- attributes: {
266
- autocomplete: "off",
267
- autocorrect: "off",
268
- autocapitalize: "off",
269
- class: chunkRTB6I3Q2_js.cn("sb-focus:outline-none", editorClassName)
270
- }
271
- },
272
- onCreate: ({ editor: editor2 }) => handleCreate(editor2),
273
- onUpdate: ({ editor: editor2 }) => handleUpdate(editor2),
274
- onBlur: ({ editor: editor2 }) => handleBlur(editor2),
275
- ...options
276
- });
277
- console.count("useRichTextEditor");
278
- return editor;
279
- };
280
- var DropdownMenu = DropdownMenuPrimitive__namespace.Root;
281
- var DropdownMenuTrigger = DropdownMenuPrimitive__namespace.Trigger;
282
- var DropdownMenuSubTrigger = React25__namespace.forwardRef(({ className, inset, children, ...props }, ref) => /* @__PURE__ */ React25__namespace.createElement(
283
- DropdownMenuPrimitive__namespace.SubTrigger,
284
- {
285
- ref,
286
- className: chunkRTB6I3Q2_js.cn(
287
- "sb-flex sb-cursor-default sb-select-none sb-items-center sb-gap-2 sb-rounded-sm sb-px-2 sb-py-1.5 sb-text-sm sb-outline-none focus:sb-bg-accent data-[state=open]:sb-bg-accent [&_svg]:sb-pointer-events-none [&_svg]:sb-size-4 [&_svg]:sb-shrink-0",
288
- inset && "sb-pl-8",
289
- className
290
- ),
291
- ...props
292
- },
293
- children,
294
- /* @__PURE__ */ React25__namespace.createElement(lucideReact.ChevronRight, { className: "sb-ml-auto" })
295
- ));
296
- DropdownMenuSubTrigger.displayName = DropdownMenuPrimitive__namespace.SubTrigger.displayName;
297
- var DropdownMenuSubContent = React25__namespace.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ React25__namespace.createElement(
298
- DropdownMenuPrimitive__namespace.SubContent,
299
- {
300
- ref,
301
- className: chunkRTB6I3Q2_js.cn(
302
- "sb-z-50 sb-min-w-[8rem] sb-overflow-hidden sb-rounded-md sb-border sb-bg-popover sb-p-1 sb-text-popover-foreground sb-shadow-lg data-[state=open]:sb-animate-in data-[state=closed]:sb-animate-out data-[state=closed]:sb-fade-out-0 data-[state=open]:sb-fade-in-0 data-[state=closed]:sb-zoom-out-95 data-[state=open]:sb-zoom-in-95 data-[side=bottom]:sb-slide-in-from-top-2 data-[side=left]:sb-slide-in-from-right-2 data-[side=right]:sb-slide-in-from-left-2 data-[side=top]:sb-slide-in-from-bottom-2 sb-origin-[--radix-dropdown-menu-content-transform-origin]",
303
- className
304
- ),
305
- ...props
306
- }
307
- ));
308
- DropdownMenuSubContent.displayName = DropdownMenuPrimitive__namespace.SubContent.displayName;
309
- var DropdownMenuContent = React25__namespace.forwardRef(({ className, sideOffset = 4, ...props }, ref) => /* @__PURE__ */ React25__namespace.createElement(DropdownMenuPrimitive__namespace.Portal, null, /* @__PURE__ */ React25__namespace.createElement(
310
- DropdownMenuPrimitive__namespace.Content,
311
- {
312
- ref,
313
- sideOffset,
314
- className: chunkRTB6I3Q2_js.cn(
315
- "sb-z-50 sb-max-h-[var(--radix-dropdown-menu-content-available-height)] sb-min-w-[8rem] sb-overflow-y-auto sb-overflow-x-hidden sb-rounded-md sb-border sb-bg-popover sb-p-1 sb-text-popover-foreground sb-shadow-md",
316
- "data-[state=open]:sb-animate-in data-[state=closed]:sb-animate-out data-[state=closed]:sb-fade-out-0 data-[state=open]:sb-fade-in-0 data-[state=closed]:sb-zoom-out-95 data-[state=open]:sb-zoom-in-95 data-[side=bottom]:sb-slide-in-from-top-2 data-[side=left]:sb-slide-in-from-right-2 data-[side=right]:sb-slide-in-from-left-2 data-[side=top]:sb-slide-in-from-bottom-2 sb-origin-[--radix-dropdown-menu-content-transform-origin]",
317
- className
318
- ),
319
- ...props
320
- }
321
- )));
322
- DropdownMenuContent.displayName = DropdownMenuPrimitive__namespace.Content.displayName;
323
- var DropdownMenuItem = React25__namespace.forwardRef(({ className, inset, ...props }, ref) => /* @__PURE__ */ React25__namespace.createElement(
324
- DropdownMenuPrimitive__namespace.Item,
325
- {
326
- ref,
327
- className: chunkRTB6I3Q2_js.cn(
328
- "sb-relative sb-flex sb-cursor-default sb-select-none sb-items-center sb-gap-2 sb-rounded-sm sb-px-2 sb-py-1.5 sb-text-sm sb-outline-none sb-transition-colors focus:sb-bg-accent focus:sb-text-accent-foreground data-[disabled]:sb-pointer-events-none data-[disabled]:sb-opacity-50 [&>svg]:sb-size-4 [&>svg]:sb-shrink-0",
329
- inset && "sb-pl-8",
330
- className
331
- ),
332
- ...props
333
- }
334
- ));
335
- DropdownMenuItem.displayName = DropdownMenuPrimitive__namespace.Item.displayName;
336
- var DropdownMenuCheckboxItem = React25__namespace.forwardRef(({ className, children, checked, ...props }, ref) => /* @__PURE__ */ React25__namespace.createElement(
337
- DropdownMenuPrimitive__namespace.CheckboxItem,
338
- {
339
- ref,
340
- className: chunkRTB6I3Q2_js.cn(
341
- "sb-relative sb-flex sb-cursor-default sb-select-none sb-items-center sb-rounded-sm sb-py-1.5 sb-pl-8 sb-pr-2 sb-text-sm sb-outline-none sb-transition-colors focus:sb-bg-accent focus:sb-text-accent-foreground data-[disabled]:sb-pointer-events-none data-[disabled]:sb-opacity-50",
342
- className
343
- ),
344
- checked,
345
- ...props
346
- },
347
- /* @__PURE__ */ React25__namespace.createElement("span", { className: "sb-absolute sb-left-2 sb-flex sb-h-3.5 sb-w-3.5 sb-items-center sb-justify-center" }, /* @__PURE__ */ React25__namespace.createElement(DropdownMenuPrimitive__namespace.ItemIndicator, null, /* @__PURE__ */ React25__namespace.createElement(lucideReact.Check, { className: "sb-h-4 sb-w-4" }))),
348
- children
349
- ));
350
- DropdownMenuCheckboxItem.displayName = DropdownMenuPrimitive__namespace.CheckboxItem.displayName;
351
- var DropdownMenuRadioItem = React25__namespace.forwardRef(({ className, children, ...props }, ref) => /* @__PURE__ */ React25__namespace.createElement(
352
- DropdownMenuPrimitive__namespace.RadioItem,
353
- {
354
- ref,
355
- className: chunkRTB6I3Q2_js.cn(
356
- "sb-relative sb-flex sb-cursor-default sb-select-none sb-items-center sb-rounded-sm sb-py-1.5 sb-pl-8 sb-pr-2 sb-text-sm sb-outline-none sb-transition-colors focus:sb-bg-accent focus:sb-text-accent-foreground data-[disabled]:sb-pointer-events-none data-[disabled]:sb-opacity-50",
357
- className
358
- ),
359
- ...props
360
- },
361
- /* @__PURE__ */ React25__namespace.createElement("span", { className: "sb-absolute sb-left-2 sb-flex sb-h-3.5 sb-w-3.5 sb-items-center sb-justify-center" }, /* @__PURE__ */ React25__namespace.createElement(DropdownMenuPrimitive__namespace.ItemIndicator, null, /* @__PURE__ */ React25__namespace.createElement(lucideReact.Circle, { className: "sb-h-2 sb-w-2 sb-fill-current" }))),
362
- children
363
- ));
364
- DropdownMenuRadioItem.displayName = DropdownMenuPrimitive__namespace.RadioItem.displayName;
365
- var DropdownMenuLabel = React25__namespace.forwardRef(({ className, inset, ...props }, ref) => /* @__PURE__ */ React25__namespace.createElement(
366
- DropdownMenuPrimitive__namespace.Label,
367
- {
368
- ref,
369
- className: chunkRTB6I3Q2_js.cn(
370
- "sb-px-2 sb-py-1.5 sb-text-sm sb-font-semibold",
371
- inset && "sb-pl-8",
372
- className
373
- ),
374
- ...props
375
- }
376
- ));
377
- DropdownMenuLabel.displayName = DropdownMenuPrimitive__namespace.Label.displayName;
378
- var DropdownMenuSeparator = React25__namespace.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ React25__namespace.createElement(
379
- DropdownMenuPrimitive__namespace.Separator,
380
- {
381
- ref,
382
- className: chunkRTB6I3Q2_js.cn("sb--mx-1 sb-my-1 sb-h-px sb-bg-muted", className),
383
- ...props
384
- }
385
- ));
386
- DropdownMenuSeparator.displayName = DropdownMenuPrimitive__namespace.Separator.displayName;
387
- var Separator2 = React25__namespace.forwardRef(
388
- ({ className, orientation = "horizontal", decorative = true, ...props }, ref) => /* @__PURE__ */ React25__namespace.createElement(
389
- SeparatorPrimitive__namespace.Root,
390
- {
391
- ref,
392
- decorative,
393
- orientation,
394
- className: chunkRTB6I3Q2_js.cn(
395
- "sb-shrink-0 sb-bg-border",
396
- orientation === "horizontal" ? "sb-h-[1px] sb-w-full" : "sb-h-full sb-w-[1px]",
397
- className
398
- ),
399
- ...props
400
- }
401
- )
402
- );
403
- Separator2.displayName = SeparatorPrimitive__namespace.Root.displayName;
404
- var toggleVariants = classVarianceAuthority.cva(
405
- "sb-inline-flex sb-items-center sb-justify-center sb-gap-2 sb-rounded-md sb-text-sm sb-font-medium sb-transition-colors hover:sb-bg-muted hover:sb-text-muted-foreground focus-visible:sb-outline-none focus-visible:sb-ring-1 focus-visible:sb-ring-ring disabled:sb-pointer-events-none disabled:sb-opacity-50 data-[state=on]:sb-bg-accent data-[state=on]:sb-text-accent-foreground [&_svg]:sb-pointer-events-none [&_svg]:sb-size-4 [&_svg]:sb-shrink-0",
406
- {
407
- variants: {
408
- variant: {
409
- default: "sb-bg-transparent",
410
- outline: "sb-border sb-border-input sb-bg-transparent sb-shadow-sm hover:sb-bg-accent hover:sb-text-accent-foreground"
411
- },
412
- size: {
413
- default: "sb-h-9 sb-px-2 sb-min-w-9",
414
- sm: "sb-h-8 sb-px-1.5 sb-min-w-8",
415
- lg: "sb-h-10 sb-px-2.5 sb-min-w-10"
416
- }
417
- },
418
- defaultVariants: {
419
- variant: "default",
420
- size: "default"
421
- }
422
- }
423
- );
424
- var Toggle = React25__namespace.forwardRef(({ className, variant, size, ...props }, ref) => /* @__PURE__ */ React25__namespace.createElement(
425
- TogglePrimitive__namespace.Root,
426
- {
427
- ref,
428
- className: chunkRTB6I3Q2_js.cn(toggleVariants({ variant, size, className })),
429
- ...props
430
- }
431
- ));
432
- Toggle.displayName = TogglePrimitive__namespace.Root.displayName;
433
- var ToggleGroupContext = React25__namespace.createContext({
434
- size: "default",
435
- variant: "default"
436
- });
437
- var ToggleGroup = React25__namespace.forwardRef(({ className, variant, size, children, ...props }, ref) => /* @__PURE__ */ React25__namespace.createElement(
438
- ToggleGroupPrimitive__namespace.Root,
439
- {
440
- ref,
441
- className: chunkRTB6I3Q2_js.cn("sb-flex sb-items-center sb-justify-center sb-gap-1", className),
442
- ...props
443
- },
444
- /* @__PURE__ */ React25__namespace.createElement(ToggleGroupContext.Provider, { value: { variant, size } }, children)
445
- ));
446
- ToggleGroup.displayName = ToggleGroupPrimitive__namespace.Root.displayName;
447
- var ToggleGroupItem = React25__namespace.forwardRef(({ className, children, variant, size, ...props }, ref) => {
448
- const context = React25__namespace.useContext(ToggleGroupContext);
449
- return /* @__PURE__ */ React25__namespace.createElement(
450
- ToggleGroupPrimitive__namespace.Item,
451
- {
452
- ref,
453
- className: chunkRTB6I3Q2_js.cn(
454
- toggleVariants({
455
- variant: context.variant || variant,
456
- size: context.size || size
457
- }),
458
- className
459
- ),
460
- ...props
461
- },
462
- children
463
- );
464
- });
465
- ToggleGroupItem.displayName = ToggleGroupPrimitive__namespace.Item.displayName;
466
- var PALETTES = [
467
- {
468
- inverse: "hsl(var(--background))",
469
- colors: [
470
- { cssVar: "hsl(var(--foreground))" },
471
- { cssVar: "hsl(var(--primary-foreground))" },
472
- { cssVar: "hsl(var(--secondary-foreground))" },
473
- { cssVar: "hsl(var(--tertiary-foreground))" },
474
- { cssVar: "hsl(var(--muted-foreground))" },
475
- { cssVar: "hsl(var(--accent-foreground))" },
476
- { cssVar: "hsl(var(--destructive-foreground))" }
477
- ]
478
- },
479
- {
480
- inverse: "hsl(var(--foreground))",
481
- colors: [
482
- { cssVar: "hsl(var(--background))" },
483
- { cssVar: "hsl(var(--primary))" },
484
- { cssVar: "hsl(var(--secondary))" },
485
- { cssVar: "hsl(var(--tertiary))" },
486
- { cssVar: "hsl(var(--muted))" },
487
- { cssVar: "hsl(var(--accent))" },
488
- { cssVar: "hsl(var(--destructive))" }
489
- ]
490
- }
491
- ];
492
- var ColorTool = ({ editor }) => {
493
- const color = editor.getAttributes("textStyle")?.color || "hsl(var(--foreground))";
494
- const [selectedColor, setSelectedColor] = React25__namespace.useState(color);
495
- React25__namespace.useEffect(() => {
496
- setSelectedColor(color);
497
- }, [color]);
498
- const handleColorChange = React25__namespace.useCallback(
499
- (value) => {
500
- setSelectedColor(value);
501
- editor.chain().focus().setColor(value).run();
502
- },
503
- [editor]
504
- );
505
- return /* @__PURE__ */ React25__namespace.createElement(Popover, { modal: true }, /* @__PURE__ */ React25__namespace.createElement(PopoverTrigger, { asChild: true }, /* @__PURE__ */ React25__namespace.createElement(ToolbarButton, { className: "sb-w-12" }, /* @__PURE__ */ React25__namespace.createElement(
506
- "svg",
507
- {
508
- xmlns: "http://www.w3.org/2000/svg",
509
- width: "24",
510
- height: "24",
511
- viewBox: "0 0 24 24",
512
- fill: "none",
513
- stroke: "currentColor",
514
- strokeWidth: "2",
515
- strokeLinecap: "round",
516
- strokeLinejoin: "round",
517
- className: "sb-size-5",
518
- style: { color: selectedColor }
519
- },
520
- /* @__PURE__ */ React25__namespace.createElement("path", { d: "M4 20h16" }),
521
- /* @__PURE__ */ React25__namespace.createElement("path", { d: "m6 16 6-12 6 12" }),
522
- /* @__PURE__ */ React25__namespace.createElement("path", { d: "M8 12h8" })
523
- ), /* @__PURE__ */ React25__namespace.createElement(lu.LuChevronDown, { className: "sb-size-5" }))), /* @__PURE__ */ React25__namespace.createElement(PopoverContent, { align: "start", className: "sb-w-full" }, /* @__PURE__ */ React25__namespace.createElement(
524
- ToggleGroup,
525
- {
526
- type: "single",
527
- value: selectedColor,
528
- onValueChange: handleColorChange,
529
- className: "sb-flex-col sb-gap-1.5"
530
- },
531
- PALETTES.map((pallete, i) => /* @__PURE__ */ React25__namespace.createElement("div", { key: i, className: "sb-flex sb-gap-1.5" }, pallete.colors.map((color2, j) => /* @__PURE__ */ React25__namespace.createElement(
532
- ToggleGroupItem,
533
- {
534
- tabIndex: 0,
535
- key: j,
536
- className: "sb-relative sb-size-7 sb-rounded-md sb-border sb-p-0",
537
- value: color2.cssVar,
538
- style: { backgroundColor: color2.cssVar }
539
- },
540
- selectedColor === color2.cssVar && /* @__PURE__ */ React25__namespace.createElement(
541
- lu.LuCheck,
542
- {
543
- className: "sb-absolute sb-inset-0 sb-m-auto sb-size-6",
544
- style: { color: pallete.inverse }
545
- }
546
- )
547
- ))))
548
- )));
549
- };
550
- var formatActions = [
551
- {
552
- label: "Normal Text",
553
- element: "span",
554
- className: "sb-grow"
555
- },
556
- {
557
- label: "Heading 1",
558
- element: "h1",
559
- level: 1,
560
- className: "sb-m-0 sb-grow sb-text-3xl sb-font-extrabold"
561
- },
562
- {
563
- label: "Heading 2",
564
- element: "h2",
565
- level: 2,
566
- className: "sb-m-0 sb-grow sb-text-xl sb-font-bold"
567
- },
568
- {
569
- label: "Heading 3",
570
- element: "h3",
571
- level: 3,
572
- className: "sb-m-0 sb-grow sb-text-lg sb-font-semibold"
573
- },
574
- {
575
- label: "Heading 4",
576
- element: "h4",
577
- level: 4,
578
- className: "sb-m-0 sb-grow sb-text-base sb-font-semibold"
579
- }
580
- ];
581
- var ElementTool = ({ editor }) => {
582
- const isActive = editor.isActive("heading");
583
- const handleFormatChange = React25__namespace.useCallback(
584
- (level) => {
585
- if (level) {
586
- editor.chain().focus().toggleHeading({ level }).run();
587
- } else {
588
- editor.chain().focus().setParagraph().run();
589
- }
590
- },
591
- [editor]
592
- );
593
- return /* @__PURE__ */ React25__namespace.createElement(DropdownMenu, null, /* @__PURE__ */ React25__namespace.createElement(DropdownMenuTrigger, { asChild: true }, /* @__PURE__ */ React25__namespace.createElement(
594
- ToolbarButton,
595
- {
596
- className: "sb-w-12 data-[state=open]:sb-bg-accent",
597
- pressed: isActive
598
- },
599
- /* @__PURE__ */ React25__namespace.createElement(lu.LuHeading, { className: "sb-size-5" }),
600
- /* @__PURE__ */ React25__namespace.createElement(lu.LuChevronDown, { className: "sb-size-5" })
601
- )), /* @__PURE__ */ React25__namespace.createElement(DropdownMenuContent, { align: "start" }, formatActions.map(({ element: Element, ...action }) => /* @__PURE__ */ React25__namespace.createElement(
602
- DropdownMenuItem,
603
- {
604
- key: action.label,
605
- className: chunkRTB6I3Q2_js.cn({
606
- "sb-bg-accent": action.level ? editor.isActive("heading", { level: action.level }) : editor.isActive("paragraph")
607
- }),
608
- onClick: () => handleFormatChange(action.level)
609
- },
610
- /* @__PURE__ */ React25__namespace.createElement(Element, { className: action.className }, action.label)
611
- ))));
612
- };
613
- var actions = [
614
- {
615
- value: "bold",
616
- label: "Bold",
617
- icon: lu.LuBold,
618
- action: (editor) => editor.chain().focus().toggleBold().run(),
619
- isActive: (editor) => editor.isActive("bold"),
620
- canExecute: (editor) => editor.can().chain().focus().toggleBold().run() && !editor.isActive("codeBlock")
621
- },
622
- {
623
- value: "italic",
624
- label: "Italic",
625
- icon: lu.LuItalic,
626
- action: (editor) => editor.chain().focus().toggleItalic().run(),
627
- isActive: (editor) => editor.isActive("italic"),
628
- canExecute: (editor) => editor.can().chain().focus().toggleItalic().run() && !editor.isActive("codeBlock")
629
- },
630
- {
631
- value: "underline",
632
- label: "Underline",
633
- icon: lu.LuUnderline,
634
- action: (editor) => editor.chain().focus().toggleUnderline().run(),
635
- isActive: (editor) => editor.isActive("underline"),
636
- canExecute: (editor) => editor.can().chain().focus().toggleUnderline().run() && !editor.isActive("codeBlock")
637
- },
638
- {
639
- value: "strikethrough",
640
- label: "Strikethrough",
641
- icon: lu.LuStrikethrough,
642
- action: (editor) => editor.chain().focus().toggleStrike().run(),
643
- isActive: (editor) => editor.isActive("strike"),
644
- canExecute: (editor) => editor.can().chain().focus().toggleStrike().run() && !editor.isActive("codeBlock")
645
- },
646
- {
647
- value: "code",
648
- label: "Code",
649
- icon: lu.LuCode,
650
- action: (editor) => editor.chain().focus().toggleCode().run(),
651
- isActive: (editor) => editor.isActive("code"),
652
- canExecute: (editor) => editor.can().chain().focus().toggleCode().run() && !editor.isActive("codeBlock")
653
- },
654
- {
655
- value: "clearFormatting",
656
- label: "Clear formatting",
657
- icon: lu.LuRemoveFormatting,
658
- action: (editor) => editor.chain().focus().unsetAllMarks().run(),
659
- isActive: () => false,
660
- canExecute: (editor) => editor.can().chain().focus().unsetAllMarks().run() && !editor.isActive("codeBlock")
661
- }
662
- ];
663
- var FormatTool = ({ editor }) => {
664
- return /* @__PURE__ */ React25__namespace.createElement(ToolbarSection, { editor, actions, mainActionCount: 1 });
665
- };
666
- var actions2 = [
667
- {
668
- value: "codeBlock",
669
- label: "Code block",
670
- icon: lu.LuCode,
671
- action: (editor) => editor.chain().focus().toggleCodeBlock().run(),
672
- isActive: (editor) => editor.isActive("codeBlock"),
673
- canExecute: (editor) => editor.can().chain().focus().toggleCodeBlock().run()
674
- },
675
- {
676
- value: "blockquote",
677
- label: "Blockquote",
678
- icon: lu.LuQuote,
679
- action: (editor) => editor.chain().focus().toggleBlockquote().run(),
680
- isActive: (editor) => editor.isActive("blockquote"),
681
- canExecute: (editor) => editor.can().chain().focus().toggleBlockquote().run()
682
- },
683
- {
684
- value: "horizontalRule",
685
- label: "Divider",
686
- icon: lu.LuMinus,
687
- action: (editor) => editor.chain().focus().setHorizontalRule().run(),
688
- isActive: () => false,
689
- canExecute: (editor) => editor.can().chain().focus().setHorizontalRule().run()
690
- }
691
- ];
692
- var InsertTool = ({ editor }) => {
693
- return /* @__PURE__ */ React25__namespace.createElement(ToolbarSection, { editor, actions: actions2, mainActionCount: 0 });
694
- };
695
- var Dialog = DialogPrimitive__namespace.Root;
696
- var DialogTrigger = DialogPrimitive__namespace.Trigger;
697
- var DialogPortal = DialogPrimitive__namespace.Portal;
698
- var DialogOverlay = React25__namespace.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ React25__namespace.createElement(
699
- DialogPrimitive__namespace.Overlay,
700
- {
701
- ref,
702
- className: chunkRTB6I3Q2_js.cn(
703
- "sb-fixed sb-inset-0 sb-z-50 sb-bg-black/80 sb- data-[state=open]:sb-animate-in data-[state=closed]:sb-animate-out data-[state=closed]:sb-fade-out-0 data-[state=open]:sb-fade-in-0",
704
- className
705
- ),
706
- ...props
707
- }
708
- ));
709
- DialogOverlay.displayName = DialogPrimitive__namespace.Overlay.displayName;
710
- var DialogContent = React25__namespace.forwardRef(({ className, children, ...props }, ref) => /* @__PURE__ */ React25__namespace.createElement(DialogPortal, null, /* @__PURE__ */ React25__namespace.createElement(DialogOverlay, null), /* @__PURE__ */ React25__namespace.createElement(
711
- DialogPrimitive__namespace.Content,
712
- {
713
- ref,
714
- className: chunkRTB6I3Q2_js.cn(
715
- "sb-fixed sb-left-[50%] sb-top-[50%] sb-z-50 sb-grid sb-w-full sb-max-w-lg sb-translate-x-[-50%] sb-translate-y-[-50%] sb-gap-4 sb-border sb-bg-background sb-p-6 sb-shadow-lg sb-duration-200 data-[state=open]:sb-animate-in data-[state=closed]:sb-animate-out data-[state=closed]:sb-fade-out-0 data-[state=open]:sb-fade-in-0 data-[state=closed]:sb-zoom-out-95 data-[state=open]:sb-zoom-in-95 data-[state=closed]:sb-slide-out-to-left-1/2 data-[state=closed]:sb-slide-out-to-top-[48%] data-[state=open]:sb-slide-in-from-left-1/2 data-[state=open]:sb-slide-in-from-top-[48%] sm:sb-rounded-lg",
716
- className
717
- ),
718
- ...props
719
- },
720
- children,
721
- /* @__PURE__ */ React25__namespace.createElement(DialogPrimitive__namespace.Close, { className: "sb-absolute sb-right-4 sb-top-4 sb-rounded-sm sb-opacity-70 sb-ring-offset-background sb-transition-opacity hover:sb-opacity-100 focus:sb-outline-none focus:sb-ring-2 focus:sb-ring-ring focus:sb-ring-offset-2 disabled:sb-pointer-events-none data-[state=open]:sb-bg-accent data-[state=open]:sb-text-muted-foreground" }, /* @__PURE__ */ React25__namespace.createElement(lucideReact.X, { className: "sb-h-4 sb-w-4" }), /* @__PURE__ */ React25__namespace.createElement("span", { className: "sb-sr-only" }, "Close"))
722
- )));
723
- DialogContent.displayName = DialogPrimitive__namespace.Content.displayName;
724
- var DialogHeader = ({
725
- className,
726
- ...props
727
- }) => /* @__PURE__ */ React25__namespace.createElement(
728
- "div",
729
- {
730
- className: chunkRTB6I3Q2_js.cn(
731
- "sb-flex sb-flex-col sb-space-y-1.5 sb-text-center sm:sb-text-left",
732
- className
733
- ),
734
- ...props
735
- }
736
- );
737
- DialogHeader.displayName = "DialogHeader";
738
- var DialogTitle = React25__namespace.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ React25__namespace.createElement(
739
- DialogPrimitive__namespace.Title,
740
- {
741
- ref,
742
- className: chunkRTB6I3Q2_js.cn(
743
- "sb-text-lg sb-font-semibold sb-leading-none sb-tracking-tight",
744
- className
745
- ),
746
- ...props
747
- }
748
- ));
749
- DialogTitle.displayName = DialogPrimitive__namespace.Title.displayName;
750
- var DialogDescription = React25__namespace.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ React25__namespace.createElement(
751
- DialogPrimitive__namespace.Description,
752
- {
753
- ref,
754
- className: chunkRTB6I3Q2_js.cn("sb-text-sm sb-text-muted-foreground", className),
755
- ...props
756
- }
757
- ));
758
- DialogDescription.displayName = DialogPrimitive__namespace.Description.displayName;
759
- var labelVariants = classVarianceAuthority.cva(
760
- "sb-text-sm sb-font-medium sb-leading-none peer-disabled:sb-cursor-not-allowed peer-disabled:sb-opacity-70"
761
- );
762
- var Label2 = React25__namespace.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ React25__namespace.createElement(
763
- LabelPrimitive__namespace.Root,
764
- {
765
- ref,
766
- className: chunkRTB6I3Q2_js.cn(labelVariants(), className),
767
- ...props
768
- }
769
- ));
770
- Label2.displayName = LabelPrimitive__namespace.Root.displayName;
771
-
772
- // src/components/ui/form.tsx
773
- var Form = reactHookForm.FormProvider;
774
- var FormFieldContext = React25__namespace.createContext(
775
- {}
776
- );
777
- var FormField = ({
778
- ...props
779
- }) => {
780
- return /* @__PURE__ */ React25__namespace.createElement(FormFieldContext.Provider, { value: { name: props.name } }, /* @__PURE__ */ React25__namespace.createElement(reactHookForm.Controller, { ...props }));
781
- };
782
- var useFormField = () => {
783
- const fieldContext = React25__namespace.useContext(FormFieldContext);
784
- const itemContext = React25__namespace.useContext(FormItemContext);
785
- const { getFieldState, formState } = reactHookForm.useFormContext();
786
- const fieldState = getFieldState(fieldContext.name, formState);
787
- if (!fieldContext) {
788
- throw new Error("useFormField should be used within <FormField>");
789
- }
790
- const { id } = itemContext;
791
- return {
792
- id,
793
- name: fieldContext.name,
794
- formItemId: `${id}-form-item`,
795
- formDescriptionId: `${id}-form-item-description`,
796
- formMessageId: `${id}-form-item-message`,
797
- ...fieldState
798
- };
799
- };
800
- var FormItemContext = React25__namespace.createContext(
801
- {}
802
- );
803
- var FormItem = React25__namespace.forwardRef(({ className, ...props }, ref) => {
804
- const id = React25__namespace.useId();
805
- return /* @__PURE__ */ React25__namespace.createElement(FormItemContext.Provider, { value: { id } }, /* @__PURE__ */ React25__namespace.createElement("div", { ref, className: chunkRTB6I3Q2_js.cn("sb-space-y-2", className), ...props }));
806
- });
807
- FormItem.displayName = "FormItem";
808
- var FormLabel = React25__namespace.forwardRef(({ className, ...props }, ref) => {
809
- const { error, formItemId } = useFormField();
810
- return /* @__PURE__ */ React25__namespace.createElement(
811
- Label2,
812
- {
813
- ref,
814
- className: chunkRTB6I3Q2_js.cn(error && "sb-text-destructive", className),
815
- htmlFor: formItemId,
816
- ...props
817
- }
818
- );
819
- });
820
- FormLabel.displayName = "FormLabel";
821
- var FormControl = React25__namespace.forwardRef(({ ...props }, ref) => {
822
- const { error, formItemId, formDescriptionId, formMessageId } = useFormField();
823
- return /* @__PURE__ */ React25__namespace.createElement(
824
- reactSlot.Slot,
825
- {
826
- ref,
827
- id: formItemId,
828
- "aria-describedby": !error ? `${formDescriptionId}` : `${formDescriptionId} ${formMessageId}`,
829
- "aria-invalid": !!error,
830
- ...props
831
- }
832
- );
833
- });
834
- FormControl.displayName = "FormControl";
835
- var FormDescription = React25__namespace.forwardRef(({ className, ...props }, ref) => {
836
- const { formDescriptionId } = useFormField();
837
- return /* @__PURE__ */ React25__namespace.createElement(
838
- "p",
839
- {
840
- ref,
841
- id: formDescriptionId,
842
- className: chunkRTB6I3Q2_js.cn("sb-text-[0.8rem] sb-text-muted-foreground", className),
843
- ...props
844
- }
845
- );
846
- });
847
- FormDescription.displayName = "FormDescription";
848
- var FormMessage = React25__namespace.forwardRef(({ className, children, ...props }, ref) => {
849
- const { error, formMessageId } = useFormField();
850
- const body = error ? String(error?.message ?? "") : children;
851
- if (!body) {
852
- return null;
853
- }
854
- return /* @__PURE__ */ React25__namespace.createElement(
855
- "p",
856
- {
857
- ref,
858
- id: formMessageId,
859
- className: chunkRTB6I3Q2_js.cn("sb-text-[0.8rem] sb-font-medium sb-text-destructive", className),
860
- ...props
861
- },
862
- body
863
- );
864
- });
865
- FormMessage.displayName = "FormMessage";
866
- var Input = React25__namespace.forwardRef(
867
- ({ className, type, ...props }, ref) => {
868
- return /* @__PURE__ */ React25__namespace.createElement(
869
- "input",
870
- {
871
- type,
872
- className: chunkRTB6I3Q2_js.cn(
873
- "sb-flex sb-h-9 sb-w-full sb-rounded-md sb-border sb-border-input sb-bg-transparent sb-px-3 sb-py-1 sb-text-base sb-shadow-sm sb-transition-colors file:sb-border-0 file:sb-bg-transparent file:sb-text-sm file:sb-font-medium file:sb-text-foreground placeholder:sb-text-muted-foreground focus-visible:sb-outline-none focus-visible:sb-ring-1 focus-visible:sb-ring-ring disabled:sb-cursor-not-allowed disabled:sb-opacity-50 md:sb-text-sm",
874
- className
875
- ),
876
- ref,
877
- ...props
878
- }
879
- );
880
- }
881
- );
882
- Input.displayName = "Input";
883
- var AdvancedInput = React25__namespace.forwardRef(
884
- ({ prepend, append, ...props }, ref) => {
885
- return /* @__PURE__ */ React25__namespace.createElement("div", { className: "sb-relative" }, /* @__PURE__ */ React25__namespace.createElement(Input, { ref, className: "sb-pl-9 sb-pr-7 sb-text-right", ...props }), prepend && /* @__PURE__ */ React25__namespace.createElement("div", { className: "sb-absolute sb-font-roboto sb-top-1/2 sb-left-3 sb--translate-y-1/2" }, prepend), append && /* @__PURE__ */ React25__namespace.createElement("div", { className: "sb-absolute sb-font-roboto sb-top-1/2 sb-right-3 sb--translate-y-1/2" }, append));
886
- }
887
- );
888
- AdvancedInput.displayName = "AdvancedInput";
889
- var Switch = React25__namespace.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ React25__namespace.createElement(
890
- SwitchPrimitives__namespace.Root,
891
- {
892
- className: chunkRTB6I3Q2_js.cn(
893
- "sb-peer sb-inline-flex sb-h-5 sb-w-9 sb-shrink-0 sb-cursor-pointer sb-items-center sb-rounded-full sb-border-2 sb-border-transparent sb-shadow-sm sb-transition-colors focus-visible:sb-outline-none focus-visible:sb-ring-2 focus-visible:sb-ring-ring focus-visible:sb-ring-offset-2 focus-visible:sb-ring-offset-background disabled:sb-cursor-not-allowed disabled:sb-opacity-50 data-[state=checked]:sb-bg-primary data-[state=unchecked]:sb-bg-input",
894
- className
895
- ),
896
- ...props,
897
- ref
898
- },
899
- /* @__PURE__ */ React25__namespace.createElement(
900
- SwitchPrimitives__namespace.Thumb,
901
- {
902
- className: chunkRTB6I3Q2_js.cn(
903
- "sb-pointer-events-none sb-block sb-h-4 sb-w-4 sb-rounded-full sb-bg-background sb-shadow-lg sb-ring-0 sb-transition-transform data-[state=checked]:sb-translate-x-4 data-[state=unchecked]:sb-translate-x-0"
904
- )
905
- }
906
- )
907
- ));
908
- Switch.displayName = SwitchPrimitives__namespace.Root.displayName;
909
- var LinkTool = ({ editor }) => {
910
- const [open, setOpen] = React25__namespace.useState(false);
911
- const { from, to } = editor.state.selection;
912
- const text = editor.state.doc.textBetween(from, to, " ");
913
- const handleSetLink = React25__namespace.useCallback(
914
- (url, text2, openInNewTab) => {
915
- editor.chain().focus().extendMarkRange("link").insertContent({
916
- type: "text",
917
- text: text2 || url,
918
- marks: [
919
- {
920
- type: "link",
921
- attrs: {
922
- href: url,
923
- target: openInNewTab ? "_blank" : ""
924
- }
925
- }
926
- ]
927
- }).setLink({ href: url }).run();
928
- editor.commands.enter();
929
- setOpen(false);
930
- },
931
- [editor]
932
- );
933
- return /* @__PURE__ */ React25__namespace.createElement(Dialog, { open, onOpenChange: setOpen }, /* @__PURE__ */ React25__namespace.createElement(DialogTrigger, { asChild: true }, /* @__PURE__ */ React25__namespace.createElement(
934
- ToolbarButton,
935
- {
936
- pressed: editor.isActive("link"),
937
- disabled: editor.isActive("codeBlock")
938
- },
939
- /* @__PURE__ */ React25__namespace.createElement(lu.LuLink2, { className: "sb-size-5" })
940
- )), /* @__PURE__ */ React25__namespace.createElement(DialogContent, { className: "sb-w-full sb-min-w-80" }, /* @__PURE__ */ React25__namespace.createElement(LinkForm, { onSave: handleSetLink, defaultText: text })));
941
- };
942
- var schema = zod.z.object({
943
- url: zod.z.string().min(0),
944
- text: zod.z.string().optional(),
945
- isNewTab: zod.z.boolean().optional()
946
- });
947
- var LinkForm = ({
948
- onSave,
949
- defaultIsNewTab,
950
- defaultUrl,
951
- defaultText
952
- }) => {
953
- const form = reactHookForm.useForm({
954
- resolver: zod$1.zodResolver(schema),
955
- defaultValues: {
956
- url: defaultUrl || "",
957
- text: defaultText || "",
958
- isNewTab: defaultIsNewTab || false
959
- }
960
- });
961
- const handleSubmit = (values) => {
962
- onSave(values.url, values.text, values.isNewTab);
963
- };
964
- return /* @__PURE__ */ React25__namespace.createElement(Form, { ...form }, /* @__PURE__ */ React25__namespace.createElement("div", { className: "sb-space-y-6" }, /* @__PURE__ */ React25__namespace.createElement(
965
- FormField,
966
- {
967
- control: form.control,
968
- name: "url",
969
- render: ({ field }) => /* @__PURE__ */ React25__namespace.createElement(FormItem, null, /* @__PURE__ */ React25__namespace.createElement(FormLabel, null, "URL"), /* @__PURE__ */ React25__namespace.createElement(FormControl, null, /* @__PURE__ */ React25__namespace.createElement(Input, { type: "url", ...field, autoFocus: true })), /* @__PURE__ */ React25__namespace.createElement(FormMessage, null))
970
- }
971
- ), /* @__PURE__ */ React25__namespace.createElement(
972
- FormField,
973
- {
974
- control: form.control,
975
- name: "text",
976
- render: ({ field }) => /* @__PURE__ */ React25__namespace.createElement(FormItem, null, /* @__PURE__ */ React25__namespace.createElement(FormLabel, null, "Text"), /* @__PURE__ */ React25__namespace.createElement(FormControl, null, /* @__PURE__ */ React25__namespace.createElement(Input, { ...field })), /* @__PURE__ */ React25__namespace.createElement(FormMessage, null))
977
- }
978
- ), /* @__PURE__ */ React25__namespace.createElement(
979
- FormField,
980
- {
981
- control: form.control,
982
- name: "isNewTab",
983
- render: ({ field }) => /* @__PURE__ */ React25__namespace.createElement(FormItem, null, /* @__PURE__ */ React25__namespace.createElement("div", { className: "sb-flex sb-items-center sb-space-x-2" }, /* @__PURE__ */ React25__namespace.createElement(FormControl, null, /* @__PURE__ */ React25__namespace.createElement(
984
- Switch,
985
- {
986
- checked: field.value,
987
- onCheckedChange: field.onChange
988
- }
989
- )), /* @__PURE__ */ React25__namespace.createElement(FormLabel, null, "Open in new tab")), /* @__PURE__ */ React25__namespace.createElement(FormMessage, null))
990
- }
991
- ), /* @__PURE__ */ React25__namespace.createElement(chunkJDB6GNKI_js.Button, { type: "button", onClick: form.handleSubmit(handleSubmit) }, "Save")));
992
- };
993
- var actions3 = [
994
- {
995
- value: "orderedList",
996
- label: "Numbered list",
997
- icon: lu.LuListOrdered,
998
- action: (editor) => editor.chain().focus().toggleOrderedList().run(),
999
- isActive: (editor) => editor.isActive("orderedList"),
1000
- canExecute: (editor) => editor.can().chain().focus().toggleOrderedList().run()
1001
- },
1002
- {
1003
- value: "bulletList",
1004
- label: "Bullet list",
1005
- icon: lu.LuList,
1006
- action: (editor) => editor.chain().focus().toggleBulletList().run(),
1007
- isActive: (editor) => editor.isActive("bulletList"),
1008
- canExecute: (editor) => editor.can().chain().focus().toggleBulletList().run()
1009
- }
1010
- ];
1011
- var ListTool = ({ editor }) => {
1012
- return /* @__PURE__ */ React25__namespace.createElement(ToolbarSection, { editor, actions: actions3, mainActionCount: 2 });
1013
- };
1014
-
1015
- // src/features/rich-text-editor/components/toolbar.tsx
1016
- var Toolbar = ({ editor }) => {
1017
- return /* @__PURE__ */ React25__namespace.createElement("div", { className: "sb-shrink-0 sb-overflow-x-auto sb-border-b sb-border-border sb-p-2" }, /* @__PURE__ */ React25__namespace.createElement("div", { className: "sb-flex sb-w-max sb-items-center sb-gap-px" }, /* @__PURE__ */ React25__namespace.createElement(ElementTool, { editor }), /* @__PURE__ */ React25__namespace.createElement(Separator2, { orientation: "vertical", className: "sb-mx-2 sb-h-7" }), /* @__PURE__ */ React25__namespace.createElement(FormatTool, { editor }), /* @__PURE__ */ React25__namespace.createElement(Separator2, { orientation: "vertical", className: "sb-mx-2 sb-h-7" }), /* @__PURE__ */ React25__namespace.createElement(ColorTool, { editor }), /* @__PURE__ */ React25__namespace.createElement(Separator2, { orientation: "vertical", className: "sb-mx-2 sb-h-7" }), /* @__PURE__ */ React25__namespace.createElement(ListTool, { editor }), /* @__PURE__ */ React25__namespace.createElement(Separator2, { orientation: "vertical", className: "sb-mx-2 sb-h-7" }), /* @__PURE__ */ React25__namespace.createElement(LinkTool, { editor }), /* @__PURE__ */ React25__namespace.createElement(InsertTool, { editor })));
1018
- };
1019
- var ToolbarSection = ({
1020
- editor,
1021
- actions: actions4,
1022
- mainActionCount = 0
1023
- }) => {
1024
- const { mainActions, dropdownActions } = React25__namespace.useMemo(() => {
1025
- return {
1026
- mainActions: actions4.slice(0, mainActionCount),
1027
- dropdownActions: actions4.slice(mainActionCount)
1028
- };
1029
- }, [actions4, mainActionCount]);
1030
- const isDropdownActive = React25__namespace.useMemo(() => {
1031
- return dropdownActions.some((action) => action.isActive(editor));
1032
- }, [dropdownActions, editor]);
1033
- return /* @__PURE__ */ React25__namespace.createElement(React25__namespace.Fragment, null, mainActions.map((action) => /* @__PURE__ */ React25__namespace.createElement(
1034
- ToolbarButton,
1035
- {
1036
- key: action.label,
1037
- onClick: () => action.action(editor),
1038
- disabled: !action.canExecute(editor),
1039
- pressed: action.isActive(editor)
1040
- },
1041
- /* @__PURE__ */ React25__namespace.createElement(action.icon, { className: "sb-size-5" })
1042
- )), dropdownActions.length > 0 && /* @__PURE__ */ React25__namespace.createElement(DropdownMenu, null, /* @__PURE__ */ React25__namespace.createElement(DropdownMenuTrigger, { asChild: true }, /* @__PURE__ */ React25__namespace.createElement(ToolbarButton, { pressed: isDropdownActive }, /* @__PURE__ */ React25__namespace.createElement(lu.LuEllipsis, { className: "sb-size-5" }))), /* @__PURE__ */ React25__namespace.createElement(DropdownMenuContent, { align: "start" }, dropdownActions.map((action) => /* @__PURE__ */ React25__namespace.createElement(
1043
- DropdownMenuItem,
1044
- {
1045
- key: action.label,
1046
- className: chunkRTB6I3Q2_js.cn("sb-flex sb-flex-row sb-items-center sb-gap-2", {
1047
- "sb-bg-accent": action.isActive(editor)
1048
- }),
1049
- onClick: () => action.action(editor),
1050
- disabled: !action.canExecute(editor)
1051
- },
1052
- /* @__PURE__ */ React25__namespace.createElement(action.icon, { className: "sb-size-4" }),
1053
- /* @__PURE__ */ React25__namespace.createElement("span", null, action.label)
1054
- )))));
1055
- };
1056
- var ToolbarButton = React25__namespace.forwardRef(({ className, ...props }, ref) => {
1057
- return /* @__PURE__ */ React25__namespace.createElement(
1058
- Toggle,
1059
- {
1060
- size: "sm",
1061
- className: chunkRTB6I3Q2_js.cn(
1062
- "sb-size-8 sb-p-0 data-[state=on]:sb-bg-accent",
1063
- { "sb-bg-accent": props.pressed },
1064
- className
1065
- ),
1066
- ref,
1067
- ...props
1068
- }
1069
- );
1070
- });
1071
- ToolbarButton.displayName = "ToolbarButton";
1072
-
1073
- // src/features/rich-text-editor/components/rich-text-editor.tsx
1074
- var RichTextEditor = ({
1075
- value,
1076
- onChange,
1077
- className,
1078
- editorClassName,
1079
- editorContentClassName,
1080
- ...props
1081
- }) => {
1082
- console.count("re-render RichTextEditor");
1083
- const editor = useRichTextEditor({
1084
- value,
1085
- onUpdate: onChange,
1086
- editorClassName: chunkRTB6I3Q2_js.cn("sb-flex-1 sb-px-3 sb-py-1", editorClassName),
1087
- ...props
1088
- });
1089
- if (!editor) {
1090
- return null;
1091
- }
1092
- return /* @__PURE__ */ React25__namespace.createElement(
1093
- "div",
1094
- {
1095
- className: chunkRTB6I3Q2_js.cn(
1096
- "sb-flex sb-h-auto sb-min-h-72 sb-w-full sb-flex-col sb-rounded-md sb-border sb-border-input sb-shadow-sm focus-within:sb-border-primary",
1097
- className
1098
- )
1099
- },
1100
- /* @__PURE__ */ React25__namespace.createElement(Toolbar, { editor }),
1101
- /* @__PURE__ */ React25__namespace.createElement(
1102
- react.EditorContent,
1103
- {
1104
- editor,
1105
- className: chunkRTB6I3Q2_js.cn(
1106
- "sb-editflow prose sb-flex sb-flex-1",
1107
- editorContentClassName
1108
- )
1109
- }
1110
- )
1111
- );
1112
- };
1113
- function Calendar({
1114
- className,
1115
- classNames,
1116
- showOutsideDays = true,
1117
- ...props
1118
- }) {
1119
- return /* @__PURE__ */ React25__namespace.createElement(
1120
- reactDayPicker.DayPicker,
1121
- {
1122
- showOutsideDays,
1123
- className: chunkRTB6I3Q2_js.cn("sb-p-3 sb-font-roboto", className),
1124
- classNames: {
1125
- months: "sb-flex sb-flex-col sm:sb-flex-row sb-space-y-4 sm:sb-space-x-4 sm:sb-space-y-0",
1126
- month: "sb-space-y-4",
1127
- caption: "sb-flex sb-justify-center sb-pt-1 sb-relative sb-items-center",
1128
- caption_label: "sb-text-sm sb-font-medium",
1129
- nav: "sb-space-x-1 sb-flex sb-items-center",
1130
- nav_button: chunkRTB6I3Q2_js.cn(
1131
- chunkJDB6GNKI_js.buttonVariants({ variant: "outline" }),
1132
- "sb-h-7 sb-w-7 sb-bg-transparent sb-p-0 sb-opacity-50 hover:sb-opacity-100"
1133
- ),
1134
- nav_button_previous: "sb-absolute sb-left-1",
1135
- nav_button_next: "sb-absolute sb-right-1",
1136
- table: "sb-w-full sb-border-collapse sb-space-y-1",
1137
- head_row: "sb-flex",
1138
- head_cell: "sb-text-muted-foreground sb-rounded-md sb-w-8 sb-font-normal sb-text-[0.8rem]",
1139
- row: "sb-flex sb-w-full sb-mt-2",
1140
- cell: chunkRTB6I3Q2_js.cn(
1141
- "sb-relative sb-p-0 sb-text-center sb-text-sm focus-within:sb-relative focus-within:sb-z-20 [&:has([aria-selected])]:sb-bg-accent [&:has([aria-selected].day-outside)]:sb-bg-accent/50 [&:has([aria-selected].day-range-end)]:sb-rounded-r-md",
1142
- props.mode === "range" ? "[&:has(>.day-range-end)]:sb-rounded-r-md [&:has(>.day-range-start)]:sb-rounded-l-md first:[&:has([aria-selected])]:sb-rounded-l-md last:[&:has([aria-selected])]:sb-rounded-r-md" : "[&:has([aria-selected])]:sb-rounded-md"
1143
- ),
1144
- day: chunkRTB6I3Q2_js.cn(
1145
- chunkJDB6GNKI_js.buttonVariants({ variant: "ghost" }),
1146
- "sb-h-8 sb-w-8 sb-p-0 sb-font-normal aria-selected:sb-opacity-100"
1147
- ),
1148
- day_range_start: "day-range-start",
1149
- day_range_end: "day-range-end",
1150
- day_selected: "sb-bg-primary sb-text-primary-foreground hover:sb-bg-primary hover:sb-text-primary-foreground focus:sb-bg-primary focus:sb-text-primary-foreground",
1151
- day_today: "sb-bg-accent sb-text-accent-foreground",
1152
- day_outside: "day-outside sb-text-muted-foreground sb-opacity-50 aria-selected:sb-bg-accent/50 aria-selected:sb-text-muted-foreground aria-selected:sb-opacity-30",
1153
- day_disabled: "sb-text-muted-foreground sb-opacity-50",
1154
- day_range_middle: "aria-selected:sb-bg-accent aria-selected:sb-text-accent-foreground",
1155
- day_hidden: "invisible",
1156
- ...classNames
1157
- },
1158
- components: {
1159
- IconLeft: () => /* @__PURE__ */ React25__namespace.createElement(lucideReact.ChevronLeftIcon, { className: "sb-h-4 sb-w-4" }),
1160
- IconRight: () => /* @__PURE__ */ React25__namespace.createElement(lucideReact.ChevronRightIcon, { className: "sb-h-4 sb-w-4" })
1161
- },
1162
- ...props
1163
- }
1164
- );
1165
- }
1166
- Calendar.displayName = "Calendar";
1167
- var ColorPicker = (props) => {
1168
- const { color, onColorChange, className } = props;
1169
- const colors = props.colors ?? [
1170
- "#000000",
1171
- "#ffffff",
1172
- "#0f172a",
1173
- "#F1F5F9",
1174
- "#64748B",
1175
- "#E6007E",
1176
- "#F8FAFC",
1177
- "#009DD1",
1178
- "#FF0000"
1179
- ];
1180
- return /* @__PURE__ */ React25__namespace.createElement(Popover, null, /* @__PURE__ */ React25__namespace.createElement(PopoverTrigger, { asChild: true }, /* @__PURE__ */ React25__namespace.createElement(
1181
- chunkJDB6GNKI_js.Button,
1182
- {
1183
- variant: "outline",
1184
- size: "sm",
1185
- className: chunkRTB6I3Q2_js.cn(
1186
- "sb-justify-start sb-text-left sb-font-normal sb-normal-case sb-w-full",
1187
- !color && "sb-text-muted-foreground",
1188
- className
1189
- )
1190
- },
1191
- /* @__PURE__ */ React25__namespace.createElement("div", { className: "sb-w-full sb-flex sb-items-center sb-gap-2" }, color ? /* @__PURE__ */ React25__namespace.createElement(
1192
- "div",
1193
- {
1194
- className: "sb-h-4 sb-w-4 sb-rounded !sb-bg-center !sb-bg-cover sb-transition-all sb-border",
1195
- style: { background: color }
1196
- }
1197
- ) : /* @__PURE__ */ React25__namespace.createElement(lucideReact.PaintbrushIcon, { className: "sb-h-4 sb-w-4" }), /* @__PURE__ */ React25__namespace.createElement("div", { className: "sb-truncate sb-flex-1" }, color ? color : "Kies een kleur"))
1198
- )), /* @__PURE__ */ React25__namespace.createElement(PopoverContent, { className: "sb-w-64 sb-p-4 sb-flex sb-flex-wrap sb-gap-1" }, colors.map((s) => /* @__PURE__ */ React25__namespace.createElement(
1199
- "div",
1200
- {
1201
- key: s,
1202
- style: { background: s },
1203
- className: "sb-rounded-md sb-h-6 sb-w-6 sb-cursor-pointer active:sb-scale-105 sb-border",
1204
- onClick: () => onColorChange(s)
1205
- }
1206
- ))));
1207
- };
1208
- var MediaInput = (props) => {
1209
- const { onFilesChange, limit = 32, multiple = false, onError } = props;
1210
- const id = React25__namespace.useId();
1211
- const [queue, setQueue] = React25__namespace.useState([]);
1212
- const [sources, setSources] = React25__namespace.useState(props.files ?? []);
1213
- const maxConcurrentUploads = 3;
1214
- const uploadingCountRef = React25__namespace.useRef(0);
1215
- const handleFilesAdd = async (e) => {
1216
- const files = e.target.files;
1217
- if (!files || files.length === 0) {
1218
- return;
1219
- }
1220
- if (files.length + sources.length > (multiple ? limit : 1)) {
1221
- onError?.(
1222
- new MediaInputError(
1223
- `Maximaal ${limit} bestanden.`,
1224
- `Je probeerde nu ${files.length + sources.length} bestanden toe te voegen, maar je mag er maximaal ${limit} toevoegen.`
1225
- )
1226
- );
1227
- return;
1228
- }
1229
- const queue2 = Array.from(files);
1230
- setQueue(queue2);
1231
- for (const file of queue2) {
1232
- try {
1233
- while (uploadingCountRef.current >= maxConcurrentUploads && uploadingCountRef.current > 0) {
1234
- await new Promise((resolve) => setTimeout(resolve, 300));
1235
- }
1236
- uploadingCountRef.current++;
1237
- const formData = new FormData();
1238
- formData.append("file", file);
1239
- const res = await fetch("/api/simple-builder/file/upload", {
1240
- method: "POST",
1241
- body: formData
1242
- });
1243
- if (res === void 0 || !res.ok) {
1244
- onError?.(
1245
- new MediaInputError(
1246
- "Bestand uploaden misulukt",
1247
- `Bestand ${file.name} kon niet worden ge\xFCpload.`
1248
- )
1249
- );
1250
- continue;
1251
- }
1252
- const { data: url } = await res.json();
1253
- if (!url) {
1254
- onError?.(
1255
- new MediaInputError(
1256
- "Bestand uploaden misulukt",
1257
- `De URL van bestand ${file.name} kon niet worden opgehaald.`
1258
- )
1259
- );
1260
- continue;
1261
- }
1262
- setSources((prev) => [...prev, url]);
1263
- onFilesChange?.([...sources, url]);
1264
- } catch (e2) {
1265
- onError?.(
1266
- new MediaInputError(
1267
- "Bestand uploaden misulukt",
1268
- `Bestand ${file.name} kon niet worden ge\xFCpload.`
1269
- )
1270
- );
1271
- } finally {
1272
- setQueue((prev) => prev.filter((f) => f !== file));
1273
- uploadingCountRef.current--;
1274
- }
1275
- }
1276
- };
1277
- const handleSourceDelete = async (src) => {
1278
- setSources((prev) => prev.filter((s) => s !== src));
1279
- onFilesChange?.(sources.filter((s) => s !== src));
1280
- await fetch("/api/uploadthing/delete", {
1281
- method: "POST",
1282
- body: JSON.stringify({ src })
1283
- });
1284
- };
1285
- return /* @__PURE__ */ React25__namespace.createElement("div", { className: chunkRTB6I3Q2_js.cn("flex flex-wrap gap-4", props.className) }, sources.map((src) => /* @__PURE__ */ React25__namespace.createElement(MediaInputItem, { key: src, className: chunkRTB6I3Q2_js.cn("group", props.itemClassName) }, /* @__PURE__ */ React25__namespace.createElement(
1286
- chunkRTB6I3Q2_js.Image,
1287
- {
1288
- src,
1289
- alt: "",
1290
- fill: true,
1291
- className: "sb-absolute sb-inset-0 sb-object-cover sb-pointer-events-none"
1292
- }
1293
- ), /* @__PURE__ */ React25__namespace.createElement("div", { className: "sb-absolute sb-right-1 sb-top-1 sb-z-30 sb-flex sb-items-center sb-justify-end sb-gap-3 sb-opacity-0 sb-transition-opacity group-hover:sb-opacity-100" }, /* @__PURE__ */ React25__namespace.createElement(
1294
- "button",
1295
- {
1296
- className: "sb-flex sb-h-8 sb-w-8 sb-items-center sb-justify-center sb-rounded-full sb-border sb-bg-secondary sb-text-secondary-foreground sb-opacity-90 sb-shadow sb-transition-opacity hover:sb-opacity-100",
1297
- onClick: () => handleSourceDelete(src)
1298
- },
1299
- /* @__PURE__ */ React25__namespace.createElement(lucideReact.Trash2Icon, { className: "sb-h-4 sb-w-4" })
1300
- )))), queue.map((_, i) => /* @__PURE__ */ React25__namespace.createElement(
1301
- MediaInputItem,
1302
- {
1303
- key: i,
1304
- className: chunkRTB6I3Q2_js.cn(
1305
- "sb-flex sb-h-28 sb-w-28 sb-items-center sb-justify-center",
1306
- props.itemClassName
1307
- )
1308
- },
1309
- /* @__PURE__ */ React25__namespace.createElement(lucideReact.Loader2Icon, { className: "sb-h-6 sb-w-6 sb-animate-spin" })
1310
- )), multiple || !multiple && !sources.length && !queue.length ? /* @__PURE__ */ React25__namespace.createElement(
1311
- "label",
1312
- {
1313
- htmlFor: id,
1314
- className: chunkRTB6I3Q2_js.cn(
1315
- "sb-flex sb-h-28 sb-w-28 sb-cursor-pointer sb-items-center sb-justify-center sb-rounded-lg sb-border",
1316
- props.itemClassName
1317
- )
1318
- },
1319
- /* @__PURE__ */ React25__namespace.createElement(lucideReact.PlusIcon, { className: "sb-h-6 sb-w-6" }),
1320
- /* @__PURE__ */ React25__namespace.createElement(
1321
- "input",
1322
- {
1323
- id,
1324
- type: "file",
1325
- onChange: handleFilesAdd,
1326
- multiple,
1327
- accept: ".png,.jpg,.jpeg,.webp,.gif,.svg",
1328
- className: "sb-hidden"
1329
- }
1330
- )
1331
- ) : null);
1332
- };
1333
- var MediaInputItem = (props) => {
1334
- return /* @__PURE__ */ React25__namespace.createElement(
1335
- "div",
1336
- {
1337
- className: chunkRTB6I3Q2_js.cn(
1338
- "sb-relative sb-h-28 sb-w-28 sb-overflow-hidden sb-rounded-lg sb-border",
1339
- props.className
1340
- )
1341
- },
1342
- props.children
1343
- );
1344
- };
1345
- var MediaInputError = class extends Error {
1346
- title;
1347
- description;
1348
- constructor(message, description) {
1349
- super(message);
1350
- this.title = message;
1351
- this.description = description;
1352
- }
1353
- };
1354
- var Select = SelectPrimitive__namespace.Root;
1355
- var SelectValue = SelectPrimitive__namespace.Value;
1356
- var SelectTrigger = React25__namespace.forwardRef(({ className, children, ...props }, ref) => /* @__PURE__ */ React25__namespace.createElement(
1357
- SelectPrimitive__namespace.Trigger,
1358
- {
1359
- ref,
1360
- className: chunkRTB6I3Q2_js.cn(
1361
- "sb-flex sb-h-10 sb-w-full sb-items-center sb-justify-between sb-rounded-md sb-border sb-border-input sb-bg-background sb-px-3 sb-py-2 sb-text-sm sb-ring-offset-background placeholder:sb-text-muted-foreground focus:sb-outline-none focus:sb-ring-2 focus:sb-ring-ring focus:sb-ring-offset-2 disabled:sb-cursor-not-allowed disabled:sb-opacity-50 [&>span]:sb-line-clamp-1",
1362
- className
1363
- ),
1364
- ...props
1365
- },
1366
- children,
1367
- /* @__PURE__ */ React25__namespace.createElement(SelectPrimitive__namespace.Icon, { asChild: true }, /* @__PURE__ */ React25__namespace.createElement(lucideReact.ChevronDown, { className: "sb-h-4 sb-w-4 sb-opacity-50" }))
1368
- ));
1369
- SelectTrigger.displayName = SelectPrimitive__namespace.Trigger.displayName;
1370
- var SelectScrollUpButton = React25__namespace.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ React25__namespace.createElement(
1371
- SelectPrimitive__namespace.ScrollUpButton,
1372
- {
1373
- ref,
1374
- className: chunkRTB6I3Q2_js.cn(
1375
- "sb-flex sb-cursor-default sb-items-center sb-justify-center sb-py-1",
1376
- className
1377
- ),
1378
- ...props
1379
- },
1380
- /* @__PURE__ */ React25__namespace.createElement(lucideReact.ChevronUp, { className: "sb-h-4 sb-w-4" })
1381
- ));
1382
- SelectScrollUpButton.displayName = SelectPrimitive__namespace.ScrollUpButton.displayName;
1383
- var SelectScrollDownButton = React25__namespace.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ React25__namespace.createElement(
1384
- SelectPrimitive__namespace.ScrollDownButton,
1385
- {
1386
- ref,
1387
- className: chunkRTB6I3Q2_js.cn(
1388
- "sb-flex sb-cursor-default sb-items-center sb-justify-center sb-py-1",
1389
- className
1390
- ),
1391
- ...props
1392
- },
1393
- /* @__PURE__ */ React25__namespace.createElement(lucideReact.ChevronDown, { className: "sb-h-4 sb-w-4" })
1394
- ));
1395
- SelectScrollDownButton.displayName = SelectPrimitive__namespace.ScrollDownButton.displayName;
1396
- var SelectContent = React25__namespace.forwardRef(({ className, children, position = "popper", ...props }, ref) => /* @__PURE__ */ React25__namespace.createElement(SelectPrimitive__namespace.Portal, null, /* @__PURE__ */ React25__namespace.createElement(
1397
- SelectPrimitive__namespace.Content,
1398
- {
1399
- ref,
1400
- className: chunkRTB6I3Q2_js.cn(
1401
- "sb-relative sb-z-50 sb-max-h-96 sb-min-w-[8rem] sb-overflow-hidden sb-rounded-md sb-border sb-bg-popover sb-text-popover-foreground sb-shadow-md data-[state=open]:sb-animate-in data-[state=closed]:sb-animate-out data-[state=closed]:sb-fade-out-0 data-[state=open]:sb-fade-in-0 data-[state=closed]:sb-zoom-out-95 data-[state=open]:sb-zoom-in-95 data-[side=bottom]:sb-slide-in-from-top-2 data-[side=left]:sb-slide-in-from-right-2 data-[side=right]:sb-slide-in-from-left-2 data-[side=top]:sb-slide-in-from-bottom-2",
1402
- position === "popper" && "data-[side=bottom]:sb-translate-y-1 data-[side=left]:sb--translate-x-1 data-[side=right]:sb-translate-x-1 data-[side=top]:sb--translate-y-1",
1403
- className
1404
- ),
1405
- position,
1406
- ...props
1407
- },
1408
- /* @__PURE__ */ React25__namespace.createElement(SelectScrollUpButton, null),
1409
- /* @__PURE__ */ React25__namespace.createElement(
1410
- SelectPrimitive__namespace.Viewport,
1411
- {
1412
- className: chunkRTB6I3Q2_js.cn(
1413
- "sb-p-1",
1414
- position === "popper" && "sb-h-[var(--radix-select-trigger-height)] sb-w-full sb-min-w-[var(--radix-select-trigger-width)]"
1415
- )
1416
- },
1417
- children
1418
- ),
1419
- /* @__PURE__ */ React25__namespace.createElement(SelectScrollDownButton, null)
1420
- )));
1421
- SelectContent.displayName = SelectPrimitive__namespace.Content.displayName;
1422
- var SelectLabel = React25__namespace.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ React25__namespace.createElement(
1423
- SelectPrimitive__namespace.Label,
1424
- {
1425
- ref,
1426
- className: chunkRTB6I3Q2_js.cn(
1427
- "sb-py-1.5 sb-pl-8 sb-pr-2 sb-text-sm sb-font-semibold",
1428
- className
1429
- ),
1430
- ...props
1431
- }
1432
- ));
1433
- SelectLabel.displayName = SelectPrimitive__namespace.Label.displayName;
1434
- var SelectItem = React25__namespace.forwardRef(({ className, children, ...props }, ref) => /* @__PURE__ */ React25__namespace.createElement(
1435
- SelectPrimitive__namespace.Item,
1436
- {
1437
- ref,
1438
- className: chunkRTB6I3Q2_js.cn(
1439
- "sb-relative sb-flex sb-w-full sb-cursor-default sb-select-none sb-items-center sb-rounded-sm sb-py-1.5 sb-pl-8 sb-pr-2 sb-text-sm sb-outline-none focus:sb-bg-accent focus:sb-text-accent-foreground data-[disabled]:sb-pointer-events-none data-[disabled]:sb-opacity-50",
1440
- className
1441
- ),
1442
- ...props
1443
- },
1444
- /* @__PURE__ */ React25__namespace.createElement("span", { className: "sb-absolute sb-left-2 sb-flex sb-h-3.5 sb-w-3.5 sb-items-center sb-justify-center" }, /* @__PURE__ */ React25__namespace.createElement(SelectPrimitive__namespace.ItemIndicator, null, /* @__PURE__ */ React25__namespace.createElement(lucideReact.Check, { className: "sb-h-4 sb-w-4" }))),
1445
- /* @__PURE__ */ React25__namespace.createElement(SelectPrimitive__namespace.ItemText, null, children)
1446
- ));
1447
- SelectItem.displayName = SelectPrimitive__namespace.Item.displayName;
1448
- var SelectSeparator = React25__namespace.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ React25__namespace.createElement(
1449
- SelectPrimitive__namespace.Separator,
1450
- {
1451
- ref,
1452
- className: chunkRTB6I3Q2_js.cn("sb--mx-1 sb-my-1 sb-h-px sb-bg-muted", className),
1453
- ...props
1454
- }
1455
- ));
1456
- SelectSeparator.displayName = SelectPrimitive__namespace.Separator.displayName;
1457
- var Textarea = React25__namespace.forwardRef(
1458
- ({ className, ...props }, ref) => {
1459
- return /* @__PURE__ */ React25__namespace.createElement(
1460
- "textarea",
1461
- {
1462
- className: chunkRTB6I3Q2_js.cn(
1463
- "sb-flex sb-min-h-[60px] sb-font-roboto sb-w-full sb-rounded-md sb-border sb-border-input sb-bg-transparent sb-px-3 sb-py-2 sb-text-sm sb-shadow-sm placeholder:sb-text-muted-foreground focus-visible:sb-outline-none focus-visible:sb-ring-1 focus-visible:sb-ring-ring disabled:sb-cursor-not-allowed disabled:sb-opacity-50",
1464
- className
1465
- ),
1466
- ref,
1467
- ...props
1468
- }
1469
- );
1470
- }
1471
- );
1472
- Textarea.displayName = "Textarea";
1473
-
1474
- // src/components/container-item-form.tsx
1475
- var ContainerItemForm = (props) => {
1476
- const { item } = props;
1477
- const { patchItem } = chunkJDB6GNKI_js.useBuilder();
1478
- const component = chunkRTB6I3Q2_js.builder.getComponent(item.component);
1479
- if (!component) {
1480
- throw new Error(
1481
- `[simple-builder]: Component with id ${item.component} not found in container item form component`
1482
- );
1483
- }
1484
- const form = reactHookForm.useForm({
1485
- defaultValues: (component.inputs || []).reduce(
1486
- (acc, input) => ({
1487
- ...acc,
1488
- [input.name]: item?.props?.[input.name] ?? input.defaultValue
1489
- }),
1490
- {}
1491
- )
1492
- });
1493
- const onSubmit = React25__namespace.useCallback(
1494
- (values) => {
1495
- patchItem(item.id, {
1496
- props: values
1497
- });
1498
- },
1499
- [patchItem, item.id]
1500
- );
1501
- React25__namespace.useEffect(() => {
1502
- const subscription = form.watch((value) => {
1503
- if (form.formState.isDirty && Object.keys(form.formState.errors).length === 0) {
1504
- onSubmit(value);
1505
- }
1506
- });
1507
- return () => subscription.unsubscribe();
1508
- }, [form, onSubmit]);
1509
- return /* @__PURE__ */ React25__namespace.createElement(Form, { ...form }, /* @__PURE__ */ React25__namespace.createElement("form", { onSubmit: form.handleSubmit(onSubmit) }, /* @__PURE__ */ React25__namespace.createElement("div", { className: "sb-space-y-4 sb-p-4" }, (component.inputs || []).map((input) => /* @__PURE__ */ React25__namespace.createElement(
1510
- RenderFormField,
1511
- {
1512
- key: input.name,
1513
- type: input.type,
1514
- input,
1515
- form
1516
- }
1517
- )))));
1518
- };
1519
- var RenderFormField = (props) => {
1520
- const { type, input, form } = props;
1521
- const fieldArray = reactHookForm.useFieldArray({
1522
- control: form.control,
1523
- name: input.name
1524
- });
1525
- if (input.multiple) {
1526
- return /* @__PURE__ */ React25__namespace.createElement("fieldset", { className: "sb-space-y-2" }, /* @__PURE__ */ React25__namespace.createElement(FormLabel, null, input.friendlyName || input.name), /* @__PURE__ */ React25__namespace.createElement("div", { className: "sb-space-y-4" }, fieldArray.fields.map(
1527
- (field, i) => type !== "grouped" ? /* @__PURE__ */ React25__namespace.createElement(
1528
- FormField,
1529
- {
1530
- key: field.id,
1531
- control: form.control,
1532
- name: `${input.name}.${i}`,
1533
- render: ({ field: field2 }) => /* @__PURE__ */ React25__namespace.createElement("div", { className: "sb-flex sb-items-center sb-gap-3" }, /* @__PURE__ */ React25__namespace.createElement(RenderInput, { field: field2, type: input.type }), /* @__PURE__ */ React25__namespace.createElement("button", { type: "button", onClick: () => fieldArray.remove(i) }, /* @__PURE__ */ React25__namespace.createElement(lucideReact.XIcon, { className: "sb-h-4 sb-w-4" })))
1534
- }
1535
- ) : /* @__PURE__ */ React25__namespace.createElement("div", { className: "sb-flex sb-items-center sb-relative" }, /* @__PURE__ */ React25__namespace.createElement(
1536
- RenderFormField,
1537
- {
1538
- key: field.id,
1539
- form,
1540
- type,
1541
- input: {
1542
- ...input,
1543
- name: `${input.name}.${i}`,
1544
- multiple: false,
1545
- friendlyName: ""
1546
- }
1547
- }
1548
- ), /* @__PURE__ */ React25__namespace.createElement(
1549
- "button",
1550
- {
1551
- type: "button",
1552
- onClick: () => fieldArray.remove(i),
1553
- className: "sb-absolute sb-top-2 sb-right-2 sb-text-foreground/70 hover:sb-text-foreground"
1554
- },
1555
- /* @__PURE__ */ React25__namespace.createElement(lucideReact.XIcon, { className: "sb-h-4 sb-w-4" })
1556
- ))
1557
- ), /* @__PURE__ */ React25__namespace.createElement(
1558
- chunkJDB6GNKI_js.Button,
1559
- {
1560
- type: "button",
1561
- variant: "outline",
1562
- size: "sm",
1563
- className: chunkRTB6I3Q2_js.cn(
1564
- "sb-w-[89%] sb-border-2 sb-border-dashed sb-text-muted-foreground",
1565
- type === "grouped" && "sb-w-full"
1566
- ),
1567
- onClick: () => fieldArray.append(void 0)
1568
- },
1569
- /* @__PURE__ */ React25__namespace.createElement(lucideReact.PlusCircleIcon, { className: "sb-h-4 sb-w-4" })
1570
- )));
1571
- }
1572
- switch (type) {
1573
- case "string":
1574
- case "number":
1575
- case "longText":
1576
- case "color":
1577
- case "date":
1578
- case "file":
1579
- return /* @__PURE__ */ React25__namespace.createElement(
1580
- FormField,
1581
- {
1582
- key: input.name,
1583
- control: form.control,
1584
- name: input.name,
1585
- render: ({ field }) => /* @__PURE__ */ React25__namespace.createElement(FormItem, null, /* @__PURE__ */ React25__namespace.createElement(FormLabel, null, input.friendlyName || input.name), /* @__PURE__ */ React25__namespace.createElement(FormControl, null, /* @__PURE__ */ React25__namespace.createElement(RenderInput, { type, field, options: input?.enum })), input.helperText && /* @__PURE__ */ React25__namespace.createElement(FormDescription, null, input.helperText), /* @__PURE__ */ React25__namespace.createElement(FormMessage, null))
1586
- }
1587
- );
1588
- case "richText":
1589
- return /* @__PURE__ */ React25__namespace.createElement(Dialog, null, /* @__PURE__ */ React25__namespace.createElement("div", { className: "sb-space-y-2" }, /* @__PURE__ */ React25__namespace.createElement(FormLabel, null, input.friendlyName || input.name), /* @__PURE__ */ React25__namespace.createElement(DialogTrigger, { asChild: true }, /* @__PURE__ */ React25__namespace.createElement(chunkJDB6GNKI_js.Button, { variant: "outline", className: "sb-w-full", type: "button" }, input.friendlyName || input.name, " bewerken"))), /* @__PURE__ */ React25__namespace.createElement(DialogContent, { className: "sb-max-w-3xl sb-p-0" }, /* @__PURE__ */ React25__namespace.createElement("div", { className: "sb-flex sb-h-full sb-max-h-svh sb-w-full sb-flex-col sm:sb-max-h-[90svh]" }, /* @__PURE__ */ React25__namespace.createElement(DialogHeader, { className: "sb-flex-none sb-border-b sb-p-6" }, /* @__PURE__ */ React25__namespace.createElement(DialogTitle, null, input.friendlyName || input.name, " editor")), /* @__PURE__ */ React25__namespace.createElement("div", { className: "sb-flex-1 sb-overflow-y-auto" }, /* @__PURE__ */ React25__namespace.createElement(
1590
- FormField,
1591
- {
1592
- key: input.name,
1593
- control: form.control,
1594
- name: input.name,
1595
- render: ({ field }) => /* @__PURE__ */ React25__namespace.createElement(FormItem, null, /* @__PURE__ */ React25__namespace.createElement(FormControl, null, /* @__PURE__ */ React25__namespace.createElement(RenderInput, { type, field })), input.helperText && /* @__PURE__ */ React25__namespace.createElement(FormDescription, null, input.helperText), /* @__PURE__ */ React25__namespace.createElement(FormMessage, null))
1596
- }
1597
- )))));
1598
- case "boolean":
1599
- return /* @__PURE__ */ React25__namespace.createElement(
1600
- FormField,
1601
- {
1602
- key: input.name,
1603
- control: form.control,
1604
- name: input.name,
1605
- render: ({ field }) => /* @__PURE__ */ React25__namespace.createElement(FormItem, { className: "sb-flex sb-flex-row sb-items-center sb-justify-between sb-space-y-0" }, /* @__PURE__ */ React25__namespace.createElement(FormLabel, null, input.friendlyName || input.name), /* @__PURE__ */ React25__namespace.createElement(FormControl, null, /* @__PURE__ */ React25__namespace.createElement(RenderInput, { type, field })), input.helperText && /* @__PURE__ */ React25__namespace.createElement(FormDescription, null, input.helperText), /* @__PURE__ */ React25__namespace.createElement(FormMessage, null))
1606
- }
1607
- );
1608
- case "grouped":
1609
- return /* @__PURE__ */ React25__namespace.createElement("div", { className: "sb-space-y-2 sb-w-full" }, input.friendlyName !== "" && /* @__PURE__ */ React25__namespace.createElement(FormLabel, null, input.friendlyName || input.name), /* @__PURE__ */ React25__namespace.createElement("div", { className: "sb-space-y-2 sb-p-3 sb-w-full sb-border sb-rounded-lg" }, input.inputs.map((sub) => /* @__PURE__ */ React25__namespace.createElement(
1610
- RenderFormField,
1611
- {
1612
- key: `${input.name}.${sub.name}`,
1613
- type: sub.type,
1614
- input: {
1615
- ...sub,
1616
- name: `${input.name}.${sub.name}`
1617
- },
1618
- form
1619
- }
1620
- ))));
1621
- default:
1622
- throw new Error(
1623
- `[simple-builder]: Input type "${props.type}" not supported in render form field.`
1624
- );
1625
- }
1626
- };
1627
- var RenderInput = (props) => {
1628
- const { type, options, field } = props;
1629
- switch (type) {
1630
- case "string":
1631
- if (!options)
1632
- return /* @__PURE__ */ React25__namespace.createElement(Input, { ...field });
1633
- return /* @__PURE__ */ React25__namespace.createElement(Select, { onValueChange: field.onChange, defaultValue: field.value }, /* @__PURE__ */ React25__namespace.createElement(SelectTrigger, null, /* @__PURE__ */ React25__namespace.createElement(SelectValue, null)), /* @__PURE__ */ React25__namespace.createElement(SelectContent, null, options.map((option) => /* @__PURE__ */ React25__namespace.createElement(SelectItem, { key: option, value: option }, option))));
1634
- case "longText":
1635
- return /* @__PURE__ */ React25__namespace.createElement(Textarea, { ...field });
1636
- case "richText":
1637
- return /* @__PURE__ */ React25__namespace.createElement(RichTextEditor, { ...field });
1638
- case "number":
1639
- return /* @__PURE__ */ React25__namespace.createElement(Input, { type: "number", ...field });
1640
- case "color":
1641
- return /* @__PURE__ */ React25__namespace.createElement(ColorPicker, { color: field.value, onColorChange: field.onChange });
1642
- case "date":
1643
- return /* @__PURE__ */ React25__namespace.createElement(Popover, null, /* @__PURE__ */ React25__namespace.createElement(PopoverTrigger, { asChild: true }, /* @__PURE__ */ React25__namespace.createElement(
1644
- chunkJDB6GNKI_js.Button,
1645
- {
1646
- variant: "outline",
1647
- size: "sm",
1648
- className: chunkRTB6I3Q2_js.cn(
1649
- "sb-w-full sb-flex sb-justify-start sb-text-left sb-font-normal",
1650
- !field.value && "sb-text-muted-foreground"
1651
- )
1652
- },
1653
- /* @__PURE__ */ React25__namespace.createElement(lucideReact.CalendarIcon, { className: "sb-mr-2 sb-h-4 sb-w-4" }),
1654
- field.value && !Array.isArray(field.value) ? dateFns.format(field.value, "PPP") : /* @__PURE__ */ React25__namespace.createElement("span", null, "Pick a date")
1655
- )), /* @__PURE__ */ React25__namespace.createElement(PopoverContent, { className: "sb-w-auto sb-p-0", align: "start" }, /* @__PURE__ */ React25__namespace.createElement(
1656
- Calendar,
1657
- {
1658
- mode: "single",
1659
- selected: field.value,
1660
- onSelect: field.onChange,
1661
- initialFocus: true
1662
- }
1663
- )));
1664
- case "boolean":
1665
- return /* @__PURE__ */ React25__namespace.createElement(Switch, { checked: field.value, onCheckedChange: field.onChange });
1666
- case "file":
1667
- return /* @__PURE__ */ React25__namespace.createElement(
1668
- MediaInput,
1669
- {
1670
- className: "sb-grid sb-grid-cols-2 sb-gap-1",
1671
- itemClassName: "sb-aspect-video sb-h-auto sb-w-full",
1672
- multiple: false,
1673
- files: field.value ? [field.value] : [],
1674
- onFilesChange: (files) => field.onChange(files[0]),
1675
- onError: (e) => console.error(
1676
- "[media-input]: Title: " + e?.title,
1677
- "media-input: Error: " + e?.description
1678
- )
1679
- }
1680
- );
1681
- default:
1682
- throw new Error(
1683
- `[simple-builder]: Input type "${props.type}" not supported in render input.`
1684
- );
1685
- }
1686
- };
1687
- var Tabs = TabsPrimitive__namespace.Root;
1688
- var tabsListVariants = chunkRTB6I3Q2_js.tv({
1689
- variants: {
1690
- variant: {
1691
- contained: "sb-inline-flex sb-h-10 sb-items-center sb-justify-center sb-rounded-md sb-bg-muted sb-p-1 sb-text-muted-foreground",
1692
- text: "sb-flex sb-items-center sb-border-b sb-px-4 sb-space-x-6"
1693
- }
1694
- },
1695
- defaultVariants: {
1696
- variant: "contained"
1697
- }
1698
- });
1699
- var TabsList = React25__namespace.forwardRef(({ variant, className, ...props }, ref) => /* @__PURE__ */ React25__namespace.createElement(
1700
- TabsPrimitive__namespace.List,
1701
- {
1702
- ref,
1703
- className: tabsListVariants({ variant, className }),
1704
- ...props
1705
- }
1706
- ));
1707
- TabsList.displayName = TabsPrimitive__namespace.List.displayName;
1708
- var tabsTriggerVariants = chunkRTB6I3Q2_js.tv({
1709
- variants: {
1710
- variant: {
1711
- contained: "sb-inline-flex sb-items-center sb-justify-center sb-whitespace-nowrap sb-rounded-sm sb-px-3 sb-py-1.5 sb-text-sm sb-font-medium sb-ring-offset-background sb-transition-all focus-visible:sb-outline-none focus-visible:sb-ring-2 focus-visible:sb-ring-ring focus-visible:sb-ring-offset-2 disabled:sb-pointer-events-none disabled:sb-opacity-50 data-[state=active]:sb-bg-background data-[state=active]:sb-text-foreground data-[state=active]:sb-shadow-sm",
1712
- text: "sb-inline-flex sb-font-roboto sb-items-center sb-justify-center sb-whitespace-nowrap sb-py-3 sb-text-sm sb-font-medium sb-transition-all focus-visible:sb-outline-none disabled:sb-pointer-events-none disabled:sb-opacity-50 data-[state=active]:sb-border-black sb-border-b-2 sb-border-transparent data-[state=active]:sb-text-foreground sb-text-muted-foreground"
1713
- }
1714
- },
1715
- defaultVariants: {
1716
- variant: "contained"
1717
- }
1718
- });
1719
- var TabsTrigger = React25__namespace.forwardRef(({ variant, className, ...props }, ref) => /* @__PURE__ */ React25__namespace.createElement(
1720
- TabsPrimitive__namespace.Trigger,
1721
- {
1722
- ref,
1723
- className: tabsTriggerVariants({ variant, className }),
1724
- ...props
1725
- }
1726
- ));
1727
- TabsTrigger.displayName = TabsPrimitive__namespace.Trigger.displayName;
1728
- var TabsContent = React25__namespace.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ React25__namespace.createElement(
1729
- TabsPrimitive__namespace.Content,
1730
- {
1731
- ref,
1732
- className: chunkRTB6I3Q2_js.cn(
1733
- "sb-ring-offset-background sb-font-roboto focus-visible:sb-outline-none focus-visible:sb-ring-2 focus-visible:sb-ring-ring focus-visible:sb-ring-offset-2",
1734
- className
1735
- ),
1736
- ...props
1737
- }
1738
- ));
1739
- TabsContent.displayName = TabsPrimitive__namespace.Content.displayName;
1740
-
1741
- // src/components/ui/background-picker.tsx
1742
- var BackgroundPicker = (props) => {
1743
- const { background, onBackgroundChange, className } = props;
1744
- const solids = props.solids ?? [
1745
- "#000000",
1746
- "#ffffff",
1747
- "#0f172a",
1748
- "#F1F5F9",
1749
- "#64748B",
1750
- "#E6007E",
1751
- "#F8FAFC",
1752
- "#009DD1",
1753
- "#FF0000"
1754
- ];
1755
- const gradients = props.gradients ?? [
1756
- "linear-gradient(to top left,#accbee,#e7f0fd)",
1757
- "linear-gradient(to top left,#d5d4d0,#d5d4d0,#eeeeec)"
1758
- ];
1759
- const images = props.images ?? [
1760
- "url(https://images.unsplash.com/photo-1688822863426-8c5f9b257090?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=2532&q=90)",
1761
- "url(https://images.unsplash.com/photo-1691225850735-6e4e51834cad?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=2532&q=90)"
1762
- ];
1763
- const defaultTab = React25__namespace.useMemo(() => {
1764
- if (background.includes("url"))
1765
- return "image";
1766
- if (background.includes("gradient"))
1767
- return "gradient";
1768
- return "solid";
1769
- }, [background]);
1770
- return /* @__PURE__ */ React25__namespace.createElement(Popover, null, /* @__PURE__ */ React25__namespace.createElement(PopoverTrigger, { asChild: true }, /* @__PURE__ */ React25__namespace.createElement(
1771
- chunkJDB6GNKI_js.Button,
1772
- {
1773
- variant: "outline",
1774
- size: "sm",
1775
- className: chunkRTB6I3Q2_js.cn(
1776
- "sb-justify-start sb-text-left sb-font-normal sb-normal-case sb-w-full",
1777
- !background && "sb-text-muted-foreground",
1778
- className
1779
- )
1780
- },
1781
- /* @__PURE__ */ React25__namespace.createElement("div", { className: "sb-w-full sb-flex sb-items-center sb-gap-2" }, background ? /* @__PURE__ */ React25__namespace.createElement(
1782
- "div",
1783
- {
1784
- className: "sb-h-4 sb-w-4 sb-rounded !sb-bg-center !sb-bg-cover sb-transition-all sb-border",
1785
- style: { background }
1786
- }
1787
- ) : /* @__PURE__ */ React25__namespace.createElement(lucideReact.PaintbrushIcon, { className: "sb-h-4 sb-w-4" }), /* @__PURE__ */ React25__namespace.createElement("div", { className: "sb-truncate sb-flex-1" }, background ? background : "Kies een achtergrond"))
1788
- )), /* @__PURE__ */ React25__namespace.createElement(PopoverContent, { className: "sb-w-64 sb-p-0" }, /* @__PURE__ */ React25__namespace.createElement(Tabs, { defaultValue: defaultTab }, /* @__PURE__ */ React25__namespace.createElement(TabsList, { className: "sb-w-full" }, /* @__PURE__ */ React25__namespace.createElement(TabsTrigger, { className: "sb-flex-1", value: "solid" }, "Solid"), /* @__PURE__ */ React25__namespace.createElement(TabsTrigger, { className: "sb-flex-1", value: "gradient" }, "Gradient"), /* @__PURE__ */ React25__namespace.createElement(TabsTrigger, { className: "sb-flex-1", value: "image" }, "Image")), /* @__PURE__ */ React25__namespace.createElement(
1789
- TabsContent,
1790
- {
1791
- value: "solid",
1792
- className: "data-[state=active]:sb-flex sb-flex-wrap sb-gap-1 sb-p-4"
1793
- },
1794
- solids.map((s) => /* @__PURE__ */ React25__namespace.createElement(
1795
- "div",
1796
- {
1797
- key: s,
1798
- style: { background: s },
1799
- className: "sb-rounded-md sb-h-6 sb-w-6 sb-cursor-pointer active:sb-scale-105 sb-border",
1800
- onClick: () => onBackgroundChange(s)
1801
- }
1802
- ))
1803
- ), /* @__PURE__ */ React25__namespace.createElement(
1804
- TabsContent,
1805
- {
1806
- value: "gradient",
1807
- className: "data-[state=active]:sb-flex sb-flex-wrap sb-gap-1 sb-p-4"
1808
- },
1809
- gradients.map((s) => /* @__PURE__ */ React25__namespace.createElement(
1810
- "div",
1811
- {
1812
- key: s,
1813
- style: { background: s },
1814
- className: "rounded-md h-6 w-6 cursor-pointer active:scale-105 border",
1815
- onClick: () => onBackgroundChange(s)
1816
- }
1817
- ))
1818
- ), /* @__PURE__ */ React25__namespace.createElement(TabsContent, { value: "image" }, /* @__PURE__ */ React25__namespace.createElement("div", { className: "sb-p-4 sb-border-b" }, /* @__PURE__ */ React25__namespace.createElement(
1819
- MediaInput,
1820
- {
1821
- className: "sb-grid sb-grid-cols-2 sb-gap-1",
1822
- itemClassName: "sb-aspect-video sb-h-auto sb-w-full",
1823
- multiple: false,
1824
- onFilesChange: (files) => {
1825
- if (!files.length)
1826
- return;
1827
- onBackgroundChange(`url(${files[0]})`);
1828
- },
1829
- onError: (e) => console.error(
1830
- "[media-input]: Title: " + e?.title,
1831
- "media-input: Error: " + e?.description
1832
- )
1833
- }
1834
- )), /* @__PURE__ */ React25__namespace.createElement("div", { className: "sb-grid sb-grid-cols-2 sb-gap-1 sb-p-4" }, images.map((s) => /* @__PURE__ */ React25__namespace.createElement(
1835
- "div",
1836
- {
1837
- key: s,
1838
- style: { backgroundImage: s },
1839
- className: "sb-rounded-md sb-bg-cover sb-bg-center sb-aspect-video sb-w-full sb-cursor-pointer sb-border active:sb-scale-105",
1840
- onClick: () => onBackgroundChange(s)
1841
- }
1842
- )))))));
1843
- };
1844
- var SpacingInput = (props) => {
1845
- const [value, setValue] = React25__namespace.useState(parse(props.value || "0px"));
1846
- const [indipendent, setIndipendent] = React25__namespace.useState(
1847
- isIndipendent(parse(props.value || "0px"))
1848
- );
1849
- React25__namespace.useEffect(() => {
1850
- if (!props.onChange)
1851
- return;
1852
- props.onChange(stringify(value));
1853
- }, [value, props.onChange]);
1854
- return /* @__PURE__ */ React25__namespace.createElement("div", { className: "sb-grid sb-grid-cols-[1fr,auto] sb-gap-3" }, /* @__PURE__ */ React25__namespace.createElement("div", { className: "sb-grid sb-grid-cols-2 sb-items-center sb-gap-3" }, !indipendent ? /* @__PURE__ */ React25__namespace.createElement(React25__namespace.Fragment, null, /* @__PURE__ */ React25__namespace.createElement(
1855
- AdvancedInput,
1856
- {
1857
- value: value.left,
1858
- pattern: "\\d+",
1859
- onChange: ({ target: { value: value2 } }) => setValue((prev) => ({ ...prev, left: +value2, right: +value2 })),
1860
- prepend: /* @__PURE__ */ React25__namespace.createElement(lucideReact.AlignHorizontalSpaceAroundIcon, { className: "sb-h-4 sb-w-4" }),
1861
- append: /* @__PURE__ */ React25__namespace.createElement("span", { className: "sb-text-muted-foreground" }, "px")
1862
- }
1863
- ), /* @__PURE__ */ React25__namespace.createElement(
1864
- AdvancedInput,
1865
- {
1866
- value: value.top,
1867
- pattern: "\\d+",
1868
- onChange: ({ target: { value: value2 } }) => setValue((prev) => ({ ...prev, top: +value2, bottom: +value2 })),
1869
- prepend: /* @__PURE__ */ React25__namespace.createElement(lucideReact.AlignHorizontalSpaceAroundIcon, { className: "sb-h-4 sb-w-4 sb-rotate-90" }),
1870
- append: /* @__PURE__ */ React25__namespace.createElement("span", { className: "sb-text-muted-foreground" }, "px")
1871
- }
1872
- )) : /* @__PURE__ */ React25__namespace.createElement(React25__namespace.Fragment, null, /* @__PURE__ */ React25__namespace.createElement(
1873
- AdvancedInput,
1874
- {
1875
- value: value.left,
1876
- pattern: "\\d+",
1877
- onChange: ({ target: { value: value2 } }) => setValue((prev) => ({ ...prev, left: +value2 })),
1878
- prepend: /* @__PURE__ */ React25__namespace.createElement(lucideReact.AlignHorizontalJustifyStartIcon, { className: "sb-h-4 sb-w-4" }),
1879
- append: /* @__PURE__ */ React25__namespace.createElement("span", { className: "sb-text-muted-foreground" }, "px")
1880
- }
1881
- ), /* @__PURE__ */ React25__namespace.createElement(
1882
- AdvancedInput,
1883
- {
1884
- value: value.top,
1885
- pattern: "\\d+",
1886
- onChange: ({ target: { value: value2 } }) => setValue((prev) => ({ ...prev, top: +value2 })),
1887
- prepend: /* @__PURE__ */ React25__namespace.createElement(lucideReact.AlignHorizontalJustifyStartIcon, { className: "sb-h-4 sb-w-4 sb-rotate-90" }),
1888
- append: /* @__PURE__ */ React25__namespace.createElement("span", { className: "sb-text-muted-foreground" }, "px")
1889
- }
1890
- ), /* @__PURE__ */ React25__namespace.createElement(
1891
- AdvancedInput,
1892
- {
1893
- value: value.right,
1894
- pattern: "\\d+",
1895
- onChange: ({ target: { value: value2 } }) => setValue((prev) => ({ ...prev, right: +value2 })),
1896
- prepend: /* @__PURE__ */ React25__namespace.createElement(lucideReact.AlignHorizontalJustifyStartIcon, { className: "sb-h-4 sb-w-4 sb-rotate-180" }),
1897
- append: /* @__PURE__ */ React25__namespace.createElement("span", { className: "sb-text-muted-foreground" }, "px")
1898
- }
1899
- ), /* @__PURE__ */ React25__namespace.createElement(
1900
- AdvancedInput,
1901
- {
1902
- value: value.bottom,
1903
- pattern: "\\d+",
1904
- onChange: ({ target: { value: value2 } }) => setValue((prev) => ({ ...prev, bottom: +value2 })),
1905
- prepend: /* @__PURE__ */ React25__namespace.createElement(lucideReact.AlignHorizontalJustifyStartIcon, { className: "sb-h-4 sb-w-4 sb--rotate-90" }),
1906
- append: /* @__PURE__ */ React25__namespace.createElement("span", { className: "sb-text-muted-foreground" }, "px")
1907
- }
1908
- ))), /* @__PURE__ */ React25__namespace.createElement("div", { className: "sb-shrink-0" }, /* @__PURE__ */ React25__namespace.createElement(
1909
- Toggle,
1910
- {
1911
- className: "sb-shrink-0 sb-flex sb-w-8 sb-h-8 sb-p-0",
1912
- variant: "outline",
1913
- size: "sm",
1914
- pressed: indipendent,
1915
- onPressedChange: setIndipendent
1916
- },
1917
- /* @__PURE__ */ React25__namespace.createElement(lucideReact.ScanIcon, { className: "sb-h-4 sb-w-4" })
1918
- )));
1919
- };
1920
- var isIndipendent = (value) => {
1921
- const { top, right, bottom, left } = value;
1922
- return top !== bottom || right !== left;
1923
- };
1924
- var parse = (value) => {
1925
- const matches = value.match(/(\d+)/gm);
1926
- const [top = 0, right = 0, bottom = 0, left = 0] = matches?.map((match) => +match) || [];
1927
- switch (matches?.length) {
1928
- case 1:
1929
- return { top, right: top, bottom: top, left: top };
1930
- case 2:
1931
- return { top, bottom: top, left: right, right };
1932
- case 3:
1933
- return { top, right, left: right, bottom };
1934
- default:
1935
- return { top, right, bottom, left };
1936
- }
1937
- };
1938
- var stringify = (value) => {
1939
- const { top, right, bottom, left } = value;
1940
- if (top === right && top === bottom && top === left) {
1941
- return `${top}px`;
1942
- }
1943
- if (top === bottom && right === left) {
1944
- return `${top}px ${right}px`;
1945
- }
1946
- if (right === left) {
1947
- return `${top}px ${right}px ${bottom}px`;
1948
- }
1949
- return `${top}px ${right}px ${bottom}px ${left}px`;
1950
- };
1951
-
1952
- // src/components/item-design-form.tsx
1953
- var designSchema = zod.z.object({
1954
- container: zod.z.coerce.boolean(),
1955
- hidden: zod.z.enum(["always", "mobile", "desktop", "never"]),
1956
- desktop: zod.z.object({
1957
- background: zod.z.string(),
1958
- color: zod.z.string(),
1959
- padding: zod.z.string(),
1960
- margin: zod.z.string()
1961
- }),
1962
- mobile: zod.z.object({
1963
- background: zod.z.string(),
1964
- color: zod.z.string(),
1965
- padding: zod.z.string(),
1966
- margin: zod.z.string()
1967
- })
1968
- });
1969
- var ItemDesignForm = (props) => {
1970
- const { item } = props;
1971
- const component = chunkRTB6I3Q2_js.builder.getComponent(item.component);
1972
- if (!component) {
1973
- throw new Error(
1974
- `[simple-builder]: Component "${item.component}" not found`
1975
- );
1976
- }
1977
- const getDefaultDeviceValue = (params) => {
1978
- const { device: device2 = "desktop", key, fallback = "" } = params;
1979
- if (item.styles?.[device2]?.[key] !== void 0) {
1980
- return item.styles[device2][key];
1981
- }
1982
- if (component.defaultStyles?.[device2]?.[key] !== void 0) {
1983
- return component.defaultStyles[device2][key];
1984
- }
1985
- if (device2 === "mobile") {
1986
- const desktopValue = getDefaultDeviceValue({
1987
- ...params,
1988
- device: "desktop"
1989
- });
1990
- if (desktopValue !== void 0) {
1991
- return desktopValue;
1992
- }
1993
- }
1994
- return fallback;
1995
- };
1996
- const getDefaultDeviceValues = (device2) => {
1997
- return {
1998
- background: getDefaultDeviceValue({ device: device2, key: "background" }),
1999
- color: getDefaultDeviceValue({ device: device2, key: "color" }),
2000
- padding: getDefaultDeviceValue({ device: device2, key: "padding" }),
2001
- margin: getDefaultDeviceValue({ device: device2, key: "margin" })
2002
- };
2003
- };
2004
- const form = reactHookForm.useForm({
2005
- resolver: zod$1.zodResolver(designSchema),
2006
- values: {
2007
- container: item.styles?.container ?? true,
2008
- hidden: item.styles?.hidden ?? "never",
2009
- desktop: getDefaultDeviceValues("desktop"),
2010
- mobile: getDefaultDeviceValues("mobile")
2011
- }
2012
- });
2013
- const { patchItem } = chunkJDB6GNKI_js.useBuilder();
2014
- const onSubmit = React25__namespace.useCallback(
2015
- (values) => {
2016
- const { container, hidden, desktop, mobile } = values;
2017
- const dirtyFields = form.formState.dirtyFields;
2018
- const desktopPatch = Object.entries(desktop).reduce(
2019
- (acc, [key, value]) => ({
2020
- ...acc,
2021
- ...value && { [key]: value }
2022
- }),
2023
- { ...item.styles?.desktop }
2024
- );
2025
- const mobilePatch = Object.entries(mobile).reduce(
2026
- (acc, [key, value]) => {
2027
- const desktopValue = desktop[key];
2028
- const isDirty = dirtyFields.desktop?.[key];
2029
- if (value === desktopValue || isDirty) {
2030
- return acc;
2031
- }
2032
- if (["padding", "margin"].includes(key)) {
2033
- if (value === "0px" && desktopValue === "0px") {
2034
- return acc;
2035
- }
2036
- }
2037
- return {
2038
- ...acc,
2039
- ...value && { [key]: value }
2040
- };
2041
- },
2042
- { ...item.styles?.mobile }
2043
- );
2044
- patchItem(item.id, {
2045
- styles: {
2046
- ...container === false && { container },
2047
- ...hidden !== "never" && { hidden },
2048
- ...Object.keys(desktopPatch).length && { desktop: desktopPatch },
2049
- ...Object.keys(mobilePatch).length && { mobile: mobilePatch }
2050
- }
2051
- });
2052
- },
2053
- [patchItem, item.id, form.formState.dirtyFields]
2054
- );
2055
- React25__namespace.useEffect(() => {
2056
- const subscription = form.watch((value) => {
2057
- if (form.formState.isDirty && Object.keys(form.formState.errors).length === 0) {
2058
- onSubmit(value);
2059
- }
2060
- });
2061
- return () => subscription.unsubscribe();
2062
- }, [form, onSubmit]);
2063
- const [device, setDevice] = React25__namespace.useState("desktop");
2064
- React25__namespace.useEffect(() => {
2065
- const subscription = form.watch(() => form.handleSubmit(onSubmit)());
2066
- return () => subscription.unsubscribe();
2067
- }, [form.watch, form.handleSubmit]);
2068
- return /* @__PURE__ */ React25__namespace.createElement(Form, { ...form }, /* @__PURE__ */ React25__namespace.createElement("form", { onSubmit: form.handleSubmit(onSubmit) }, /* @__PURE__ */ React25__namespace.createElement("div", { className: "sb-space-y-4 sb-p-4" }, /* @__PURE__ */ React25__namespace.createElement(
2069
- Tabs,
2070
- {
2071
- defaultValue: device,
2072
- onValueChange: (device2) => setDevice(device2)
2073
- },
2074
- /* @__PURE__ */ React25__namespace.createElement(TabsList, { className: "sb-h-9 sb-grid sb-w-full sb-grid-cols-2" }, /* @__PURE__ */ React25__namespace.createElement(TabsTrigger, { value: "desktop", className: "sb-text-xs" }, /* @__PURE__ */ React25__namespace.createElement(lucideReact.MonitorIcon, { className: "sb-h-4 sb-w-4 sb-mr-2" }), /* @__PURE__ */ React25__namespace.createElement("span", null, "Desktop")), /* @__PURE__ */ React25__namespace.createElement(TabsTrigger, { value: "mobile", className: "sb-text-xs" }, /* @__PURE__ */ React25__namespace.createElement(lucideReact.SmartphoneIcon, { className: "sb-h-4 sb-w-4 sb-mr-2" }), /* @__PURE__ */ React25__namespace.createElement("span", null, "Mobiel")))
2075
- ), /* @__PURE__ */ React25__namespace.createElement("div", { className: "sb-space-y-4" }, /* @__PURE__ */ React25__namespace.createElement(
2076
- FormField,
2077
- {
2078
- control: form.control,
2079
- key: `${device}.background`,
2080
- name: `${device}.background`,
2081
- render: ({ field }) => /* @__PURE__ */ React25__namespace.createElement(FormItem, null, /* @__PURE__ */ React25__namespace.createElement(FormLabel, null, "Achtergrond"), /* @__PURE__ */ React25__namespace.createElement(FormControl, null, /* @__PURE__ */ React25__namespace.createElement(
2082
- BackgroundPicker,
2083
- {
2084
- background: field.value,
2085
- onBackgroundChange: field.onChange
2086
- }
2087
- )), /* @__PURE__ */ React25__namespace.createElement(FormMessage, null))
2088
- }
2089
- ), /* @__PURE__ */ React25__namespace.createElement(
2090
- FormField,
2091
- {
2092
- control: form.control,
2093
- key: `${device}.color`,
2094
- name: `${device}.color`,
2095
- render: ({ field }) => /* @__PURE__ */ React25__namespace.createElement(FormItem, null, /* @__PURE__ */ React25__namespace.createElement(FormLabel, null, "Inhoud kleur"), /* @__PURE__ */ React25__namespace.createElement(FormControl, null, /* @__PURE__ */ React25__namespace.createElement(
2096
- ColorPicker,
2097
- {
2098
- color: field.value,
2099
- onColorChange: field.onChange
2100
- }
2101
- )), /* @__PURE__ */ React25__namespace.createElement(FormMessage, null))
2102
- }
2103
- ), /* @__PURE__ */ React25__namespace.createElement("hr", null), /* @__PURE__ */ React25__namespace.createElement(
2104
- FormField,
2105
- {
2106
- control: form.control,
2107
- name: "hidden",
2108
- render: ({ field }) => /* @__PURE__ */ React25__namespace.createElement(FormItem, null, /* @__PURE__ */ React25__namespace.createElement(FormLabel, null, "Verbergen"), /* @__PURE__ */ React25__namespace.createElement(FormControl, null, /* @__PURE__ */ React25__namespace.createElement(Select, { value: field.value, onValueChange: field.onChange }, /* @__PURE__ */ React25__namespace.createElement(SelectTrigger, null, /* @__PURE__ */ React25__namespace.createElement(SelectValue, null)), /* @__PURE__ */ React25__namespace.createElement(SelectContent, null, /* @__PURE__ */ React25__namespace.createElement(SelectItem, { value: "never" }, "Nooit"), /* @__PURE__ */ React25__namespace.createElement(SelectItem, { value: "desktop" }, "Op desktop"), /* @__PURE__ */ React25__namespace.createElement(SelectItem, { value: "mobile" }, "Op mobiel"), /* @__PURE__ */ React25__namespace.createElement(SelectItem, { value: "always" }, "Altijd")))), /* @__PURE__ */ React25__namespace.createElement(FormMessage, null))
2109
- }
2110
- ), /* @__PURE__ */ React25__namespace.createElement("hr", null), /* @__PURE__ */ React25__namespace.createElement(
2111
- FormField,
2112
- {
2113
- control: form.control,
2114
- name: "container",
2115
- render: ({ field }) => /* @__PURE__ */ React25__namespace.createElement(FormItem, { className: "sb-flex sb-flex-row sb-items-center sb-justify-between sb-space-y-0" }, /* @__PURE__ */ React25__namespace.createElement(FormLabel, null, "Volledige breedte"), /* @__PURE__ */ React25__namespace.createElement(FormControl, null, /* @__PURE__ */ React25__namespace.createElement(
2116
- Switch,
2117
- {
2118
- checked: !field.value,
2119
- onCheckedChange: (v) => field.onChange(!v)
2120
- }
2121
- )), /* @__PURE__ */ React25__namespace.createElement(FormMessage, null))
2122
- }
2123
- ), /* @__PURE__ */ React25__namespace.createElement("hr", null), /* @__PURE__ */ React25__namespace.createElement(
2124
- FormField,
2125
- {
2126
- control: form.control,
2127
- key: `${device}.padding`,
2128
- name: `${device}.padding`,
2129
- render: ({ field }) => /* @__PURE__ */ React25__namespace.createElement(FormItem, null, /* @__PURE__ */ React25__namespace.createElement(FormLabel, null, "Padding"), /* @__PURE__ */ React25__namespace.createElement(FormControl, null, /* @__PURE__ */ React25__namespace.createElement(
2130
- SpacingInput,
2131
- {
2132
- value: field.value,
2133
- onChange: field.onChange
2134
- }
2135
- )), /* @__PURE__ */ React25__namespace.createElement(FormMessage, null))
2136
- }
2137
- ), /* @__PURE__ */ React25__namespace.createElement(
2138
- FormField,
2139
- {
2140
- control: form.control,
2141
- key: `${device}.margin`,
2142
- name: `${device}.margin`,
2143
- render: ({ field }) => /* @__PURE__ */ React25__namespace.createElement(FormItem, null, /* @__PURE__ */ React25__namespace.createElement(FormLabel, null, "Margin"), /* @__PURE__ */ React25__namespace.createElement(FormControl, null, /* @__PURE__ */ React25__namespace.createElement(
2144
- SpacingInput,
2145
- {
2146
- value: field.value,
2147
- onChange: field.onChange
2148
- }
2149
- )), /* @__PURE__ */ React25__namespace.createElement(FormMessage, null))
2150
- }
2151
- )))));
2152
- };
2153
- var ScrollArea = React25__namespace.forwardRef(({ className, children, ...props }, ref) => /* @__PURE__ */ React25__namespace.createElement(
2154
- ScrollAreaPrimitive__namespace.Root,
2155
- {
2156
- ref,
2157
- className: chunkRTB6I3Q2_js.cn("sb-relative sb-overflow-hidden", className),
2158
- ...props
2159
- },
2160
- /* @__PURE__ */ React25__namespace.createElement(ScrollAreaPrimitive__namespace.Viewport, { className: "sb-h-full sb-max-h-[80vh] sb-w-full sb-rounded-[inherit]" }, children),
2161
- /* @__PURE__ */ React25__namespace.createElement(ScrollBar, null),
2162
- /* @__PURE__ */ React25__namespace.createElement(ScrollAreaPrimitive__namespace.Corner, null)
2163
- ));
2164
- ScrollArea.displayName = ScrollAreaPrimitive__namespace.Root.displayName;
2165
- var ScrollBar = React25__namespace.forwardRef(({ className, orientation = "vertical", ...props }, ref) => /* @__PURE__ */ React25__namespace.createElement(
2166
- ScrollAreaPrimitive__namespace.ScrollAreaScrollbar,
2167
- {
2168
- ref,
2169
- orientation,
2170
- className: chunkRTB6I3Q2_js.cn(
2171
- "sb-flex sb-touch-none sb-select-none sb-transition-colors",
2172
- orientation === "vertical" && "sb-h-full sb-w-2.5 sb-border-l sb-border-l-transparent sb-p-[1px]",
2173
- orientation === "horizontal" && "sb-h-2.5 sb-flex-col sb-border-t sb-border-t-transparent sb-p-[1px]",
2174
- className
2175
- ),
2176
- ...props
2177
- },
2178
- /* @__PURE__ */ React25__namespace.createElement(ScrollAreaPrimitive__namespace.ScrollAreaThumb, { className: "sb-relative sb-flex-1 sb-rounded-full sb-bg-border" })
2179
- ));
2180
- ScrollBar.displayName = ScrollAreaPrimitive__namespace.ScrollAreaScrollbar.displayName;
2181
-
2182
- // src/components/container-item-toolbar.tsx
2183
- var ContainerItemToolbar = (props) => {
2184
- const { contentId, canBringUp = false, canBringDown = false } = props;
2185
- const { bringUp, bringDown } = chunkJDB6GNKI_js.useBuilder();
2186
- return /* @__PURE__ */ React25__namespace.createElement("div", { className: "sb-absolute sb-z-20 sb-top-1 sb-right-1 sb-rounded-md sb-shadow sb-flex sb-flex-col sb-gap-1 sb-p-1 sb-bg-card sb-text-card-foreground sb-item-toolbar sb-opacity-0 sb-transition-opacity" }, /* @__PURE__ */ React25__namespace.createElement("div", { className: "sb-h-10 sb-p-1 sb-border sb-border-input sb-bg-background sb-rounded-md sb-text-sm sb-font-medium sb-flex sb-gap-1 sb-items-center sb-justify-start" }, /* @__PURE__ */ React25__namespace.createElement(EditButton, { id: contentId }), /* @__PURE__ */ React25__namespace.createElement(
2187
- chunkJDB6GNKI_js.Button,
2188
- {
2189
- variant: "ghost",
2190
- className: "sb-w-8 sb-h-8 sb-p-0",
2191
- onClick: () => bringUp(contentId),
2192
- disabled: !canBringUp
2193
- },
2194
- /* @__PURE__ */ React25__namespace.createElement(lucideReact.ArrowUp, { className: "sb-h-5 sb-w-5" })
2195
- ), /* @__PURE__ */ React25__namespace.createElement(
2196
- chunkJDB6GNKI_js.Button,
2197
- {
2198
- variant: "ghost",
2199
- className: "sb-w-8 sb-h-8 sb-p-0",
2200
- onClick: () => bringDown(contentId),
2201
- disabled: !canBringDown
2202
- },
2203
- /* @__PURE__ */ React25__namespace.createElement(lucideReact.ArrowDown, { className: "sb-h-5 sb-w-5" })
2204
- ), /* @__PURE__ */ React25__namespace.createElement(DeleteButton, { contentId })));
2205
- };
2206
- var EditButton = ({ id }) => {
2207
- return /* @__PURE__ */ React25__namespace.createElement(Popover, { modal: true }, /* @__PURE__ */ React25__namespace.createElement(PopoverTrigger, { asChild: true }, /* @__PURE__ */ React25__namespace.createElement(chunkJDB6GNKI_js.Button, { variant: "ghost", className: "sb-w-8 sb-h-8 sb-p-0" }, /* @__PURE__ */ React25__namespace.createElement(lucideReact.Edit2Icon, { className: "sb-h-5 sb-w-5" }))), /* @__PURE__ */ React25__namespace.createElement(
2208
- PopoverContent,
2209
- {
2210
- side: "left",
2211
- align: "start",
2212
- sideOffset: 16,
2213
- alignOffset: -8,
2214
- className: "sb-p-0 sb-relative",
2215
- collisionPadding: 16
2216
- },
2217
- /* @__PURE__ */ React25__namespace.createElement(EditPopoverInner, { id })
2218
- ));
2219
- };
2220
- var EditPopoverInner = (props) => {
2221
- const { id } = props;
2222
- const { getItem } = chunkJDB6GNKI_js.useBuilder();
2223
- const item = getItem(id);
2224
- if (!item) {
2225
- throw new Error(
2226
- `[simple-builder]: Item with id ${id} not found in container item form component`
2227
- );
2228
- }
2229
- return /* @__PURE__ */ React25__namespace.createElement(Tabs, null, /* @__PURE__ */ React25__namespace.createElement(TabsList, { variant: "text", defaultValue: "content" }, /* @__PURE__ */ React25__namespace.createElement(TabsTrigger, { variant: "text", value: "content" }, "Inhoud"), /* @__PURE__ */ React25__namespace.createElement(TabsTrigger, { variant: "text", value: "design" }, "Design")), /* @__PURE__ */ React25__namespace.createElement(TabsContent, { value: "content" }, /* @__PURE__ */ React25__namespace.createElement(ScrollArea, null, /* @__PURE__ */ React25__namespace.createElement(ContainerItemForm, { item }))), /* @__PURE__ */ React25__namespace.createElement(TabsContent, { value: "design" }, /* @__PURE__ */ React25__namespace.createElement(ItemDesignForm, { item })));
2230
- };
2231
- var DeleteButton = ({ contentId }) => {
2232
- const { deleteContent } = chunkJDB6GNKI_js.useBuilder();
2233
- return /* @__PURE__ */ React25__namespace.createElement(AlertDialog, null, /* @__PURE__ */ React25__namespace.createElement(AlertDialogTrigger, { asChild: true }, /* @__PURE__ */ React25__namespace.createElement(
2234
- chunkJDB6GNKI_js.Button,
2235
- {
2236
- variant: "ghost",
2237
- className: "sb-w-8 sb-h-8 sb-p-0 sb-text-destructive"
2238
- },
2239
- /* @__PURE__ */ React25__namespace.createElement(lucideReact.Trash2Icon, { className: "sb-h-5 sb-w-5" })
2240
- )), /* @__PURE__ */ React25__namespace.createElement(AlertDialogContent, null, /* @__PURE__ */ React25__namespace.createElement(AlertDialogDescription, null, "Weet je zeker dat je dit blok wilt verwijderen?"), /* @__PURE__ */ React25__namespace.createElement(AlertDialogFooter, null, /* @__PURE__ */ React25__namespace.createElement(AlertDialogCancel, null, "Annuleren"), /* @__PURE__ */ React25__namespace.createElement(
2241
- AlertDialogAction,
2242
- {
2243
- className: chunkJDB6GNKI_js.buttonVariants({ variant: "destructive" }),
2244
- onClick: () => deleteContent(contentId)
2245
- },
2246
- "Verwijderen"
2247
- ))));
2248
- };
2249
-
2250
- // src/components/build-container-client.tsx
2251
- var BuildContainerInner = (props) => {
2252
- const { id, name, content, multiple = false } = props;
2253
- const items = Array.isArray(content) ? content : content?.[name] || [];
2254
- if (!multiple && items.length > 1) {
2255
- console.error(
2256
- "[simple-builder]: Multiple content blocks detected when using property multiple false."
2257
- );
2258
- }
2259
- return /* @__PURE__ */ React25__namespace.createElement("div", null, items.length <= 0 ? /* @__PURE__ */ React25__namespace.createElement(AddContentPlaceholder, { parent: id, container: name, index: 0 }) : multiple && /* @__PURE__ */ React25__namespace.createElement(AddContentDividerButton, { parent: id, container: name, index: 0 }), items.map((item, i) => /* @__PURE__ */ React25__namespace.createElement(React25__namespace.Fragment, { key: item.id }, /* @__PURE__ */ React25__namespace.createElement("div", { className: "sb-relative sb-container-item" }, /* @__PURE__ */ React25__namespace.createElement(chunkRTB6I3Q2_js.DesignWrapper, { building: true, styles: item.styles }, chunkRTB6I3Q2_js.builder.bindComponent(item, true)), /* @__PURE__ */ React25__namespace.createElement(
2260
- ContainerItemToolbar,
2261
- {
2262
- contentId: item.id,
2263
- canBringUp: i > 0,
2264
- canBringDown: i < items.length - 1
2265
- }
2266
- )), multiple && /* @__PURE__ */ React25__namespace.createElement(
2267
- AddContentDividerButton,
2268
- {
2269
- parent: id,
2270
- container: name,
2271
- index: i + 1
2272
- }
2273
- ))));
2274
- };
2275
- var build_container_client_default = BuildContainerInner;
2276
- var AddContentButton = (props) => {
2277
- const components = chunkRTB6I3Q2_js.builder.getComponents();
2278
- const { addContent } = chunkJDB6GNKI_js.useBuilder();
2279
- return /* @__PURE__ */ React25__namespace.createElement(Popover, null, /* @__PURE__ */ React25__namespace.createElement(PopoverTrigger, { asChild: true }, props.children), /* @__PURE__ */ React25__namespace.createElement(PopoverContent, { className: "sb-p-1" }, /* @__PURE__ */ React25__namespace.createElement("div", { className: "sb-grid sb-grid-cols-2 sb-gap-2" }, components.map((component) => {
2280
- const Icon2 = component.icon ?? lucideReact.ImageIcon;
2281
- return /* @__PURE__ */ React25__namespace.createElement(PopoverClose, { key: component.name, asChild: true }, /* @__PURE__ */ React25__namespace.createElement(
2282
- chunkJDB6GNKI_js.Button,
2283
- {
2284
- variant: "ghost",
2285
- className: "sb-justify-start",
2286
- onClick: () => {
2287
- addContent(
2288
- component.name,
2289
- props.container,
2290
- props.parent,
2291
- props.index
2292
- );
2293
- }
2294
- },
2295
- /* @__PURE__ */ React25__namespace.createElement(Icon2, { className: "sb-mr-2 sb-h-4 sb-w-4 sb-shrink-0" }),
2296
- component.friendlyName ?? component.name
2297
- ));
2298
- }))));
2299
- };
2300
- var AddContentPlaceholder = (props) => {
2301
- return /* @__PURE__ */ React25__namespace.createElement(AddContentButton, { ...props }, /* @__PURE__ */ React25__namespace.createElement("div", { className: "sb-flex sb-justify-center sb-bg-primary/50 p-4" }, /* @__PURE__ */ React25__namespace.createElement(chunkJDB6GNKI_js.Button, { size: "sm" }, /* @__PURE__ */ React25__namespace.createElement(lucideReact.PlusIcon, { className: "sb-mr-2 sb-h-4 sb-w-4" }), "Blok Toevoegen")));
2302
- };
2303
- var AddContentDividerButton = (props) => {
2304
- return /* @__PURE__ */ React25__namespace.createElement(AddContentButton, { ...props }, /* @__PURE__ */ React25__namespace.createElement("div", { className: "sb-w-full sb-h-1 sb--my-[2px] sb-bg-primary sb-relative sb-z-20 sb-opacity-0 add-content-divider-button sb-transition-opacity" }, /* @__PURE__ */ React25__namespace.createElement(
2305
- chunkJDB6GNKI_js.Button,
2306
- {
2307
- size: "sm",
2308
- className: "sb-absolute sb-left-1/2 sb-top-1/2 sb--translate-y-1/2 sb--translate-x-1/2 sb-shadow"
2309
- },
2310
- /* @__PURE__ */ React25__namespace.createElement(lucideReact.PlusIcon, { className: "sb-mr-2 sb-h-4 sb-w-4" }),
2311
- "Blok Toevoegen"
2312
- )));
2313
- };
2314
-
2315
- module.exports = build_container_client_default;