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