@simple-builder/react 1.0.2 → 1.0.3
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.
- package/dist/{build-container-client-LHGW2FFR.js → build-container-client-MHVIH442.js} +385 -382
- package/dist/build-container-client-QJL5MQR6.css +1123 -0
- package/dist/{build-container-client-SL4TZBOD.mjs → build-container-client-R2FNJHPM.mjs} +343 -337
- package/dist/{builder-content-66LHSBUX.js → builder-content-BOQEXOAK.js} +7 -8
- package/dist/{builder-content-FCQHSHSY.mjs → builder-content-MNCJZTFS.mjs} +2 -3
- package/dist/builder-content-YW6SKGMM.css +1123 -0
- package/dist/{chunk-7K7IGTF3.mjs → chunk-FGQSJAOO.mjs} +13 -1
- package/dist/{chunk-3S4FFEHM.js → chunk-GSOMMLCG.js} +2 -2
- package/dist/chunk-IVFWYNC3.mjs +20 -0
- package/dist/{chunk-BXL6F5AB.mjs → chunk-LPIHSXYO.mjs} +1 -1
- package/dist/{chunk-5ZDNACOH.js → chunk-N2X3IJBG.js} +16 -12
- package/dist/chunk-UZFAGH6G.js +74 -0
- package/dist/index.js +12 -40
- package/dist/index.mjs +2 -22
- package/package.json +11 -11
- package/dist/chunk-NROQCSBF.mjs +0 -16
- package/dist/chunk-VMHWPKU4.js +0 -42
|
@@ -1,25 +1,25 @@
|
|
|
1
|
+
'use client';
|
|
1
2
|
'use strict';
|
|
2
3
|
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
var
|
|
6
|
-
var
|
|
7
|
-
var React15 = require('react');
|
|
4
|
+
require('./chunk-N2X3IJBG.js');
|
|
5
|
+
var chunkGSOMMLCG_js = require('./chunk-GSOMMLCG.js');
|
|
6
|
+
var chunkUZFAGH6G_js = require('./chunk-UZFAGH6G.js');
|
|
7
|
+
var React13 = require('react');
|
|
8
8
|
var lucideReact = require('lucide-react');
|
|
9
|
+
var AlertDialogPrimitive = require('@radix-ui/react-alert-dialog');
|
|
10
|
+
var PopoverPrimitive = require('@radix-ui/react-popover');
|
|
9
11
|
var zod$1 = require('@hookform/resolvers/zod');
|
|
10
|
-
var dateFns = require('date-fns');
|
|
11
12
|
var reactHookForm = require('react-hook-form');
|
|
12
13
|
var zod = require('zod');
|
|
13
|
-
var AlertDialogPrimitive = require('@radix-ui/react-alert-dialog');
|
|
14
14
|
var reactSlot = require('@radix-ui/react-slot');
|
|
15
15
|
var LabelPrimitive = require('@radix-ui/react-label');
|
|
16
16
|
var classVarianceAuthority = require('class-variance-authority');
|
|
17
|
-
var PopoverPrimitive = require('@radix-ui/react-popover');
|
|
18
17
|
var TabsPrimitive = require('@radix-ui/react-tabs');
|
|
19
18
|
var NextImage = require('next/image');
|
|
20
|
-
var reactDayPicker = require('react-day-picker');
|
|
21
19
|
var SwitchPrimitives = require('@radix-ui/react-switch');
|
|
22
20
|
var TogglePrimitive = require('@radix-ui/react-toggle');
|
|
21
|
+
var dateFns = require('date-fns');
|
|
22
|
+
var reactDayPicker = require('react-day-picker');
|
|
23
23
|
|
|
24
24
|
function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
|
|
25
25
|
|
|
@@ -41,10 +41,10 @@ function _interopNamespace(e) {
|
|
|
41
41
|
return Object.freeze(n);
|
|
42
42
|
}
|
|
43
43
|
|
|
44
|
-
var
|
|
44
|
+
var React13__namespace = /*#__PURE__*/_interopNamespace(React13);
|
|
45
45
|
var AlertDialogPrimitive__namespace = /*#__PURE__*/_interopNamespace(AlertDialogPrimitive);
|
|
46
|
-
var LabelPrimitive__namespace = /*#__PURE__*/_interopNamespace(LabelPrimitive);
|
|
47
46
|
var PopoverPrimitive__namespace = /*#__PURE__*/_interopNamespace(PopoverPrimitive);
|
|
47
|
+
var LabelPrimitive__namespace = /*#__PURE__*/_interopNamespace(LabelPrimitive);
|
|
48
48
|
var TabsPrimitive__namespace = /*#__PURE__*/_interopNamespace(TabsPrimitive);
|
|
49
49
|
var NextImage__default = /*#__PURE__*/_interopDefault(NextImage);
|
|
50
50
|
var SwitchPrimitives__namespace = /*#__PURE__*/_interopNamespace(SwitchPrimitives);
|
|
@@ -53,10 +53,10 @@ var TogglePrimitive__namespace = /*#__PURE__*/_interopNamespace(TogglePrimitive)
|
|
|
53
53
|
var AlertDialog = AlertDialogPrimitive__namespace.Root;
|
|
54
54
|
var AlertDialogTrigger = AlertDialogPrimitive__namespace.Trigger;
|
|
55
55
|
var AlertDialogPortal = AlertDialogPrimitive__namespace.Portal;
|
|
56
|
-
var AlertDialogOverlay =
|
|
56
|
+
var AlertDialogOverlay = React13__namespace.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ React13__namespace.createElement(
|
|
57
57
|
AlertDialogPrimitive__namespace.Overlay,
|
|
58
58
|
{
|
|
59
|
-
className:
|
|
59
|
+
className: chunkGSOMMLCG_js.cn(
|
|
60
60
|
"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",
|
|
61
61
|
className
|
|
62
62
|
),
|
|
@@ -65,11 +65,11 @@ var AlertDialogOverlay = React15__namespace.forwardRef(({ className, ...props },
|
|
|
65
65
|
}
|
|
66
66
|
));
|
|
67
67
|
AlertDialogOverlay.displayName = AlertDialogPrimitive__namespace.Overlay.displayName;
|
|
68
|
-
var AlertDialogContent =
|
|
68
|
+
var AlertDialogContent = React13__namespace.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ React13__namespace.createElement(AlertDialogPortal, null, /* @__PURE__ */ React13__namespace.createElement(AlertDialogOverlay, null), /* @__PURE__ */ React13__namespace.createElement(
|
|
69
69
|
AlertDialogPrimitive__namespace.Content,
|
|
70
70
|
{
|
|
71
71
|
ref,
|
|
72
|
-
className:
|
|
72
|
+
className: chunkGSOMMLCG_js.cn(
|
|
73
73
|
"sb-fixed sb-font-roboto sb-left-[50%] sb-top-[50%] sb-z-50 sb-grid sb-w-full sb-max-w-lg sb-translate-x-[-50%] sb-translate-y-[-50%] sb-gap-4 sb-border sb-bg-background sb-p-6 sb-shadow-lg sb-duration-200 data-[state=open]:sb-animate-in data-[state=closed]:sb-animate-out data-[state=closed]:sb-fade-out-0 data-[state=open]:sb-fade-in-0 data-[state=closed]:sb-zoom-out-95 data-[state=open]:sb-zoom-in-95 data-[state=closed]:sb-slide-out-to-left-1/2 data-[state=closed]:sb-slide-out-to-top-[48%] data-[state=open]:sb-slide-in-from-left-1/2 data-[state=open]:sb-slide-in-from-top-[48%] sm:sb-rounded-lg",
|
|
74
74
|
className
|
|
75
75
|
),
|
|
@@ -80,10 +80,10 @@ AlertDialogContent.displayName = AlertDialogPrimitive__namespace.Content.display
|
|
|
80
80
|
var AlertDialogFooter = ({
|
|
81
81
|
className,
|
|
82
82
|
...props
|
|
83
|
-
}) => /* @__PURE__ */
|
|
83
|
+
}) => /* @__PURE__ */ React13__namespace.createElement(
|
|
84
84
|
"div",
|
|
85
85
|
{
|
|
86
|
-
className:
|
|
86
|
+
className: chunkGSOMMLCG_js.cn(
|
|
87
87
|
"sb-flex sb-flex-col-reverse sm:sb-flex-row sm:sb-justify-end sm:sb-space-x-2",
|
|
88
88
|
className
|
|
89
89
|
),
|
|
@@ -91,39 +91,39 @@ var AlertDialogFooter = ({
|
|
|
91
91
|
}
|
|
92
92
|
);
|
|
93
93
|
AlertDialogFooter.displayName = "AlertDialogFooter";
|
|
94
|
-
var AlertDialogTitle =
|
|
94
|
+
var AlertDialogTitle = React13__namespace.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ React13__namespace.createElement(
|
|
95
95
|
AlertDialogPrimitive__namespace.Title,
|
|
96
96
|
{
|
|
97
97
|
ref,
|
|
98
|
-
className:
|
|
98
|
+
className: chunkGSOMMLCG_js.cn("sb-text-lg sb-font-semibold", className),
|
|
99
99
|
...props
|
|
100
100
|
}
|
|
101
101
|
));
|
|
102
102
|
AlertDialogTitle.displayName = AlertDialogPrimitive__namespace.Title.displayName;
|
|
103
|
-
var AlertDialogDescription =
|
|
103
|
+
var AlertDialogDescription = React13__namespace.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ React13__namespace.createElement(
|
|
104
104
|
AlertDialogPrimitive__namespace.Description,
|
|
105
105
|
{
|
|
106
106
|
ref,
|
|
107
|
-
className:
|
|
107
|
+
className: chunkGSOMMLCG_js.cn("sb-text-sm sb-text-muted-foreground", className),
|
|
108
108
|
...props
|
|
109
109
|
}
|
|
110
110
|
));
|
|
111
111
|
AlertDialogDescription.displayName = AlertDialogPrimitive__namespace.Description.displayName;
|
|
112
|
-
var AlertDialogAction =
|
|
112
|
+
var AlertDialogAction = React13__namespace.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ React13__namespace.createElement(
|
|
113
113
|
AlertDialogPrimitive__namespace.Action,
|
|
114
114
|
{
|
|
115
115
|
ref,
|
|
116
|
-
className:
|
|
116
|
+
className: chunkGSOMMLCG_js.cn(chunkGSOMMLCG_js.buttonVariants(), className),
|
|
117
117
|
...props
|
|
118
118
|
}
|
|
119
119
|
));
|
|
120
120
|
AlertDialogAction.displayName = AlertDialogPrimitive__namespace.Action.displayName;
|
|
121
|
-
var AlertDialogCancel =
|
|
121
|
+
var AlertDialogCancel = React13__namespace.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ React13__namespace.createElement(
|
|
122
122
|
AlertDialogPrimitive__namespace.Cancel,
|
|
123
123
|
{
|
|
124
124
|
ref,
|
|
125
|
-
className:
|
|
126
|
-
|
|
125
|
+
className: chunkGSOMMLCG_js.cn(
|
|
126
|
+
chunkGSOMMLCG_js.buttonVariants({ variant: "outline" }),
|
|
127
127
|
"sb-mt-2 sm:sb-mt-0",
|
|
128
128
|
className
|
|
129
129
|
),
|
|
@@ -131,14 +131,31 @@ var AlertDialogCancel = React15__namespace.forwardRef(({ className, ...props },
|
|
|
131
131
|
}
|
|
132
132
|
));
|
|
133
133
|
AlertDialogCancel.displayName = AlertDialogPrimitive__namespace.Cancel.displayName;
|
|
134
|
+
var Popover = PopoverPrimitive__namespace.Root;
|
|
135
|
+
var PopoverTrigger = PopoverPrimitive__namespace.Trigger;
|
|
136
|
+
var PopoverClose = PopoverPrimitive__namespace.Close;
|
|
137
|
+
var PopoverContent = React13__namespace.forwardRef(({ className, align = "center", sideOffset = 4, ...props }, ref) => /* @__PURE__ */ React13__namespace.createElement(PopoverPrimitive__namespace.Portal, null, /* @__PURE__ */ React13__namespace.createElement(
|
|
138
|
+
PopoverPrimitive__namespace.Content,
|
|
139
|
+
{
|
|
140
|
+
ref,
|
|
141
|
+
align,
|
|
142
|
+
sideOffset,
|
|
143
|
+
className: chunkGSOMMLCG_js.cn(
|
|
144
|
+
"sb-z-50 sb-w-72 sb-font-roboto sb-rounded-md sb-border sb-bg-popover sb-p-4 sb-text-popover-foreground sb-shadow-md sb-outline-none data-[state=open]:sb-animate-in data-[state=closed]:sb-animate-out data-[state=closed]:sb-fade-out-0 data-[state=open]:sb-fade-in-0 data-[state=closed]:sb-zoom-out-95 data-[state=open]:sb-zoom-in-95 data-[side=bottom]:sb-slide-in-from-top-2 data-[side=left]:sb-slide-in-from-right-2 data-[side=right]:sb-slide-in-from-left-2 data-[side=top]:sb-slide-in-from-bottom-2",
|
|
145
|
+
className
|
|
146
|
+
),
|
|
147
|
+
...props
|
|
148
|
+
}
|
|
149
|
+
)));
|
|
150
|
+
PopoverContent.displayName = PopoverPrimitive__namespace.Content.displayName;
|
|
134
151
|
var labelVariants = classVarianceAuthority.cva(
|
|
135
152
|
"sb-text-sm sb-font-medium sb-font-roboto sb-leading-none peer-disabled:sb-cursor-not-allowed peer-disabled:sb-opacity-70"
|
|
136
153
|
);
|
|
137
|
-
var Label =
|
|
154
|
+
var Label = React13__namespace.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ React13__namespace.createElement(
|
|
138
155
|
LabelPrimitive__namespace.Root,
|
|
139
156
|
{
|
|
140
157
|
ref,
|
|
141
|
-
className:
|
|
158
|
+
className: chunkGSOMMLCG_js.cn(labelVariants(), className),
|
|
142
159
|
...props
|
|
143
160
|
}
|
|
144
161
|
));
|
|
@@ -146,17 +163,17 @@ Label.displayName = LabelPrimitive__namespace.Root.displayName;
|
|
|
146
163
|
|
|
147
164
|
// src/components/ui/form.tsx
|
|
148
165
|
var Form = reactHookForm.FormProvider;
|
|
149
|
-
var FormFieldContext =
|
|
166
|
+
var FormFieldContext = React13__namespace.createContext(
|
|
150
167
|
{}
|
|
151
168
|
);
|
|
152
169
|
var FormField = ({
|
|
153
170
|
...props
|
|
154
171
|
}) => {
|
|
155
|
-
return /* @__PURE__ */
|
|
172
|
+
return /* @__PURE__ */ React13__namespace.createElement(FormFieldContext.Provider, { value: { name: props.name } }, /* @__PURE__ */ React13__namespace.createElement(reactHookForm.Controller, { ...props }));
|
|
156
173
|
};
|
|
157
174
|
var useFormField = () => {
|
|
158
|
-
const fieldContext =
|
|
159
|
-
const itemContext =
|
|
175
|
+
const fieldContext = React13__namespace.useContext(FormFieldContext);
|
|
176
|
+
const itemContext = React13__namespace.useContext(FormItemContext);
|
|
160
177
|
const { getFieldState, formState } = reactHookForm.useFormContext();
|
|
161
178
|
const fieldState = getFieldState(fieldContext.name, formState);
|
|
162
179
|
if (!fieldContext) {
|
|
@@ -172,30 +189,30 @@ var useFormField = () => {
|
|
|
172
189
|
...fieldState
|
|
173
190
|
};
|
|
174
191
|
};
|
|
175
|
-
var FormItemContext =
|
|
192
|
+
var FormItemContext = React13__namespace.createContext(
|
|
176
193
|
{}
|
|
177
194
|
);
|
|
178
|
-
var FormItem =
|
|
179
|
-
const id =
|
|
180
|
-
return /* @__PURE__ */
|
|
195
|
+
var FormItem = React13__namespace.forwardRef(({ className, ...props }, ref) => {
|
|
196
|
+
const id = React13__namespace.useId();
|
|
197
|
+
return /* @__PURE__ */ React13__namespace.createElement(FormItemContext.Provider, { value: { id } }, /* @__PURE__ */ React13__namespace.createElement("div", { ref, className: chunkGSOMMLCG_js.cn("sb-space-y-2", className), ...props }));
|
|
181
198
|
});
|
|
182
199
|
FormItem.displayName = "FormItem";
|
|
183
|
-
var FormLabel =
|
|
200
|
+
var FormLabel = React13__namespace.forwardRef(({ className, ...props }, ref) => {
|
|
184
201
|
const { error, formItemId } = useFormField();
|
|
185
|
-
return /* @__PURE__ */
|
|
202
|
+
return /* @__PURE__ */ React13__namespace.createElement(
|
|
186
203
|
Label,
|
|
187
204
|
{
|
|
188
205
|
ref,
|
|
189
|
-
className:
|
|
206
|
+
className: chunkGSOMMLCG_js.cn(error && "sb-text-destructive", className),
|
|
190
207
|
htmlFor: formItemId,
|
|
191
208
|
...props
|
|
192
209
|
}
|
|
193
210
|
);
|
|
194
211
|
});
|
|
195
212
|
FormLabel.displayName = "FormLabel";
|
|
196
|
-
var FormControl =
|
|
213
|
+
var FormControl = React13__namespace.forwardRef(({ ...props }, ref) => {
|
|
197
214
|
const { error, formItemId, formDescriptionId, formMessageId } = useFormField();
|
|
198
|
-
return /* @__PURE__ */
|
|
215
|
+
return /* @__PURE__ */ React13__namespace.createElement(
|
|
199
216
|
reactSlot.Slot,
|
|
200
217
|
{
|
|
201
218
|
ref,
|
|
@@ -207,14 +224,14 @@ var FormControl = React15__namespace.forwardRef(({ ...props }, ref) => {
|
|
|
207
224
|
);
|
|
208
225
|
});
|
|
209
226
|
FormControl.displayName = "FormControl";
|
|
210
|
-
var FormDescription =
|
|
227
|
+
var FormDescription = React13__namespace.forwardRef(({ className, ...props }, ref) => {
|
|
211
228
|
const { formDescriptionId } = useFormField();
|
|
212
|
-
return /* @__PURE__ */
|
|
229
|
+
return /* @__PURE__ */ React13__namespace.createElement(
|
|
213
230
|
"p",
|
|
214
231
|
{
|
|
215
232
|
ref,
|
|
216
233
|
id: formDescriptionId,
|
|
217
|
-
className:
|
|
234
|
+
className: chunkGSOMMLCG_js.cn(
|
|
218
235
|
"sb-text-sm sb-font-roboto sb-text-muted-foreground",
|
|
219
236
|
className
|
|
220
237
|
),
|
|
@@ -223,18 +240,18 @@ var FormDescription = React15__namespace.forwardRef(({ className, ...props }, re
|
|
|
223
240
|
);
|
|
224
241
|
});
|
|
225
242
|
FormDescription.displayName = "FormDescription";
|
|
226
|
-
var FormMessage =
|
|
243
|
+
var FormMessage = React13__namespace.forwardRef(({ className, children, ...props }, ref) => {
|
|
227
244
|
const { error, formMessageId } = useFormField();
|
|
228
245
|
const body = error ? String(error?.message) : children;
|
|
229
246
|
if (!body) {
|
|
230
247
|
return null;
|
|
231
248
|
}
|
|
232
|
-
return /* @__PURE__ */
|
|
249
|
+
return /* @__PURE__ */ React13__namespace.createElement(
|
|
233
250
|
"p",
|
|
234
251
|
{
|
|
235
252
|
ref,
|
|
236
253
|
id: formMessageId,
|
|
237
|
-
className:
|
|
254
|
+
className: chunkGSOMMLCG_js.cn(
|
|
238
255
|
"sb-text-sm sb-font-roboto sb-font-medium sb-text-destructive",
|
|
239
256
|
className
|
|
240
257
|
),
|
|
@@ -244,29 +261,12 @@ var FormMessage = React15__namespace.forwardRef(({ className, children, ...props
|
|
|
244
261
|
);
|
|
245
262
|
});
|
|
246
263
|
FormMessage.displayName = "FormMessage";
|
|
247
|
-
var Popover = PopoverPrimitive__namespace.Root;
|
|
248
|
-
var PopoverTrigger = PopoverPrimitive__namespace.Trigger;
|
|
249
|
-
var PopoverClose = PopoverPrimitive__namespace.Close;
|
|
250
|
-
var PopoverContent = React15__namespace.forwardRef(({ className, align = "center", sideOffset = 4, ...props }, ref) => /* @__PURE__ */ React15__namespace.createElement(PopoverPrimitive__namespace.Portal, null, /* @__PURE__ */ React15__namespace.createElement(
|
|
251
|
-
PopoverPrimitive__namespace.Content,
|
|
252
|
-
{
|
|
253
|
-
ref,
|
|
254
|
-
align,
|
|
255
|
-
sideOffset,
|
|
256
|
-
className: chunk3S4FFEHM_js.cn(
|
|
257
|
-
"sb-z-50 sb-w-72 sb-font-roboto sb-rounded-md sb-border sb-bg-popover sb-p-4 sb-text-popover-foreground sb-shadow-md sb-outline-none data-[state=open]:sb-animate-in data-[state=closed]:sb-animate-out data-[state=closed]:sb-fade-out-0 data-[state=open]:sb-fade-in-0 data-[state=closed]:sb-zoom-out-95 data-[state=open]:sb-zoom-in-95 data-[side=bottom]:sb-slide-in-from-top-2 data-[side=left]:sb-slide-in-from-right-2 data-[side=right]:sb-slide-in-from-left-2 data-[side=top]:sb-slide-in-from-bottom-2",
|
|
258
|
-
className
|
|
259
|
-
),
|
|
260
|
-
...props
|
|
261
|
-
}
|
|
262
|
-
)));
|
|
263
|
-
PopoverContent.displayName = PopoverPrimitive__namespace.Content.displayName;
|
|
264
264
|
var Tabs = TabsPrimitive__namespace.Root;
|
|
265
|
-
var TabsList =
|
|
265
|
+
var TabsList = React13__namespace.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ React13__namespace.createElement(
|
|
266
266
|
TabsPrimitive__namespace.List,
|
|
267
267
|
{
|
|
268
268
|
ref,
|
|
269
|
-
className:
|
|
269
|
+
className: chunkGSOMMLCG_js.cn(
|
|
270
270
|
"sb-flex sb-items-center sb-border-b sb-px-4 sb-space-x-6",
|
|
271
271
|
className
|
|
272
272
|
),
|
|
@@ -274,11 +274,11 @@ var TabsList = React15__namespace.forwardRef(({ className, ...props }, ref) => /
|
|
|
274
274
|
}
|
|
275
275
|
));
|
|
276
276
|
TabsList.displayName = TabsPrimitive__namespace.List.displayName;
|
|
277
|
-
var TabsTrigger =
|
|
277
|
+
var TabsTrigger = React13__namespace.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ React13__namespace.createElement(
|
|
278
278
|
TabsPrimitive__namespace.Trigger,
|
|
279
279
|
{
|
|
280
280
|
ref,
|
|
281
|
-
className:
|
|
281
|
+
className: chunkGSOMMLCG_js.cn(
|
|
282
282
|
"sb-inline-flex sb-font-roboto sb-items-center sb-justify-center sb-whitespace-nowrap sb-py-3 sb-text-sm sb-font-medium sb-transition-all focus-visible:sb-outline-none disabled:sb-pointer-events-none disabled:sb-opacity-50 data-[state=active]:sb-border-black sb-border-b-2 sb-border-transparent data-[state=active]:sb-text-foreground sb-text-muted-foreground",
|
|
283
283
|
className
|
|
284
284
|
),
|
|
@@ -286,11 +286,11 @@ var TabsTrigger = React15__namespace.forwardRef(({ className, ...props }, ref) =
|
|
|
286
286
|
}
|
|
287
287
|
));
|
|
288
288
|
TabsTrigger.displayName = TabsPrimitive__namespace.Trigger.displayName;
|
|
289
|
-
var TabsContent =
|
|
289
|
+
var TabsContent = React13__namespace.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ React13__namespace.createElement(
|
|
290
290
|
TabsPrimitive__namespace.Content,
|
|
291
291
|
{
|
|
292
292
|
ref,
|
|
293
|
-
className:
|
|
293
|
+
className: chunkGSOMMLCG_js.cn(
|
|
294
294
|
"sb-ring-offset-background sb-font-roboto focus-visible:sb-outline-none focus-visible:sb-ring-2 focus-visible:sb-ring-ring focus-visible:sb-ring-offset-2",
|
|
295
295
|
className
|
|
296
296
|
),
|
|
@@ -300,19 +300,19 @@ var TabsContent = React15__namespace.forwardRef(({ className, ...props }, ref) =
|
|
|
300
300
|
TabsContent.displayName = TabsPrimitive__namespace.Content.displayName;
|
|
301
301
|
var Image = (props) => {
|
|
302
302
|
if (typeof NextImage__default.default !== "undefined") {
|
|
303
|
-
return /* @__PURE__ */
|
|
303
|
+
return /* @__PURE__ */ React13__namespace.createElement(NextImage__default.default.default, { ...props });
|
|
304
304
|
}
|
|
305
|
-
return /* @__PURE__ */
|
|
305
|
+
return /* @__PURE__ */ React13__namespace.createElement("img", { ...props });
|
|
306
306
|
};
|
|
307
307
|
|
|
308
308
|
// src/components/ui/media-input.tsx
|
|
309
309
|
var MediaInput = (props) => {
|
|
310
310
|
const { onFilesChange, limit = 32, multiple = false, onError } = props;
|
|
311
|
-
const id =
|
|
312
|
-
const [queue, setQueue] =
|
|
313
|
-
const [sources, setSources] =
|
|
311
|
+
const id = React13__namespace.useId();
|
|
312
|
+
const [queue, setQueue] = React13__namespace.useState([]);
|
|
313
|
+
const [sources, setSources] = React13__namespace.useState(props.files ?? []);
|
|
314
314
|
const maxConcurrentUploads = 3;
|
|
315
|
-
const uploadingCountRef =
|
|
315
|
+
const uploadingCountRef = React13__namespace.useRef(0);
|
|
316
316
|
const handleFilesAdd = async (e) => {
|
|
317
317
|
const files = e.target.files;
|
|
318
318
|
if (!files || files.length === 0) {
|
|
@@ -383,7 +383,7 @@ var MediaInput = (props) => {
|
|
|
383
383
|
body: JSON.stringify({ src })
|
|
384
384
|
});
|
|
385
385
|
};
|
|
386
|
-
return /* @__PURE__ */
|
|
386
|
+
return /* @__PURE__ */ React13__namespace.createElement("div", { className: chunkGSOMMLCG_js.cn("flex flex-wrap gap-4", props.className) }, sources.map((src) => /* @__PURE__ */ React13__namespace.createElement(MediaInputItem, { key: src, className: chunkGSOMMLCG_js.cn("group", props.itemClassName) }, /* @__PURE__ */ React13__namespace.createElement(
|
|
387
387
|
Image,
|
|
388
388
|
{
|
|
389
389
|
src,
|
|
@@ -391,34 +391,34 @@ var MediaInput = (props) => {
|
|
|
391
391
|
fill: true,
|
|
392
392
|
className: "sb-absolute sb-inset-0 sb-object-cover sb-pointer-events-none"
|
|
393
393
|
}
|
|
394
|
-
), /* @__PURE__ */
|
|
394
|
+
), /* @__PURE__ */ React13__namespace.createElement("div", { className: "sb-absolute sb-right-1 sb-top-1 sb-z-30 sb-flex sb-items-center sb-justify-end sb-gap-3 sb-opacity-0 sb-transition-opacity group-hover:sb-opacity-100" }, /* @__PURE__ */ React13__namespace.createElement(
|
|
395
395
|
"button",
|
|
396
396
|
{
|
|
397
397
|
className: "sb-flex sb-h-8 sb-w-8 sb-items-center sb-justify-center sb-rounded-full sb-border sb-bg-secondary sb-text-secondary-foreground sb-opacity-90 sb-shadow sb-transition-opacity hover:sb-opacity-100",
|
|
398
398
|
onClick: () => handleSourceDelete(src)
|
|
399
399
|
},
|
|
400
|
-
/* @__PURE__ */
|
|
401
|
-
)))), queue.map((_, i) => /* @__PURE__ */
|
|
400
|
+
/* @__PURE__ */ React13__namespace.createElement(lucideReact.Trash2Icon, { className: "sb-h-4 sb-w-4" })
|
|
401
|
+
)))), queue.map((_, i) => /* @__PURE__ */ React13__namespace.createElement(
|
|
402
402
|
MediaInputItem,
|
|
403
403
|
{
|
|
404
404
|
key: i,
|
|
405
|
-
className:
|
|
405
|
+
className: chunkGSOMMLCG_js.cn(
|
|
406
406
|
"sb-flex sb-h-28 sb-w-28 sb-items-center sb-justify-center",
|
|
407
407
|
props.itemClassName
|
|
408
408
|
)
|
|
409
409
|
},
|
|
410
|
-
/* @__PURE__ */
|
|
411
|
-
)), multiple || !multiple && !sources.length && !queue.length ? /* @__PURE__ */
|
|
410
|
+
/* @__PURE__ */ React13__namespace.createElement(lucideReact.Loader2Icon, { className: "sb-h-6 sb-w-6 sb-animate-spin" })
|
|
411
|
+
)), multiple || !multiple && !sources.length && !queue.length ? /* @__PURE__ */ React13__namespace.createElement(
|
|
412
412
|
"label",
|
|
413
413
|
{
|
|
414
414
|
htmlFor: id,
|
|
415
|
-
className:
|
|
415
|
+
className: chunkGSOMMLCG_js.cn(
|
|
416
416
|
"sb-flex sb-h-28 sb-w-28 sb-cursor-pointer sb-items-center sb-justify-center sb-rounded-lg sb-border",
|
|
417
417
|
props.itemClassName
|
|
418
418
|
)
|
|
419
419
|
},
|
|
420
|
-
/* @__PURE__ */
|
|
421
|
-
/* @__PURE__ */
|
|
420
|
+
/* @__PURE__ */ React13__namespace.createElement(lucideReact.PlusIcon, { className: "sb-h-6 sb-w-6" }),
|
|
421
|
+
/* @__PURE__ */ React13__namespace.createElement(
|
|
422
422
|
"input",
|
|
423
423
|
{
|
|
424
424
|
id,
|
|
@@ -432,10 +432,10 @@ var MediaInput = (props) => {
|
|
|
432
432
|
) : null);
|
|
433
433
|
};
|
|
434
434
|
var MediaInputItem = (props) => {
|
|
435
|
-
return /* @__PURE__ */
|
|
435
|
+
return /* @__PURE__ */ React13__namespace.createElement(
|
|
436
436
|
"div",
|
|
437
437
|
{
|
|
438
|
-
className:
|
|
438
|
+
className: chunkGSOMMLCG_js.cn(
|
|
439
439
|
"sb-relative sb-h-28 sb-w-28 sb-overflow-hidden sb-rounded-lg sb-border",
|
|
440
440
|
props.className
|
|
441
441
|
)
|
|
@@ -475,38 +475,38 @@ var BackgroundPicker = (props) => {
|
|
|
475
475
|
"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)",
|
|
476
476
|
"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)"
|
|
477
477
|
];
|
|
478
|
-
const defaultTab =
|
|
478
|
+
const defaultTab = React13__namespace.useMemo(() => {
|
|
479
479
|
if (background.includes("url"))
|
|
480
480
|
return "image";
|
|
481
481
|
if (background.includes("gradient"))
|
|
482
482
|
return "gradient";
|
|
483
483
|
return "solid";
|
|
484
484
|
}, [background]);
|
|
485
|
-
return /* @__PURE__ */
|
|
486
|
-
|
|
485
|
+
return /* @__PURE__ */ React13__namespace.createElement(Popover, null, /* @__PURE__ */ React13__namespace.createElement(PopoverTrigger, { asChild: true }, /* @__PURE__ */ React13__namespace.createElement(
|
|
486
|
+
chunkGSOMMLCG_js.Button,
|
|
487
487
|
{
|
|
488
488
|
variant: "outline",
|
|
489
489
|
size: "sm",
|
|
490
|
-
className:
|
|
490
|
+
className: chunkGSOMMLCG_js.cn(
|
|
491
491
|
"sb-justify-start sb-text-left sb-font-normal sb-normal-case sb-w-full",
|
|
492
492
|
!background && "sb-text-muted-foreground",
|
|
493
493
|
className
|
|
494
494
|
)
|
|
495
495
|
},
|
|
496
|
-
/* @__PURE__ */
|
|
496
|
+
/* @__PURE__ */ React13__namespace.createElement("div", { className: "sb-w-full sb-flex sb-items-center sb-gap-2" }, background ? /* @__PURE__ */ React13__namespace.createElement(
|
|
497
497
|
"div",
|
|
498
498
|
{
|
|
499
499
|
className: "sb-h-4 sb-w-4 sb-rounded !sb-bg-center !sb-bg-cover sb-transition-all sb-border",
|
|
500
500
|
style: { background }
|
|
501
501
|
}
|
|
502
|
-
) : /* @__PURE__ */
|
|
503
|
-
)), /* @__PURE__ */
|
|
502
|
+
) : /* @__PURE__ */ React13__namespace.createElement(lucideReact.PaintbrushIcon, { className: "sb-h-4 sb-w-4" }), /* @__PURE__ */ React13__namespace.createElement("div", { className: "sb-truncate sb-flex-1" }, background ? background : "Kies een achtergrond"))
|
|
503
|
+
)), /* @__PURE__ */ React13__namespace.createElement(PopoverContent, { className: "sb-w-64 sb-p-0" }, /* @__PURE__ */ React13__namespace.createElement(Tabs, { defaultValue: defaultTab }, /* @__PURE__ */ React13__namespace.createElement(TabsList, { className: "sb-w-full" }, /* @__PURE__ */ React13__namespace.createElement(TabsTrigger, { className: "sb-flex-1", value: "solid" }, "Solid"), /* @__PURE__ */ React13__namespace.createElement(TabsTrigger, { className: "sb-flex-1", value: "gradient" }, "Gradient"), /* @__PURE__ */ React13__namespace.createElement(TabsTrigger, { className: "sb-flex-1", value: "image" }, "Image")), /* @__PURE__ */ React13__namespace.createElement(
|
|
504
504
|
TabsContent,
|
|
505
505
|
{
|
|
506
506
|
value: "solid",
|
|
507
507
|
className: "data-[state=active]:sb-flex sb-flex-wrap sb-gap-1 sb-p-4"
|
|
508
508
|
},
|
|
509
|
-
solids.map((s) => /* @__PURE__ */
|
|
509
|
+
solids.map((s) => /* @__PURE__ */ React13__namespace.createElement(
|
|
510
510
|
"div",
|
|
511
511
|
{
|
|
512
512
|
key: s,
|
|
@@ -515,13 +515,13 @@ var BackgroundPicker = (props) => {
|
|
|
515
515
|
onClick: () => onBackgroundChange(s)
|
|
516
516
|
}
|
|
517
517
|
))
|
|
518
|
-
), /* @__PURE__ */
|
|
518
|
+
), /* @__PURE__ */ React13__namespace.createElement(
|
|
519
519
|
TabsContent,
|
|
520
520
|
{
|
|
521
521
|
value: "gradient",
|
|
522
522
|
className: "data-[state=active]:sb-flex sb-flex-wrap sb-gap-1 sb-p-4"
|
|
523
523
|
},
|
|
524
|
-
gradients.map((s) => /* @__PURE__ */
|
|
524
|
+
gradients.map((s) => /* @__PURE__ */ React13__namespace.createElement(
|
|
525
525
|
"div",
|
|
526
526
|
{
|
|
527
527
|
key: s,
|
|
@@ -530,7 +530,7 @@ var BackgroundPicker = (props) => {
|
|
|
530
530
|
onClick: () => onBackgroundChange(s)
|
|
531
531
|
}
|
|
532
532
|
))
|
|
533
|
-
), /* @__PURE__ */
|
|
533
|
+
), /* @__PURE__ */ React13__namespace.createElement(TabsContent, { value: "image" }, /* @__PURE__ */ React13__namespace.createElement("div", { className: "sb-p-4 sb-border-b" }, /* @__PURE__ */ React13__namespace.createElement(
|
|
534
534
|
MediaInput,
|
|
535
535
|
{
|
|
536
536
|
className: "sb-grid sb-grid-cols-2 sb-gap-1",
|
|
@@ -546,7 +546,7 @@ var BackgroundPicker = (props) => {
|
|
|
546
546
|
"media-input: Error: " + e?.description
|
|
547
547
|
)
|
|
548
548
|
}
|
|
549
|
-
)), /* @__PURE__ */
|
|
549
|
+
)), /* @__PURE__ */ React13__namespace.createElement("div", { className: "sb-grid sb-grid-cols-2 sb-gap-1 sb-p-4" }, images.map((s) => /* @__PURE__ */ React13__namespace.createElement(
|
|
550
550
|
"div",
|
|
551
551
|
{
|
|
552
552
|
key: s,
|
|
@@ -556,60 +556,6 @@ var BackgroundPicker = (props) => {
|
|
|
556
556
|
}
|
|
557
557
|
)))))));
|
|
558
558
|
};
|
|
559
|
-
function Calendar({
|
|
560
|
-
className,
|
|
561
|
-
classNames,
|
|
562
|
-
showOutsideDays = true,
|
|
563
|
-
...props
|
|
564
|
-
}) {
|
|
565
|
-
return /* @__PURE__ */ React15__namespace.createElement(
|
|
566
|
-
reactDayPicker.DayPicker,
|
|
567
|
-
{
|
|
568
|
-
showOutsideDays,
|
|
569
|
-
className: chunk3S4FFEHM_js.cn("sb-p-3 sb-font-roboto", className),
|
|
570
|
-
classNames: {
|
|
571
|
-
months: "sb-flex sb-flex-col sm:sb-flex-row sb-space-y-4 sm:sb-space-x-4 sm:sb-space-y-0",
|
|
572
|
-
month: "sb-space-y-4",
|
|
573
|
-
caption: "sb-flex sb-justify-center sb-pt-1 sb-relative sb-items-center",
|
|
574
|
-
caption_label: "sb-text-sm sb-font-medium",
|
|
575
|
-
nav: "sb-space-x-1 sb-flex sb-items-center",
|
|
576
|
-
nav_button: chunk3S4FFEHM_js.cn(
|
|
577
|
-
chunk3S4FFEHM_js.buttonVariants({ variant: "outline" }),
|
|
578
|
-
"sb-h-7 sb-w-7 sb-bg-transparent sb-p-0 sb-opacity-50 hover:sb-opacity-100"
|
|
579
|
-
),
|
|
580
|
-
nav_button_previous: "sb-absolute sb-left-1",
|
|
581
|
-
nav_button_next: "sb-absolute sb-right-1",
|
|
582
|
-
table: "sb-w-full sb-border-collapse sb-space-y-1",
|
|
583
|
-
head_row: "sb-flex",
|
|
584
|
-
head_cell: "sb-text-muted-foreground sb-rounded-md sb-w-8 sb-font-normal sb-text-[0.8rem]",
|
|
585
|
-
row: "sb-flex sb-w-full sb-mt-2",
|
|
586
|
-
cell: chunk3S4FFEHM_js.cn(
|
|
587
|
-
"sb-relative sb-p-0 sb-text-center sb-text-sm focus-within:sb-relative focus-within:sb-z-20 [&:has([aria-selected])]:sb-bg-accent [&:has([aria-selected].day-outside)]:sb-bg-accent/50 [&:has([aria-selected].day-range-end)]:sb-rounded-r-md",
|
|
588
|
-
props.mode === "range" ? "[&:has(>.day-range-end)]:sb-rounded-r-md [&:has(>.day-range-start)]:sb-rounded-l-md first:[&:has([aria-selected])]:sb-rounded-l-md last:[&:has([aria-selected])]:sb-rounded-r-md" : "[&:has([aria-selected])]:sb-rounded-md"
|
|
589
|
-
),
|
|
590
|
-
day: chunk3S4FFEHM_js.cn(
|
|
591
|
-
chunk3S4FFEHM_js.buttonVariants({ variant: "ghost" }),
|
|
592
|
-
"sb-h-8 sb-w-8 sb-p-0 sb-font-normal aria-selected:sb-opacity-100"
|
|
593
|
-
),
|
|
594
|
-
day_range_start: "day-range-start",
|
|
595
|
-
day_range_end: "day-range-end",
|
|
596
|
-
day_selected: "sb-bg-primary sb-text-primary-foreground hover:sb-bg-primary hover:sb-text-primary-foreground focus:sb-bg-primary focus:sb-text-primary-foreground",
|
|
597
|
-
day_today: "sb-bg-accent sb-text-accent-foreground",
|
|
598
|
-
day_outside: "day-outside sb-text-muted-foreground sb-opacity-50 aria-selected:sb-bg-accent/50 aria-selected:sb-text-muted-foreground aria-selected:sb-opacity-30",
|
|
599
|
-
day_disabled: "sb-text-muted-foreground sb-opacity-50",
|
|
600
|
-
day_range_middle: "aria-selected:sb-bg-accent aria-selected:sb-text-accent-foreground",
|
|
601
|
-
day_hidden: "invisible",
|
|
602
|
-
...classNames
|
|
603
|
-
},
|
|
604
|
-
components: {
|
|
605
|
-
IconLeft: () => /* @__PURE__ */ React15__namespace.createElement(lucideReact.ChevronLeftIcon, { className: "sb-h-4 sb-w-4" }),
|
|
606
|
-
IconRight: () => /* @__PURE__ */ React15__namespace.createElement(lucideReact.ChevronRightIcon, { className: "sb-h-4 sb-w-4" })
|
|
607
|
-
},
|
|
608
|
-
...props
|
|
609
|
-
}
|
|
610
|
-
);
|
|
611
|
-
}
|
|
612
|
-
Calendar.displayName = "Calendar";
|
|
613
559
|
var ColorPicker = (props) => {
|
|
614
560
|
const { color, onColorChange, className } = props;
|
|
615
561
|
const colors = props.colors ?? [
|
|
@@ -623,25 +569,25 @@ var ColorPicker = (props) => {
|
|
|
623
569
|
"#009DD1",
|
|
624
570
|
"#FF0000"
|
|
625
571
|
];
|
|
626
|
-
return /* @__PURE__ */
|
|
627
|
-
|
|
572
|
+
return /* @__PURE__ */ React13__namespace.createElement(Popover, null, /* @__PURE__ */ React13__namespace.createElement(PopoverTrigger, { asChild: true }, /* @__PURE__ */ React13__namespace.createElement(
|
|
573
|
+
chunkGSOMMLCG_js.Button,
|
|
628
574
|
{
|
|
629
575
|
variant: "outline",
|
|
630
576
|
size: "sm",
|
|
631
|
-
className:
|
|
577
|
+
className: chunkGSOMMLCG_js.cn(
|
|
632
578
|
"sb-justify-start sb-text-left sb-font-normal sb-normal-case sb-w-full",
|
|
633
579
|
!color && "sb-text-muted-foreground",
|
|
634
580
|
className
|
|
635
581
|
)
|
|
636
582
|
},
|
|
637
|
-
/* @__PURE__ */
|
|
583
|
+
/* @__PURE__ */ React13__namespace.createElement("div", { className: "sb-w-full sb-flex sb-items-center sb-gap-2" }, color ? /* @__PURE__ */ React13__namespace.createElement(
|
|
638
584
|
"div",
|
|
639
585
|
{
|
|
640
586
|
className: "sb-h-4 sb-w-4 sb-rounded !sb-bg-center !sb-bg-cover sb-transition-all sb-border",
|
|
641
587
|
style: { background: color }
|
|
642
588
|
}
|
|
643
|
-
) : /* @__PURE__ */
|
|
644
|
-
)), /* @__PURE__ */
|
|
589
|
+
) : /* @__PURE__ */ React13__namespace.createElement(lucideReact.PaintbrushIcon, { className: "sb-h-4 sb-w-4" }), /* @__PURE__ */ React13__namespace.createElement("div", { className: "sb-truncate sb-flex-1" }, color ? color : "Kies een kleur"))
|
|
590
|
+
)), /* @__PURE__ */ React13__namespace.createElement(PopoverContent, { className: "sb-w-64 sb-p-4 sb-flex sb-flex-wrap sb-gap-1" }, colors.map((s) => /* @__PURE__ */ React13__namespace.createElement(
|
|
645
591
|
"div",
|
|
646
592
|
{
|
|
647
593
|
key: s,
|
|
@@ -651,13 +597,13 @@ var ColorPicker = (props) => {
|
|
|
651
597
|
}
|
|
652
598
|
))));
|
|
653
599
|
};
|
|
654
|
-
var Input =
|
|
600
|
+
var Input = React13__namespace.forwardRef(
|
|
655
601
|
({ className, type, ...props }, ref) => {
|
|
656
|
-
return /* @__PURE__ */
|
|
602
|
+
return /* @__PURE__ */ React13__namespace.createElement(
|
|
657
603
|
"input",
|
|
658
604
|
{
|
|
659
605
|
type,
|
|
660
|
-
className:
|
|
606
|
+
className: chunkGSOMMLCG_js.cn(
|
|
661
607
|
"sb-flex sb-h-8 sb-w-full sb-font-roboto sb-rounded-md sb-border sb-border-input sb-bg-background sb-px-3 sb-py-1 sb-text-sm sb-ring-offset-background file:sb-border-0 file:sb-bg-transparent file:sb-text-sm file:sb-font-medium placeholder:sb-text-muted-foreground focus-visible:sb-outline-none focus-visible:sb-ring-1 focus-visible:ring-sb-ring focus-visible:sb-ring-offset-2 disabled:sb-cursor-not-allowed disabled:sb-opacity-50",
|
|
662
608
|
className
|
|
663
609
|
),
|
|
@@ -668,48 +614,32 @@ var Input = React15__namespace.forwardRef(
|
|
|
668
614
|
}
|
|
669
615
|
);
|
|
670
616
|
Input.displayName = "Input";
|
|
671
|
-
var AdvancedInput =
|
|
617
|
+
var AdvancedInput = React13__namespace.forwardRef(
|
|
672
618
|
({ prepend, append, ...props }, ref) => {
|
|
673
|
-
return /* @__PURE__ */
|
|
619
|
+
return /* @__PURE__ */ React13__namespace.createElement("div", { className: "sb-relative" }, /* @__PURE__ */ React13__namespace.createElement(Input, { ref, className: "sb-pl-9 sb-pr-7 sb-text-right", ...props }), prepend && /* @__PURE__ */ React13__namespace.createElement("div", { className: "sb-absolute sb-font-roboto sb-top-1/2 sb-left-3 sb--translate-y-1/2" }, prepend), append && /* @__PURE__ */ React13__namespace.createElement("div", { className: "sb-absolute sb-font-roboto sb-top-1/2 sb-right-3 sb--translate-y-1/2" }, append));
|
|
674
620
|
}
|
|
675
621
|
);
|
|
676
622
|
AdvancedInput.displayName = "AdvancedInput";
|
|
677
|
-
var Switch =
|
|
623
|
+
var Switch = React13__namespace.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ React13__namespace.createElement(
|
|
678
624
|
SwitchPrimitives__namespace.Root,
|
|
679
625
|
{
|
|
680
|
-
className:
|
|
626
|
+
className: chunkGSOMMLCG_js.cn(
|
|
681
627
|
"peer sb-inline-flex sb-h-6 sb-w-11 sb-shrink-0 sb-cursor-pointer sb-items-center sb-rounded-full sb-border-2 sb-border-transparent sb-transition-colors focus-visible:sb-outline-none focus-visible:sb-ring-2 focus-visible:sb-ring-ring focus-visible:sb-ring-offset-2 focus-visible:sb-ring-offset-background disabled:sb-cursor-not-allowed disabled:sb-opacity-50 data-[state=checked]:sb-bg-primary data-[state=unchecked]:sb-bg-input",
|
|
682
628
|
className
|
|
683
629
|
),
|
|
684
630
|
...props,
|
|
685
631
|
ref
|
|
686
632
|
},
|
|
687
|
-
/* @__PURE__ */
|
|
633
|
+
/* @__PURE__ */ React13__namespace.createElement(
|
|
688
634
|
SwitchPrimitives__namespace.Thumb,
|
|
689
635
|
{
|
|
690
|
-
className:
|
|
636
|
+
className: chunkGSOMMLCG_js.cn(
|
|
691
637
|
"sb-pointer-events-none sb-block sb-h-5 sb-w-5 sb-rounded-full sb-bg-background sb-shadow-lg sb-ring-0 sb-transition-transform data-[state=checked]:sb-translate-x-5 data-[state=unchecked]:sb-translate-x-0"
|
|
692
638
|
)
|
|
693
639
|
}
|
|
694
640
|
)
|
|
695
641
|
));
|
|
696
642
|
Switch.displayName = SwitchPrimitives__namespace.Root.displayName;
|
|
697
|
-
var Textarea = React15__namespace.forwardRef(
|
|
698
|
-
({ className, ...props }, ref) => {
|
|
699
|
-
return /* @__PURE__ */ React15__namespace.createElement(
|
|
700
|
-
"textarea",
|
|
701
|
-
{
|
|
702
|
-
className: chunk3S4FFEHM_js.cn(
|
|
703
|
-
"sb-flex sb-min-h-[60px] sb-font-roboto sb-w-full sb-rounded-md sb-border sb-border-input sb-bg-transparent sb-px-3 sb-py-2 sb-text-sm sb-shadow-sm placeholder:sb-text-muted-foreground focus-visible:sb-outline-none focus-visible:sb-ring-1 focus-visible:sb-ring-ring disabled:sb-cursor-not-allowed disabled:sb-opacity-50",
|
|
704
|
-
className
|
|
705
|
-
),
|
|
706
|
-
ref,
|
|
707
|
-
...props
|
|
708
|
-
}
|
|
709
|
-
);
|
|
710
|
-
}
|
|
711
|
-
);
|
|
712
|
-
Textarea.displayName = "Textarea";
|
|
713
643
|
var toggleVariants = classVarianceAuthority.cva(
|
|
714
644
|
"sb-inline-flex sb-items-center sb-justify-center sb-rounded-md sb-text-sm sb-font-medium sb-ring-offset-background sb-transition-colors hover:sb-bg-muted hover:sb-text-muted-foreground focus-visible:sb-outline-none focus-visible:sb-ring-1 focus-visible:sb-ring-ring focus-visible:sb-ring-offset-2 disabled:sb-pointer-events-none disabled:sb-opacity-50 data-[state=on]:sb-bg-accent data-[state=on]:sb-text-accent-foreground",
|
|
715
645
|
{
|
|
@@ -730,102 +660,17 @@ var toggleVariants = classVarianceAuthority.cva(
|
|
|
730
660
|
}
|
|
731
661
|
}
|
|
732
662
|
);
|
|
733
|
-
var Toggle =
|
|
663
|
+
var Toggle = React13__namespace.forwardRef(({ className, variant, size, ...props }, ref) => /* @__PURE__ */ React13__namespace.createElement(
|
|
734
664
|
TogglePrimitive__namespace.Root,
|
|
735
665
|
{
|
|
736
666
|
ref,
|
|
737
|
-
className:
|
|
667
|
+
className: chunkGSOMMLCG_js.cn(toggleVariants({ variant, size, className })),
|
|
738
668
|
...props
|
|
739
669
|
}
|
|
740
670
|
));
|
|
741
671
|
Toggle.displayName = TogglePrimitive__namespace.Root.displayName;
|
|
742
672
|
|
|
743
|
-
// src/components/
|
|
744
|
-
var ContainerItemToolbar = (props) => {
|
|
745
|
-
const { contentId, canBringUp = false, canBringDown = false } = props;
|
|
746
|
-
const { bringUp, bringDown } = chunk3S4FFEHM_js.useBuilder();
|
|
747
|
-
return /* @__PURE__ */ React15__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__ */ React15__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__ */ React15__namespace.createElement(EditButton, { id: contentId }), /* @__PURE__ */ React15__namespace.createElement(
|
|
748
|
-
chunk3S4FFEHM_js.Button,
|
|
749
|
-
{
|
|
750
|
-
variant: "ghost",
|
|
751
|
-
className: "sb-w-8 sb-h-8 sb-p-0",
|
|
752
|
-
onClick: () => bringUp(contentId),
|
|
753
|
-
disabled: !canBringUp
|
|
754
|
-
},
|
|
755
|
-
/* @__PURE__ */ React15__namespace.createElement(lucideReact.ArrowUp, { className: "sb-h-5 sb-w-5" })
|
|
756
|
-
), /* @__PURE__ */ React15__namespace.createElement(
|
|
757
|
-
chunk3S4FFEHM_js.Button,
|
|
758
|
-
{
|
|
759
|
-
variant: "ghost",
|
|
760
|
-
className: "sb-w-8 sb-h-8 sb-p-0",
|
|
761
|
-
onClick: () => bringDown(contentId),
|
|
762
|
-
disabled: !canBringDown
|
|
763
|
-
},
|
|
764
|
-
/* @__PURE__ */ React15__namespace.createElement(lucideReact.ArrowDown, { className: "sb-h-5 sb-w-5" })
|
|
765
|
-
), /* @__PURE__ */ React15__namespace.createElement(DeleteButton, { contentId })));
|
|
766
|
-
};
|
|
767
|
-
var EditButton = ({ id }) => {
|
|
768
|
-
return /* @__PURE__ */ React15__namespace.createElement(Popover, null, /* @__PURE__ */ React15__namespace.createElement(PopoverTrigger, { asChild: true }, /* @__PURE__ */ React15__namespace.createElement(chunk3S4FFEHM_js.Button, { variant: "ghost", className: "sb-w-8 sb-h-8 sb-p-0" }, /* @__PURE__ */ React15__namespace.createElement(lucideReact.Edit2Icon, { className: "sb-h-5 sb-w-5" }))), /* @__PURE__ */ React15__namespace.createElement(
|
|
769
|
-
PopoverContent,
|
|
770
|
-
{
|
|
771
|
-
side: "left",
|
|
772
|
-
align: "start",
|
|
773
|
-
sideOffset: 16,
|
|
774
|
-
alignOffset: -8,
|
|
775
|
-
className: "sb-p-0",
|
|
776
|
-
collisionPadding: 16
|
|
777
|
-
},
|
|
778
|
-
/* @__PURE__ */ React15__namespace.createElement(EditPopoverInner, { id })
|
|
779
|
-
));
|
|
780
|
-
};
|
|
781
|
-
var EditPopoverInner = (props) => {
|
|
782
|
-
const { id } = props;
|
|
783
|
-
const { getItem } = chunk3S4FFEHM_js.useBuilder();
|
|
784
|
-
const item = getItem(id);
|
|
785
|
-
if (!item) {
|
|
786
|
-
throw new Error(
|
|
787
|
-
`[simple-builder]: Item with id ${id} not found in container item form component`
|
|
788
|
-
);
|
|
789
|
-
}
|
|
790
|
-
return /* @__PURE__ */ React15__namespace.createElement(Tabs, null, /* @__PURE__ */ React15__namespace.createElement(TabsList, { defaultValue: "content" }, /* @__PURE__ */ React15__namespace.createElement(TabsTrigger, { value: "content" }, "Inhoud"), /* @__PURE__ */ React15__namespace.createElement(TabsTrigger, { value: "design" }, "Design")), /* @__PURE__ */ React15__namespace.createElement(TabsContent, { value: "content" }, /* @__PURE__ */ React15__namespace.createElement(ContainerItemForm, { item })), /* @__PURE__ */ React15__namespace.createElement(TabsContent, { value: "design" }, /* @__PURE__ */ React15__namespace.createElement(ItemDesignForm, { item })));
|
|
791
|
-
};
|
|
792
|
-
var ContainerItemForm = (props) => {
|
|
793
|
-
const { item } = props;
|
|
794
|
-
const { patchItem } = chunk3S4FFEHM_js.useBuilder();
|
|
795
|
-
const component = chunkVMHWPKU4_js.builder.getComponent(item.component);
|
|
796
|
-
if (!component) {
|
|
797
|
-
throw new Error(
|
|
798
|
-
`[simple-builder]: Component with id ${item.component} not found in container item form component`
|
|
799
|
-
);
|
|
800
|
-
}
|
|
801
|
-
const form = reactHookForm.useForm({
|
|
802
|
-
defaultValues: (component.inputs || []).reduce(
|
|
803
|
-
(acc, input) => ({
|
|
804
|
-
...acc,
|
|
805
|
-
[input.name]: item?.props?.[input.name] ?? input.defaultValue
|
|
806
|
-
}),
|
|
807
|
-
{}
|
|
808
|
-
)
|
|
809
|
-
});
|
|
810
|
-
const onSubmit = (values) => {
|
|
811
|
-
patchItem(item.id, {
|
|
812
|
-
props: values
|
|
813
|
-
});
|
|
814
|
-
};
|
|
815
|
-
React15__namespace.useEffect(() => {
|
|
816
|
-
const subscription = form.watch(() => form.handleSubmit(onSubmit)());
|
|
817
|
-
return () => subscription.unsubscribe();
|
|
818
|
-
}, [form.watch, form.handleSubmit]);
|
|
819
|
-
return /* @__PURE__ */ React15__namespace.createElement(Form, { ...form }, /* @__PURE__ */ React15__namespace.createElement("form", { onSubmit: form.handleSubmit(onSubmit) }, /* @__PURE__ */ React15__namespace.createElement("div", { className: "sb-space-y-4 sb-p-4" }, (component.inputs || []).map((input) => /* @__PURE__ */ React15__namespace.createElement(
|
|
820
|
-
FormField,
|
|
821
|
-
{
|
|
822
|
-
key: input.name,
|
|
823
|
-
control: form.control,
|
|
824
|
-
name: input.name,
|
|
825
|
-
render: ({ field }) => /* @__PURE__ */ React15__namespace.createElement(RenderInput, { type: input.type, input, field })
|
|
826
|
-
}
|
|
827
|
-
)))));
|
|
828
|
-
};
|
|
673
|
+
// src/components/item-design-form.tsx
|
|
829
674
|
var spacingSchema = zod.z.discriminatedUnion("indipendent", [
|
|
830
675
|
zod.z.object({
|
|
831
676
|
indipendent: zod.z.literal(false),
|
|
@@ -849,9 +694,9 @@ var designSchema = zod.z.object({
|
|
|
849
694
|
});
|
|
850
695
|
var ItemDesignForm = (props) => {
|
|
851
696
|
const { item } = props;
|
|
852
|
-
const { patchItem } =
|
|
853
|
-
const initialPadding =
|
|
854
|
-
const initialMargin =
|
|
697
|
+
const { patchItem } = chunkGSOMMLCG_js.useBuilder();
|
|
698
|
+
const initialPadding = chunkGSOMMLCG_js.spacing.parse(item.styles?.padding ?? "");
|
|
699
|
+
const initialMargin = chunkGSOMMLCG_js.spacing.parse(item.styles?.margin ?? "");
|
|
855
700
|
const form = reactHookForm.useForm({
|
|
856
701
|
resolver: zod$1.zodResolver(designSchema),
|
|
857
702
|
defaultValues: {
|
|
@@ -859,7 +704,7 @@ var ItemDesignForm = (props) => {
|
|
|
859
704
|
background: item.styles?.background ?? "",
|
|
860
705
|
color: item.styles?.color ?? "",
|
|
861
706
|
padding: {
|
|
862
|
-
indipendent:
|
|
707
|
+
indipendent: chunkGSOMMLCG_js.spacing.isIndipendent(
|
|
863
708
|
item.styles?.padding ?? ""
|
|
864
709
|
),
|
|
865
710
|
horizontal: initialPadding.left,
|
|
@@ -870,7 +715,7 @@ var ItemDesignForm = (props) => {
|
|
|
870
715
|
bottom: initialPadding.bottom
|
|
871
716
|
},
|
|
872
717
|
margin: {
|
|
873
|
-
indipendent:
|
|
718
|
+
indipendent: chunkGSOMMLCG_js.spacing.isIndipendent(
|
|
874
719
|
item.styles?.margin ?? ""
|
|
875
720
|
),
|
|
876
721
|
horizontal: initialMargin.left,
|
|
@@ -896,7 +741,7 @@ var ItemDesignForm = (props) => {
|
|
|
896
741
|
}
|
|
897
742
|
});
|
|
898
743
|
};
|
|
899
|
-
|
|
744
|
+
React13__namespace.useEffect(() => {
|
|
900
745
|
const subscription = form.watch(() => form.handleSubmit(onSubmit)());
|
|
901
746
|
return () => subscription.unsubscribe();
|
|
902
747
|
}, [form.watch, form.handleSubmit]);
|
|
@@ -904,135 +749,135 @@ var ItemDesignForm = (props) => {
|
|
|
904
749
|
"padding.indipendent",
|
|
905
750
|
"margin.indipendent"
|
|
906
751
|
]);
|
|
907
|
-
return /* @__PURE__ */
|
|
752
|
+
return /* @__PURE__ */ React13__namespace.createElement(Form, { ...form }, /* @__PURE__ */ React13__namespace.createElement("form", { onSubmit: form.handleSubmit(onSubmit) }, /* @__PURE__ */ React13__namespace.createElement("div", { className: "sb-space-y-4 sb-p-4" }, /* @__PURE__ */ React13__namespace.createElement(
|
|
908
753
|
FormField,
|
|
909
754
|
{
|
|
910
755
|
control: form.control,
|
|
911
756
|
name: "background",
|
|
912
|
-
render: ({ field }) => /* @__PURE__ */
|
|
757
|
+
render: ({ field }) => /* @__PURE__ */ React13__namespace.createElement(FormItem, null, /* @__PURE__ */ React13__namespace.createElement(FormLabel, null, "Achtergrond"), /* @__PURE__ */ React13__namespace.createElement(FormControl, null, /* @__PURE__ */ React13__namespace.createElement(
|
|
913
758
|
BackgroundPicker,
|
|
914
759
|
{
|
|
915
760
|
background: field.value,
|
|
916
761
|
onBackgroundChange: field.onChange
|
|
917
762
|
}
|
|
918
|
-
)), /* @__PURE__ */
|
|
763
|
+
)), /* @__PURE__ */ React13__namespace.createElement(FormMessage, null))
|
|
919
764
|
}
|
|
920
|
-
), /* @__PURE__ */
|
|
765
|
+
), /* @__PURE__ */ React13__namespace.createElement(
|
|
921
766
|
FormField,
|
|
922
767
|
{
|
|
923
768
|
control: form.control,
|
|
924
769
|
name: "color",
|
|
925
|
-
render: ({ field }) => /* @__PURE__ */
|
|
770
|
+
render: ({ field }) => /* @__PURE__ */ React13__namespace.createElement(FormItem, null, /* @__PURE__ */ React13__namespace.createElement(FormLabel, null, "Inhoud kleur"), /* @__PURE__ */ React13__namespace.createElement(FormControl, null, /* @__PURE__ */ React13__namespace.createElement(
|
|
926
771
|
ColorPicker,
|
|
927
772
|
{
|
|
928
773
|
color: field.value,
|
|
929
774
|
onColorChange: field.onChange
|
|
930
775
|
}
|
|
931
|
-
)), /* @__PURE__ */
|
|
776
|
+
)), /* @__PURE__ */ React13__namespace.createElement(FormMessage, null))
|
|
932
777
|
}
|
|
933
|
-
), /* @__PURE__ */
|
|
778
|
+
), /* @__PURE__ */ React13__namespace.createElement("hr", null), /* @__PURE__ */ React13__namespace.createElement(
|
|
934
779
|
FormField,
|
|
935
780
|
{
|
|
936
781
|
control: form.control,
|
|
937
782
|
name: "container",
|
|
938
|
-
render: ({ field }) => /* @__PURE__ */
|
|
783
|
+
render: ({ field }) => /* @__PURE__ */ React13__namespace.createElement(FormItem, { className: "sb-flex sb-flex-row sb-items-center sb-justify-between sb-space-y-0" }, /* @__PURE__ */ React13__namespace.createElement(FormLabel, null, "Volledige breedte"), /* @__PURE__ */ React13__namespace.createElement(FormControl, null, /* @__PURE__ */ React13__namespace.createElement(
|
|
939
784
|
Switch,
|
|
940
785
|
{
|
|
941
786
|
checked: !field.value,
|
|
942
787
|
onCheckedChange: (v) => field.onChange(!v)
|
|
943
788
|
}
|
|
944
|
-
)), /* @__PURE__ */
|
|
789
|
+
)), /* @__PURE__ */ React13__namespace.createElement(FormMessage, null))
|
|
945
790
|
}
|
|
946
|
-
), /* @__PURE__ */
|
|
791
|
+
), /* @__PURE__ */ React13__namespace.createElement("hr", null), /* @__PURE__ */ React13__namespace.createElement("div", { className: "sb-space-y-2" }, /* @__PURE__ */ React13__namespace.createElement(FormLabel, null, "Padding"), /* @__PURE__ */ React13__namespace.createElement("div", { className: "sb-grid sb-grid-cols-[1fr,auto] sb-gap-3" }, /* @__PURE__ */ React13__namespace.createElement("div", { className: "sb-grid sb-grid-cols-2 sb-items-center sb-gap-3" }, !indipendentPadding ? /* @__PURE__ */ React13__namespace.createElement(React13__namespace.Fragment, null, /* @__PURE__ */ React13__namespace.createElement(
|
|
947
792
|
FormField,
|
|
948
793
|
{
|
|
949
794
|
control: form.control,
|
|
950
795
|
name: "padding.horizontal",
|
|
951
|
-
render: ({ field }) => /* @__PURE__ */
|
|
796
|
+
render: ({ field }) => /* @__PURE__ */ React13__namespace.createElement(FormItem, null, /* @__PURE__ */ React13__namespace.createElement(FormControl, null, /* @__PURE__ */ React13__namespace.createElement(
|
|
952
797
|
AdvancedInput,
|
|
953
798
|
{
|
|
954
799
|
...field,
|
|
955
|
-
prepend: /* @__PURE__ */
|
|
956
|
-
append: /* @__PURE__ */
|
|
800
|
+
prepend: /* @__PURE__ */ React13__namespace.createElement(lucideReact.AlignHorizontalSpaceAroundIcon, { className: "sb-h-4 sb-w-4" }),
|
|
801
|
+
append: /* @__PURE__ */ React13__namespace.createElement("span", { className: "sb-text-muted-foreground" }, "px")
|
|
957
802
|
}
|
|
958
803
|
)))
|
|
959
804
|
}
|
|
960
|
-
), /* @__PURE__ */
|
|
805
|
+
), /* @__PURE__ */ React13__namespace.createElement(
|
|
961
806
|
FormField,
|
|
962
807
|
{
|
|
963
808
|
control: form.control,
|
|
964
809
|
name: "padding.vertical",
|
|
965
|
-
render: ({ field }) => /* @__PURE__ */
|
|
810
|
+
render: ({ field }) => /* @__PURE__ */ React13__namespace.createElement(FormItem, null, /* @__PURE__ */ React13__namespace.createElement(FormControl, null, /* @__PURE__ */ React13__namespace.createElement(
|
|
966
811
|
AdvancedInput,
|
|
967
812
|
{
|
|
968
813
|
...field,
|
|
969
|
-
prepend: /* @__PURE__ */
|
|
970
|
-
append: /* @__PURE__ */
|
|
814
|
+
prepend: /* @__PURE__ */ React13__namespace.createElement(lucideReact.AlignHorizontalSpaceAroundIcon, { className: "sb-h-4 sb-w-4 sb-rotate-90" }),
|
|
815
|
+
append: /* @__PURE__ */ React13__namespace.createElement("span", { className: "sb-text-muted-foreground" }, "px")
|
|
971
816
|
}
|
|
972
817
|
)))
|
|
973
818
|
}
|
|
974
|
-
)) : /* @__PURE__ */
|
|
819
|
+
)) : /* @__PURE__ */ React13__namespace.createElement(React13__namespace.Fragment, null, /* @__PURE__ */ React13__namespace.createElement(
|
|
975
820
|
FormField,
|
|
976
821
|
{
|
|
977
822
|
control: form.control,
|
|
978
823
|
name: "padding.left",
|
|
979
|
-
render: ({ field }) => /* @__PURE__ */
|
|
824
|
+
render: ({ field }) => /* @__PURE__ */ React13__namespace.createElement(FormItem, null, /* @__PURE__ */ React13__namespace.createElement(FormControl, null, /* @__PURE__ */ React13__namespace.createElement(
|
|
980
825
|
AdvancedInput,
|
|
981
826
|
{
|
|
982
827
|
...field,
|
|
983
|
-
prepend: /* @__PURE__ */
|
|
984
|
-
append: /* @__PURE__ */
|
|
828
|
+
prepend: /* @__PURE__ */ React13__namespace.createElement(lucideReact.AlignHorizontalJustifyStartIcon, { className: "sb-h-4 sb-w-4" }),
|
|
829
|
+
append: /* @__PURE__ */ React13__namespace.createElement("span", { className: "sb-text-muted-foreground" }, "px")
|
|
985
830
|
}
|
|
986
831
|
)))
|
|
987
832
|
}
|
|
988
|
-
), /* @__PURE__ */
|
|
833
|
+
), /* @__PURE__ */ React13__namespace.createElement(
|
|
989
834
|
FormField,
|
|
990
835
|
{
|
|
991
836
|
control: form.control,
|
|
992
837
|
name: "padding.top",
|
|
993
|
-
render: ({ field }) => /* @__PURE__ */
|
|
838
|
+
render: ({ field }) => /* @__PURE__ */ React13__namespace.createElement(FormItem, null, /* @__PURE__ */ React13__namespace.createElement(FormControl, null, /* @__PURE__ */ React13__namespace.createElement(
|
|
994
839
|
AdvancedInput,
|
|
995
840
|
{
|
|
996
841
|
...field,
|
|
997
|
-
prepend: /* @__PURE__ */
|
|
998
|
-
append: /* @__PURE__ */
|
|
842
|
+
prepend: /* @__PURE__ */ React13__namespace.createElement(lucideReact.AlignHorizontalJustifyStartIcon, { className: "sb-h-4 sb-w-4 sb-rotate-90" }),
|
|
843
|
+
append: /* @__PURE__ */ React13__namespace.createElement("span", { className: "sb-text-muted-foreground" }, "px")
|
|
999
844
|
}
|
|
1000
845
|
)))
|
|
1001
846
|
}
|
|
1002
|
-
), /* @__PURE__ */
|
|
847
|
+
), /* @__PURE__ */ React13__namespace.createElement(
|
|
1003
848
|
FormField,
|
|
1004
849
|
{
|
|
1005
850
|
control: form.control,
|
|
1006
851
|
name: "padding.right",
|
|
1007
|
-
render: ({ field }) => /* @__PURE__ */
|
|
852
|
+
render: ({ field }) => /* @__PURE__ */ React13__namespace.createElement(FormItem, null, /* @__PURE__ */ React13__namespace.createElement(FormControl, null, /* @__PURE__ */ React13__namespace.createElement(
|
|
1008
853
|
AdvancedInput,
|
|
1009
854
|
{
|
|
1010
855
|
...field,
|
|
1011
|
-
prepend: /* @__PURE__ */
|
|
1012
|
-
append: /* @__PURE__ */
|
|
856
|
+
prepend: /* @__PURE__ */ React13__namespace.createElement(lucideReact.AlignHorizontalJustifyStartIcon, { className: "sb-h-4 sb-w-4 sb-rotate-180" }),
|
|
857
|
+
append: /* @__PURE__ */ React13__namespace.createElement("span", { className: "sb-text-muted-foreground" }, "px")
|
|
1013
858
|
}
|
|
1014
859
|
)))
|
|
1015
860
|
}
|
|
1016
|
-
), /* @__PURE__ */
|
|
861
|
+
), /* @__PURE__ */ React13__namespace.createElement(
|
|
1017
862
|
FormField,
|
|
1018
863
|
{
|
|
1019
864
|
control: form.control,
|
|
1020
865
|
name: "padding.bottom",
|
|
1021
|
-
render: ({ field }) => /* @__PURE__ */
|
|
866
|
+
render: ({ field }) => /* @__PURE__ */ React13__namespace.createElement(FormItem, null, /* @__PURE__ */ React13__namespace.createElement(FormControl, null, /* @__PURE__ */ React13__namespace.createElement(
|
|
1022
867
|
AdvancedInput,
|
|
1023
868
|
{
|
|
1024
869
|
...field,
|
|
1025
|
-
prepend: /* @__PURE__ */
|
|
1026
|
-
append: /* @__PURE__ */
|
|
870
|
+
prepend: /* @__PURE__ */ React13__namespace.createElement(lucideReact.AlignHorizontalJustifyStartIcon, { className: "sb-h-4 sb-w-4 sb--rotate-90" }),
|
|
871
|
+
append: /* @__PURE__ */ React13__namespace.createElement("span", { className: "sb-text-muted-foreground" }, "px")
|
|
1027
872
|
}
|
|
1028
873
|
)))
|
|
1029
874
|
}
|
|
1030
|
-
))), /* @__PURE__ */
|
|
875
|
+
))), /* @__PURE__ */ React13__namespace.createElement("div", { className: "sb-shrink-0" }, /* @__PURE__ */ React13__namespace.createElement(
|
|
1031
876
|
FormField,
|
|
1032
877
|
{
|
|
1033
878
|
control: form.control,
|
|
1034
879
|
name: "padding.indipendent",
|
|
1035
|
-
render: ({ field }) => /* @__PURE__ */
|
|
880
|
+
render: ({ field }) => /* @__PURE__ */ React13__namespace.createElement(FormControl, null, /* @__PURE__ */ React13__namespace.createElement(
|
|
1036
881
|
Toggle,
|
|
1037
882
|
{
|
|
1038
883
|
className: "sb-shrink-0 sb-flex sb-w-8 sb-h-8 sb-p-0",
|
|
@@ -1041,99 +886,99 @@ var ItemDesignForm = (props) => {
|
|
|
1041
886
|
pressed: field.value,
|
|
1042
887
|
onPressedChange: field.onChange
|
|
1043
888
|
},
|
|
1044
|
-
/* @__PURE__ */
|
|
889
|
+
/* @__PURE__ */ React13__namespace.createElement(lucideReact.ScanIcon, { className: "sb-h-4 sb-w-4" })
|
|
1045
890
|
))
|
|
1046
891
|
}
|
|
1047
|
-
))), /* @__PURE__ */
|
|
892
|
+
))), /* @__PURE__ */ React13__namespace.createElement(FormMessage, null)), /* @__PURE__ */ React13__namespace.createElement("div", { className: "sb-space-y-2" }, /* @__PURE__ */ React13__namespace.createElement(FormLabel, null, "Margin"), /* @__PURE__ */ React13__namespace.createElement("div", { className: "sb-grid sb-grid-cols-[1fr,auto] sb-gap-3" }, /* @__PURE__ */ React13__namespace.createElement("div", { className: "sb-grid sb-grid-cols-2 sb-items-center sb-gap-3" }, !indipendentMargin ? /* @__PURE__ */ React13__namespace.createElement(React13__namespace.Fragment, null, /* @__PURE__ */ React13__namespace.createElement(
|
|
1048
893
|
FormField,
|
|
1049
894
|
{
|
|
1050
895
|
control: form.control,
|
|
1051
896
|
name: "margin.horizontal",
|
|
1052
|
-
render: ({ field }) => /* @__PURE__ */
|
|
897
|
+
render: ({ field }) => /* @__PURE__ */ React13__namespace.createElement(FormItem, null, /* @__PURE__ */ React13__namespace.createElement(FormControl, null, /* @__PURE__ */ React13__namespace.createElement(
|
|
1053
898
|
AdvancedInput,
|
|
1054
899
|
{
|
|
1055
900
|
...field,
|
|
1056
|
-
prepend: /* @__PURE__ */
|
|
1057
|
-
append: /* @__PURE__ */
|
|
901
|
+
prepend: /* @__PURE__ */ React13__namespace.createElement(lucideReact.AlignHorizontalSpaceAroundIcon, { className: "sb-h-4 sb-w-4" }),
|
|
902
|
+
append: /* @__PURE__ */ React13__namespace.createElement("span", { className: "sb-text-muted-foreground" }, "px")
|
|
1058
903
|
}
|
|
1059
904
|
)))
|
|
1060
905
|
}
|
|
1061
|
-
), /* @__PURE__ */
|
|
906
|
+
), /* @__PURE__ */ React13__namespace.createElement(
|
|
1062
907
|
FormField,
|
|
1063
908
|
{
|
|
1064
909
|
control: form.control,
|
|
1065
910
|
name: "margin.vertical",
|
|
1066
|
-
render: ({ field }) => /* @__PURE__ */
|
|
911
|
+
render: ({ field }) => /* @__PURE__ */ React13__namespace.createElement(FormItem, null, /* @__PURE__ */ React13__namespace.createElement(FormControl, null, /* @__PURE__ */ React13__namespace.createElement(
|
|
1067
912
|
AdvancedInput,
|
|
1068
913
|
{
|
|
1069
914
|
...field,
|
|
1070
|
-
prepend: /* @__PURE__ */
|
|
1071
|
-
append: /* @__PURE__ */
|
|
915
|
+
prepend: /* @__PURE__ */ React13__namespace.createElement(lucideReact.AlignHorizontalSpaceAroundIcon, { className: "sb-h-4 sb-w-4 sb-rotate-90" }),
|
|
916
|
+
append: /* @__PURE__ */ React13__namespace.createElement("span", { className: "sb-text-muted-foreground" }, "px")
|
|
1072
917
|
}
|
|
1073
918
|
)))
|
|
1074
919
|
}
|
|
1075
|
-
)) : /* @__PURE__ */
|
|
920
|
+
)) : /* @__PURE__ */ React13__namespace.createElement(React13__namespace.Fragment, null, /* @__PURE__ */ React13__namespace.createElement(
|
|
1076
921
|
FormField,
|
|
1077
922
|
{
|
|
1078
923
|
control: form.control,
|
|
1079
924
|
name: "margin.left",
|
|
1080
|
-
render: ({ field }) => /* @__PURE__ */
|
|
925
|
+
render: ({ field }) => /* @__PURE__ */ React13__namespace.createElement(FormItem, null, /* @__PURE__ */ React13__namespace.createElement(FormControl, null, /* @__PURE__ */ React13__namespace.createElement(
|
|
1081
926
|
AdvancedInput,
|
|
1082
927
|
{
|
|
1083
928
|
...field,
|
|
1084
|
-
prepend: /* @__PURE__ */
|
|
1085
|
-
append: /* @__PURE__ */
|
|
929
|
+
prepend: /* @__PURE__ */ React13__namespace.createElement(lucideReact.AlignHorizontalJustifyStartIcon, { className: "sb-h-4 sb-w-4" }),
|
|
930
|
+
append: /* @__PURE__ */ React13__namespace.createElement("span", { className: "sb-text-muted-foreground" }, "px")
|
|
1086
931
|
}
|
|
1087
932
|
)))
|
|
1088
933
|
}
|
|
1089
|
-
), /* @__PURE__ */
|
|
934
|
+
), /* @__PURE__ */ React13__namespace.createElement(
|
|
1090
935
|
FormField,
|
|
1091
936
|
{
|
|
1092
937
|
control: form.control,
|
|
1093
938
|
name: "margin.top",
|
|
1094
|
-
render: ({ field }) => /* @__PURE__ */
|
|
939
|
+
render: ({ field }) => /* @__PURE__ */ React13__namespace.createElement(FormItem, null, /* @__PURE__ */ React13__namespace.createElement(FormControl, null, /* @__PURE__ */ React13__namespace.createElement(
|
|
1095
940
|
AdvancedInput,
|
|
1096
941
|
{
|
|
1097
942
|
...field,
|
|
1098
|
-
prepend: /* @__PURE__ */
|
|
1099
|
-
append: /* @__PURE__ */
|
|
943
|
+
prepend: /* @__PURE__ */ React13__namespace.createElement(lucideReact.AlignHorizontalJustifyStartIcon, { className: "sb-h-4 sb-w-4 sb-rotate-90" }),
|
|
944
|
+
append: /* @__PURE__ */ React13__namespace.createElement("span", { className: "sb-text-muted-foreground" }, "px")
|
|
1100
945
|
}
|
|
1101
946
|
)))
|
|
1102
947
|
}
|
|
1103
|
-
), /* @__PURE__ */
|
|
948
|
+
), /* @__PURE__ */ React13__namespace.createElement(
|
|
1104
949
|
FormField,
|
|
1105
950
|
{
|
|
1106
951
|
control: form.control,
|
|
1107
952
|
name: "margin.right",
|
|
1108
|
-
render: ({ field }) => /* @__PURE__ */
|
|
953
|
+
render: ({ field }) => /* @__PURE__ */ React13__namespace.createElement(FormItem, null, /* @__PURE__ */ React13__namespace.createElement(FormControl, null, /* @__PURE__ */ React13__namespace.createElement(
|
|
1109
954
|
AdvancedInput,
|
|
1110
955
|
{
|
|
1111
956
|
...field,
|
|
1112
|
-
prepend: /* @__PURE__ */
|
|
1113
|
-
append: /* @__PURE__ */
|
|
957
|
+
prepend: /* @__PURE__ */ React13__namespace.createElement(lucideReact.AlignHorizontalJustifyStartIcon, { className: "sb-h-4 sb-w-4 sb-rotate-180" }),
|
|
958
|
+
append: /* @__PURE__ */ React13__namespace.createElement("span", { className: "sb-text-muted-foreground" }, "px")
|
|
1114
959
|
}
|
|
1115
960
|
)))
|
|
1116
961
|
}
|
|
1117
|
-
), /* @__PURE__ */
|
|
962
|
+
), /* @__PURE__ */ React13__namespace.createElement(
|
|
1118
963
|
FormField,
|
|
1119
964
|
{
|
|
1120
965
|
control: form.control,
|
|
1121
966
|
name: "margin.bottom",
|
|
1122
|
-
render: ({ field }) => /* @__PURE__ */
|
|
967
|
+
render: ({ field }) => /* @__PURE__ */ React13__namespace.createElement(FormItem, null, /* @__PURE__ */ React13__namespace.createElement(FormControl, null, /* @__PURE__ */ React13__namespace.createElement(
|
|
1123
968
|
AdvancedInput,
|
|
1124
969
|
{
|
|
1125
970
|
...field,
|
|
1126
|
-
prepend: /* @__PURE__ */
|
|
1127
|
-
append: /* @__PURE__ */
|
|
971
|
+
prepend: /* @__PURE__ */ React13__namespace.createElement(lucideReact.AlignHorizontalJustifyStartIcon, { className: "sb-h-4 sb-w-4 sb--rotate-90" }),
|
|
972
|
+
append: /* @__PURE__ */ React13__namespace.createElement("span", { className: "sb-text-muted-foreground" }, "px")
|
|
1128
973
|
}
|
|
1129
974
|
)))
|
|
1130
975
|
}
|
|
1131
|
-
))), /* @__PURE__ */
|
|
976
|
+
))), /* @__PURE__ */ React13__namespace.createElement("div", { className: "sb-shrink-0" }, /* @__PURE__ */ React13__namespace.createElement(
|
|
1132
977
|
FormField,
|
|
1133
978
|
{
|
|
1134
979
|
control: form.control,
|
|
1135
980
|
name: "margin.indipendent",
|
|
1136
|
-
render: ({ field }) => /* @__PURE__ */
|
|
981
|
+
render: ({ field }) => /* @__PURE__ */ React13__namespace.createElement(FormControl, null, /* @__PURE__ */ React13__namespace.createElement(
|
|
1137
982
|
Toggle,
|
|
1138
983
|
{
|
|
1139
984
|
className: "sb-shrink-0 sb-flex sb-w-8 sb-h-8 sb-p-0",
|
|
@@ -1142,38 +987,147 @@ var ItemDesignForm = (props) => {
|
|
|
1142
987
|
pressed: field.value,
|
|
1143
988
|
onPressedChange: field.onChange
|
|
1144
989
|
},
|
|
1145
|
-
/* @__PURE__ */
|
|
990
|
+
/* @__PURE__ */ React13__namespace.createElement(lucideReact.ScanIcon, { className: "sb-h-4 sb-w-4" })
|
|
1146
991
|
))
|
|
1147
992
|
}
|
|
1148
|
-
))), /* @__PURE__ */
|
|
993
|
+
))), /* @__PURE__ */ React13__namespace.createElement(FormMessage, null)))));
|
|
994
|
+
};
|
|
995
|
+
function Calendar({
|
|
996
|
+
className,
|
|
997
|
+
classNames,
|
|
998
|
+
showOutsideDays = true,
|
|
999
|
+
...props
|
|
1000
|
+
}) {
|
|
1001
|
+
return /* @__PURE__ */ React13__namespace.createElement(
|
|
1002
|
+
reactDayPicker.DayPicker,
|
|
1003
|
+
{
|
|
1004
|
+
showOutsideDays,
|
|
1005
|
+
className: chunkGSOMMLCG_js.cn("sb-p-3 sb-font-roboto", className),
|
|
1006
|
+
classNames: {
|
|
1007
|
+
months: "sb-flex sb-flex-col sm:sb-flex-row sb-space-y-4 sm:sb-space-x-4 sm:sb-space-y-0",
|
|
1008
|
+
month: "sb-space-y-4",
|
|
1009
|
+
caption: "sb-flex sb-justify-center sb-pt-1 sb-relative sb-items-center",
|
|
1010
|
+
caption_label: "sb-text-sm sb-font-medium",
|
|
1011
|
+
nav: "sb-space-x-1 sb-flex sb-items-center",
|
|
1012
|
+
nav_button: chunkGSOMMLCG_js.cn(
|
|
1013
|
+
chunkGSOMMLCG_js.buttonVariants({ variant: "outline" }),
|
|
1014
|
+
"sb-h-7 sb-w-7 sb-bg-transparent sb-p-0 sb-opacity-50 hover:sb-opacity-100"
|
|
1015
|
+
),
|
|
1016
|
+
nav_button_previous: "sb-absolute sb-left-1",
|
|
1017
|
+
nav_button_next: "sb-absolute sb-right-1",
|
|
1018
|
+
table: "sb-w-full sb-border-collapse sb-space-y-1",
|
|
1019
|
+
head_row: "sb-flex",
|
|
1020
|
+
head_cell: "sb-text-muted-foreground sb-rounded-md sb-w-8 sb-font-normal sb-text-[0.8rem]",
|
|
1021
|
+
row: "sb-flex sb-w-full sb-mt-2",
|
|
1022
|
+
cell: chunkGSOMMLCG_js.cn(
|
|
1023
|
+
"sb-relative sb-p-0 sb-text-center sb-text-sm focus-within:sb-relative focus-within:sb-z-20 [&:has([aria-selected])]:sb-bg-accent [&:has([aria-selected].day-outside)]:sb-bg-accent/50 [&:has([aria-selected].day-range-end)]:sb-rounded-r-md",
|
|
1024
|
+
props.mode === "range" ? "[&:has(>.day-range-end)]:sb-rounded-r-md [&:has(>.day-range-start)]:sb-rounded-l-md first:[&:has([aria-selected])]:sb-rounded-l-md last:[&:has([aria-selected])]:sb-rounded-r-md" : "[&:has([aria-selected])]:sb-rounded-md"
|
|
1025
|
+
),
|
|
1026
|
+
day: chunkGSOMMLCG_js.cn(
|
|
1027
|
+
chunkGSOMMLCG_js.buttonVariants({ variant: "ghost" }),
|
|
1028
|
+
"sb-h-8 sb-w-8 sb-p-0 sb-font-normal aria-selected:sb-opacity-100"
|
|
1029
|
+
),
|
|
1030
|
+
day_range_start: "day-range-start",
|
|
1031
|
+
day_range_end: "day-range-end",
|
|
1032
|
+
day_selected: "sb-bg-primary sb-text-primary-foreground hover:sb-bg-primary hover:sb-text-primary-foreground focus:sb-bg-primary focus:sb-text-primary-foreground",
|
|
1033
|
+
day_today: "sb-bg-accent sb-text-accent-foreground",
|
|
1034
|
+
day_outside: "day-outside sb-text-muted-foreground sb-opacity-50 aria-selected:sb-bg-accent/50 aria-selected:sb-text-muted-foreground aria-selected:sb-opacity-30",
|
|
1035
|
+
day_disabled: "sb-text-muted-foreground sb-opacity-50",
|
|
1036
|
+
day_range_middle: "aria-selected:sb-bg-accent aria-selected:sb-text-accent-foreground",
|
|
1037
|
+
day_hidden: "invisible",
|
|
1038
|
+
...classNames
|
|
1039
|
+
},
|
|
1040
|
+
components: {
|
|
1041
|
+
IconLeft: () => /* @__PURE__ */ React13__namespace.createElement(lucideReact.ChevronLeftIcon, { className: "sb-h-4 sb-w-4" }),
|
|
1042
|
+
IconRight: () => /* @__PURE__ */ React13__namespace.createElement(lucideReact.ChevronRightIcon, { className: "sb-h-4 sb-w-4" })
|
|
1043
|
+
},
|
|
1044
|
+
...props
|
|
1045
|
+
}
|
|
1046
|
+
);
|
|
1047
|
+
}
|
|
1048
|
+
Calendar.displayName = "Calendar";
|
|
1049
|
+
var Textarea = React13__namespace.forwardRef(
|
|
1050
|
+
({ className, ...props }, ref) => {
|
|
1051
|
+
return /* @__PURE__ */ React13__namespace.createElement(
|
|
1052
|
+
"textarea",
|
|
1053
|
+
{
|
|
1054
|
+
className: chunkGSOMMLCG_js.cn(
|
|
1055
|
+
"sb-flex sb-min-h-[60px] sb-font-roboto sb-w-full sb-rounded-md sb-border sb-border-input sb-bg-transparent sb-px-3 sb-py-2 sb-text-sm sb-shadow-sm placeholder:sb-text-muted-foreground focus-visible:sb-outline-none focus-visible:sb-ring-1 focus-visible:sb-ring-ring disabled:sb-cursor-not-allowed disabled:sb-opacity-50",
|
|
1056
|
+
className
|
|
1057
|
+
),
|
|
1058
|
+
ref,
|
|
1059
|
+
...props
|
|
1060
|
+
}
|
|
1061
|
+
);
|
|
1062
|
+
}
|
|
1063
|
+
);
|
|
1064
|
+
Textarea.displayName = "Textarea";
|
|
1065
|
+
|
|
1066
|
+
// src/components/container-item-form.tsx
|
|
1067
|
+
var ContainerItemForm = (props) => {
|
|
1068
|
+
const { item } = props;
|
|
1069
|
+
const { patchItem } = chunkGSOMMLCG_js.useBuilder();
|
|
1070
|
+
const component = chunkUZFAGH6G_js.builder.getComponent(item.component);
|
|
1071
|
+
if (!component) {
|
|
1072
|
+
throw new Error(
|
|
1073
|
+
`[simple-builder]: Component with id ${item.component} not found in container item form component`
|
|
1074
|
+
);
|
|
1075
|
+
}
|
|
1076
|
+
const form = reactHookForm.useForm({
|
|
1077
|
+
defaultValues: (component.inputs || []).reduce(
|
|
1078
|
+
(acc, input) => ({
|
|
1079
|
+
...acc,
|
|
1080
|
+
[input.name]: item?.props?.[input.name] ?? input.defaultValue
|
|
1081
|
+
}),
|
|
1082
|
+
{}
|
|
1083
|
+
)
|
|
1084
|
+
});
|
|
1085
|
+
const onSubmit = (values) => {
|
|
1086
|
+
patchItem(item.id, {
|
|
1087
|
+
props: values
|
|
1088
|
+
});
|
|
1089
|
+
};
|
|
1090
|
+
React13__namespace.useEffect(() => {
|
|
1091
|
+
const subscription = form.watch(() => form.handleSubmit(onSubmit)());
|
|
1092
|
+
return () => subscription.unsubscribe();
|
|
1093
|
+
}, [form.watch, form.handleSubmit]);
|
|
1094
|
+
return /* @__PURE__ */ React13__namespace.createElement(Form, { ...form }, /* @__PURE__ */ React13__namespace.createElement("form", { onSubmit: form.handleSubmit(onSubmit) }, /* @__PURE__ */ React13__namespace.createElement("div", { className: "sb-space-y-4 sb-p-4" }, (component.inputs || []).map((input) => /* @__PURE__ */ React13__namespace.createElement(
|
|
1095
|
+
FormField,
|
|
1096
|
+
{
|
|
1097
|
+
key: input.name,
|
|
1098
|
+
control: form.control,
|
|
1099
|
+
name: input.name,
|
|
1100
|
+
render: ({ field }) => /* @__PURE__ */ React13__namespace.createElement(RenderInput, { type: input.type, input, field })
|
|
1101
|
+
}
|
|
1102
|
+
)))));
|
|
1149
1103
|
};
|
|
1150
1104
|
var RenderInput = (props) => {
|
|
1151
1105
|
const { type, input, field } = props;
|
|
1152
1106
|
switch (type) {
|
|
1153
1107
|
case "string":
|
|
1154
|
-
return /* @__PURE__ */
|
|
1108
|
+
return /* @__PURE__ */ React13__namespace.createElement(FormItem, null, /* @__PURE__ */ React13__namespace.createElement(FormLabel, null, input.friendlyName || input.name), /* @__PURE__ */ React13__namespace.createElement(FormControl, null, /* @__PURE__ */ React13__namespace.createElement(Input, { ...field })), input.helperText && /* @__PURE__ */ React13__namespace.createElement(FormDescription, null, input.helperText), /* @__PURE__ */ React13__namespace.createElement(FormMessage, null));
|
|
1155
1109
|
case "longText":
|
|
1156
|
-
return /* @__PURE__ */
|
|
1110
|
+
return /* @__PURE__ */ React13__namespace.createElement(FormItem, null, /* @__PURE__ */ React13__namespace.createElement(FormLabel, null, input.friendlyName || input.name), /* @__PURE__ */ React13__namespace.createElement(FormControl, null, /* @__PURE__ */ React13__namespace.createElement(Textarea, { ...field })), input.helperText && /* @__PURE__ */ React13__namespace.createElement(FormDescription, null, input.helperText), /* @__PURE__ */ React13__namespace.createElement(FormMessage, null));
|
|
1157
1111
|
case "richText":
|
|
1158
|
-
return /* @__PURE__ */
|
|
1112
|
+
return /* @__PURE__ */ React13__namespace.createElement(FormItem, null, /* @__PURE__ */ React13__namespace.createElement(FormLabel, null, input.friendlyName || input.name), /* @__PURE__ */ React13__namespace.createElement(FormControl, null, /* @__PURE__ */ React13__namespace.createElement(Textarea, { ...field })), input.helperText && /* @__PURE__ */ React13__namespace.createElement(FormDescription, null, input.helperText), /* @__PURE__ */ React13__namespace.createElement(FormMessage, null));
|
|
1159
1113
|
case "number":
|
|
1160
|
-
return /* @__PURE__ */
|
|
1114
|
+
return /* @__PURE__ */ React13__namespace.createElement(FormItem, null, /* @__PURE__ */ React13__namespace.createElement(FormLabel, null, input.friendlyName || input.name), /* @__PURE__ */ React13__namespace.createElement(FormControl, null, /* @__PURE__ */ React13__namespace.createElement(Input, { type: "number", ...field })), input.helperText && /* @__PURE__ */ React13__namespace.createElement(FormDescription, null, input.helperText), /* @__PURE__ */ React13__namespace.createElement(FormMessage, null));
|
|
1161
1115
|
case "color":
|
|
1162
|
-
return /* @__PURE__ */
|
|
1116
|
+
return /* @__PURE__ */ React13__namespace.createElement(FormItem, null, /* @__PURE__ */ React13__namespace.createElement(FormLabel, null, input.friendlyName || input.name), /* @__PURE__ */ React13__namespace.createElement(FormControl, null, /* @__PURE__ */ React13__namespace.createElement(ColorPicker, { color: field.value, onColorChange: field.onChange })), input.helperText && /* @__PURE__ */ React13__namespace.createElement(FormDescription, null, input.helperText), /* @__PURE__ */ React13__namespace.createElement(FormMessage, null));
|
|
1163
1117
|
case "date":
|
|
1164
|
-
return /* @__PURE__ */
|
|
1165
|
-
|
|
1118
|
+
return /* @__PURE__ */ React13__namespace.createElement(FormItem, null, /* @__PURE__ */ React13__namespace.createElement(FormLabel, null, input.friendlyName || input.name), /* @__PURE__ */ React13__namespace.createElement(FormControl, null, /* @__PURE__ */ React13__namespace.createElement(Popover, null, /* @__PURE__ */ React13__namespace.createElement(PopoverTrigger, { asChild: true }, /* @__PURE__ */ React13__namespace.createElement(
|
|
1119
|
+
chunkGSOMMLCG_js.Button,
|
|
1166
1120
|
{
|
|
1167
1121
|
variant: "outline",
|
|
1168
1122
|
size: "sm",
|
|
1169
|
-
className:
|
|
1123
|
+
className: chunkGSOMMLCG_js.cn(
|
|
1170
1124
|
"sb-w-full sb-flex sb-justify-start sb-text-left sb-font-normal",
|
|
1171
1125
|
!field.value && "sb-text-muted-foreground"
|
|
1172
1126
|
)
|
|
1173
1127
|
},
|
|
1174
|
-
/* @__PURE__ */
|
|
1175
|
-
field.value ? dateFns.format(field.value, "PPP") : /* @__PURE__ */
|
|
1176
|
-
)), /* @__PURE__ */
|
|
1128
|
+
/* @__PURE__ */ React13__namespace.createElement(lucideReact.CalendarIcon, { className: "sb-mr-2 sb-h-4 sb-w-4" }),
|
|
1129
|
+
field.value ? dateFns.format(field.value, "PPP") : /* @__PURE__ */ React13__namespace.createElement("span", null, "Pick a date")
|
|
1130
|
+
)), /* @__PURE__ */ React13__namespace.createElement(PopoverContent, { className: "sb-w-auto sb-p-0", align: "start" }, /* @__PURE__ */ React13__namespace.createElement(
|
|
1177
1131
|
Calendar,
|
|
1178
1132
|
{
|
|
1179
1133
|
mode: "single",
|
|
@@ -1181,11 +1135,11 @@ var RenderInput = (props) => {
|
|
|
1181
1135
|
onSelect: field.onChange,
|
|
1182
1136
|
initialFocus: true
|
|
1183
1137
|
}
|
|
1184
|
-
)))), input.helperText && /* @__PURE__ */
|
|
1138
|
+
)))), input.helperText && /* @__PURE__ */ React13__namespace.createElement(FormDescription, null, input.helperText), /* @__PURE__ */ React13__namespace.createElement(FormMessage, null));
|
|
1185
1139
|
case "boolean":
|
|
1186
|
-
return /* @__PURE__ */
|
|
1140
|
+
return /* @__PURE__ */ React13__namespace.createElement(FormItem, { className: "sb-flex sb-flex-row sb-items-center sb-justify-between sb-space-y-0" }, /* @__PURE__ */ React13__namespace.createElement(FormLabel, null, input.friendlyName || input.name), /* @__PURE__ */ React13__namespace.createElement(FormControl, null, /* @__PURE__ */ React13__namespace.createElement(Switch, { checked: field.value, onCheckedChange: field.onChange })), input.helperText && /* @__PURE__ */ React13__namespace.createElement(FormDescription, null, input.helperText), /* @__PURE__ */ React13__namespace.createElement(FormMessage, null));
|
|
1187
1141
|
case "file":
|
|
1188
|
-
return /* @__PURE__ */
|
|
1142
|
+
return /* @__PURE__ */ React13__namespace.createElement(FormItem, null, /* @__PURE__ */ React13__namespace.createElement(FormLabel, null, input.friendlyName || input.name), /* @__PURE__ */ React13__namespace.createElement(FormControl, null, /* @__PURE__ */ React13__namespace.createElement(
|
|
1189
1143
|
MediaInput,
|
|
1190
1144
|
{
|
|
1191
1145
|
className: "sb-grid sb-grid-cols-2 sb-gap-1",
|
|
@@ -1197,26 +1151,76 @@ var RenderInput = (props) => {
|
|
|
1197
1151
|
"media-input: Error: " + e?.description
|
|
1198
1152
|
)
|
|
1199
1153
|
}
|
|
1200
|
-
)), input.helperText && /* @__PURE__ */
|
|
1154
|
+
)), input.helperText && /* @__PURE__ */ React13__namespace.createElement(FormDescription, null, input.helperText), /* @__PURE__ */ React13__namespace.createElement(FormMessage, null));
|
|
1201
1155
|
default:
|
|
1202
1156
|
throw new Error(
|
|
1203
1157
|
`[simple-builder]: Input type "${props.type}" not supported`
|
|
1204
1158
|
);
|
|
1205
1159
|
}
|
|
1206
1160
|
};
|
|
1161
|
+
|
|
1162
|
+
// src/components/container-item-toolbar.tsx
|
|
1163
|
+
var ContainerItemToolbar = (props) => {
|
|
1164
|
+
const { contentId, canBringUp = false, canBringDown = false } = props;
|
|
1165
|
+
const { bringUp, bringDown } = chunkGSOMMLCG_js.useBuilder();
|
|
1166
|
+
return /* @__PURE__ */ React13__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__ */ React13__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__ */ React13__namespace.createElement(EditButton, { id: contentId }), /* @__PURE__ */ React13__namespace.createElement(
|
|
1167
|
+
chunkGSOMMLCG_js.Button,
|
|
1168
|
+
{
|
|
1169
|
+
variant: "ghost",
|
|
1170
|
+
className: "sb-w-8 sb-h-8 sb-p-0",
|
|
1171
|
+
onClick: () => bringUp(contentId),
|
|
1172
|
+
disabled: !canBringUp
|
|
1173
|
+
},
|
|
1174
|
+
/* @__PURE__ */ React13__namespace.createElement(lucideReact.ArrowUp, { className: "sb-h-5 sb-w-5" })
|
|
1175
|
+
), /* @__PURE__ */ React13__namespace.createElement(
|
|
1176
|
+
chunkGSOMMLCG_js.Button,
|
|
1177
|
+
{
|
|
1178
|
+
variant: "ghost",
|
|
1179
|
+
className: "sb-w-8 sb-h-8 sb-p-0",
|
|
1180
|
+
onClick: () => bringDown(contentId),
|
|
1181
|
+
disabled: !canBringDown
|
|
1182
|
+
},
|
|
1183
|
+
/* @__PURE__ */ React13__namespace.createElement(lucideReact.ArrowDown, { className: "sb-h-5 sb-w-5" })
|
|
1184
|
+
), /* @__PURE__ */ React13__namespace.createElement(DeleteButton, { contentId })));
|
|
1185
|
+
};
|
|
1186
|
+
var EditButton = ({ id }) => {
|
|
1187
|
+
return /* @__PURE__ */ React13__namespace.createElement(Popover, null, /* @__PURE__ */ React13__namespace.createElement(PopoverTrigger, { asChild: true }, /* @__PURE__ */ React13__namespace.createElement(chunkGSOMMLCG_js.Button, { variant: "ghost", className: "sb-w-8 sb-h-8 sb-p-0" }, /* @__PURE__ */ React13__namespace.createElement(lucideReact.Edit2Icon, { className: "sb-h-5 sb-w-5" }))), /* @__PURE__ */ React13__namespace.createElement(
|
|
1188
|
+
PopoverContent,
|
|
1189
|
+
{
|
|
1190
|
+
side: "left",
|
|
1191
|
+
align: "start",
|
|
1192
|
+
sideOffset: 16,
|
|
1193
|
+
alignOffset: -8,
|
|
1194
|
+
className: "sb-p-0",
|
|
1195
|
+
collisionPadding: 16
|
|
1196
|
+
},
|
|
1197
|
+
/* @__PURE__ */ React13__namespace.createElement(EditPopoverInner, { id })
|
|
1198
|
+
));
|
|
1199
|
+
};
|
|
1200
|
+
var EditPopoverInner = (props) => {
|
|
1201
|
+
const { id } = props;
|
|
1202
|
+
const { getItem } = chunkGSOMMLCG_js.useBuilder();
|
|
1203
|
+
const item = getItem(id);
|
|
1204
|
+
if (!item) {
|
|
1205
|
+
throw new Error(
|
|
1206
|
+
`[simple-builder]: Item with id ${id} not found in container item form component`
|
|
1207
|
+
);
|
|
1208
|
+
}
|
|
1209
|
+
return /* @__PURE__ */ React13__namespace.createElement(Tabs, null, /* @__PURE__ */ React13__namespace.createElement(TabsList, { defaultValue: "content" }, /* @__PURE__ */ React13__namespace.createElement(TabsTrigger, { value: "content" }, "Inhoud"), /* @__PURE__ */ React13__namespace.createElement(TabsTrigger, { value: "design" }, "Design")), /* @__PURE__ */ React13__namespace.createElement(TabsContent, { value: "content" }, /* @__PURE__ */ React13__namespace.createElement(ContainerItemForm, { item })), /* @__PURE__ */ React13__namespace.createElement(TabsContent, { value: "design" }, /* @__PURE__ */ React13__namespace.createElement(ItemDesignForm, { item })));
|
|
1210
|
+
};
|
|
1207
1211
|
var DeleteButton = ({ contentId }) => {
|
|
1208
|
-
const { deleteContent } =
|
|
1209
|
-
return /* @__PURE__ */
|
|
1210
|
-
|
|
1212
|
+
const { deleteContent } = chunkGSOMMLCG_js.useBuilder();
|
|
1213
|
+
return /* @__PURE__ */ React13__namespace.createElement(AlertDialog, null, /* @__PURE__ */ React13__namespace.createElement(AlertDialogTrigger, { asChild: true }, /* @__PURE__ */ React13__namespace.createElement(
|
|
1214
|
+
chunkGSOMMLCG_js.Button,
|
|
1211
1215
|
{
|
|
1212
1216
|
variant: "ghost",
|
|
1213
1217
|
className: "sb-w-8 sb-h-8 sb-p-0 sb-text-destructive"
|
|
1214
1218
|
},
|
|
1215
|
-
/* @__PURE__ */
|
|
1216
|
-
)), /* @__PURE__ */
|
|
1219
|
+
/* @__PURE__ */ React13__namespace.createElement(lucideReact.Trash2Icon, { className: "sb-h-5 sb-w-5" })
|
|
1220
|
+
)), /* @__PURE__ */ React13__namespace.createElement(AlertDialogContent, null, /* @__PURE__ */ React13__namespace.createElement(AlertDialogDescription, null, "Weet je zeker dat je dit blok wilt verwijderen?"), /* @__PURE__ */ React13__namespace.createElement(AlertDialogFooter, null, /* @__PURE__ */ React13__namespace.createElement(AlertDialogCancel, null, "Annuleren"), /* @__PURE__ */ React13__namespace.createElement(
|
|
1217
1221
|
AlertDialogAction,
|
|
1218
1222
|
{
|
|
1219
|
-
className:
|
|
1223
|
+
className: chunkGSOMMLCG_js.buttonVariants({ variant: "destructive" }),
|
|
1220
1224
|
onClick: () => deleteContent(contentId)
|
|
1221
1225
|
},
|
|
1222
1226
|
"Verwijderen"
|
|
@@ -1227,13 +1231,13 @@ var DesignWrapper = (props) => {
|
|
|
1227
1231
|
const { container = true, background, ...rest } = styles || {};
|
|
1228
1232
|
const matches = typeof background === "string" ? background.match(/url\(["']?(.*?)["']?\)/) : void 0;
|
|
1229
1233
|
const src = matches ? matches[1] : void 0;
|
|
1230
|
-
return /* @__PURE__ */
|
|
1234
|
+
return /* @__PURE__ */ React13__namespace.createElement(
|
|
1231
1235
|
"div",
|
|
1232
1236
|
{
|
|
1233
|
-
className:
|
|
1237
|
+
className: chunkGSOMMLCG_js.cn("sb-relative", className),
|
|
1234
1238
|
style: { ...!src && { background }, ...rest }
|
|
1235
1239
|
},
|
|
1236
|
-
src && /* @__PURE__ */
|
|
1240
|
+
src && /* @__PURE__ */ React13__namespace.createElement(
|
|
1237
1241
|
Image,
|
|
1238
1242
|
{
|
|
1239
1243
|
src,
|
|
@@ -1242,7 +1246,7 @@ var DesignWrapper = (props) => {
|
|
|
1242
1246
|
className: "sb-object-cover sb-absolute sb-inset-0 sb-pointer-events-none sb--z-[1]"
|
|
1243
1247
|
}
|
|
1244
1248
|
),
|
|
1245
|
-
container ? /* @__PURE__ */
|
|
1249
|
+
container ? /* @__PURE__ */ React13__namespace.createElement("div", { className: "sb-container sb-mx-auto" }, children) : children
|
|
1246
1250
|
);
|
|
1247
1251
|
};
|
|
1248
1252
|
|
|
@@ -1255,14 +1259,14 @@ var BuildContainerInner = (props) => {
|
|
|
1255
1259
|
"[simple-builder]: Multiple content blocks detected when using property multiple false."
|
|
1256
1260
|
);
|
|
1257
1261
|
}
|
|
1258
|
-
return /* @__PURE__ */
|
|
1262
|
+
return /* @__PURE__ */ React13__namespace.createElement("div", null, items.length <= 0 ? /* @__PURE__ */ React13__namespace.createElement(AddContentPlaceholder, { parent: id, container: name, index: 0 }) : multiple && /* @__PURE__ */ React13__namespace.createElement(AddContentDividerButton, { parent: id, container: name, index: 0 }), items.map((item, i) => /* @__PURE__ */ React13__namespace.createElement(React13__namespace.Fragment, { key: item.id }, /* @__PURE__ */ React13__namespace.createElement("div", { className: "sb-relative sb-container-item" }, /* @__PURE__ */ React13__namespace.createElement(DesignWrapper, { styles: item.styles }, chunkUZFAGH6G_js.builder.bindComponent(item, true)), /* @__PURE__ */ React13__namespace.createElement(
|
|
1259
1263
|
ContainerItemToolbar,
|
|
1260
1264
|
{
|
|
1261
1265
|
contentId: item.id,
|
|
1262
1266
|
canBringUp: i > 0,
|
|
1263
1267
|
canBringDown: i < items.length - 1
|
|
1264
1268
|
}
|
|
1265
|
-
)), multiple && /* @__PURE__ */
|
|
1269
|
+
)), multiple && /* @__PURE__ */ React13__namespace.createElement(
|
|
1266
1270
|
AddContentDividerButton,
|
|
1267
1271
|
{
|
|
1268
1272
|
parent: id,
|
|
@@ -1273,12 +1277,12 @@ var BuildContainerInner = (props) => {
|
|
|
1273
1277
|
};
|
|
1274
1278
|
var build_container_client_default = BuildContainerInner;
|
|
1275
1279
|
var AddContentButton = (props) => {
|
|
1276
|
-
const components =
|
|
1277
|
-
const { addContent } =
|
|
1278
|
-
return /* @__PURE__ */
|
|
1280
|
+
const components = chunkUZFAGH6G_js.builder.getComponents();
|
|
1281
|
+
const { addContent } = chunkGSOMMLCG_js.useBuilder();
|
|
1282
|
+
return /* @__PURE__ */ React13__namespace.createElement(Popover, null, /* @__PURE__ */ React13__namespace.createElement(PopoverTrigger, { asChild: true }, props.children), /* @__PURE__ */ React13__namespace.createElement(PopoverContent, { className: "sb-p-1" }, /* @__PURE__ */ React13__namespace.createElement("div", { className: "sb-grid sb-grid-cols-2 sb-gap-2" }, components.map((component) => {
|
|
1279
1283
|
const Icon = component.icon ?? lucideReact.ImageIcon;
|
|
1280
|
-
return /* @__PURE__ */
|
|
1281
|
-
|
|
1284
|
+
return /* @__PURE__ */ React13__namespace.createElement(PopoverClose, { key: component.name, asChild: true }, /* @__PURE__ */ React13__namespace.createElement(
|
|
1285
|
+
chunkGSOMMLCG_js.Button,
|
|
1282
1286
|
{
|
|
1283
1287
|
variant: "ghost",
|
|
1284
1288
|
className: "sb-justify-start",
|
|
@@ -1291,25 +1295,24 @@ var AddContentButton = (props) => {
|
|
|
1291
1295
|
);
|
|
1292
1296
|
}
|
|
1293
1297
|
},
|
|
1294
|
-
/* @__PURE__ */
|
|
1298
|
+
/* @__PURE__ */ React13__namespace.createElement(Icon, { className: "sb-mr-2 sb-h-4 sb-w-4 sb-shrink-0" }),
|
|
1295
1299
|
component.friendlyName ?? component.name
|
|
1296
1300
|
));
|
|
1297
1301
|
}))));
|
|
1298
1302
|
};
|
|
1299
1303
|
var AddContentPlaceholder = (props) => {
|
|
1300
|
-
return /* @__PURE__ */
|
|
1304
|
+
return /* @__PURE__ */ React13__namespace.createElement(AddContentButton, { ...props }, /* @__PURE__ */ React13__namespace.createElement("div", { className: "sb-flex sb-justify-center sb-bg-primary/50 p-4" }, /* @__PURE__ */ React13__namespace.createElement(chunkGSOMMLCG_js.Button, { size: "sm" }, /* @__PURE__ */ React13__namespace.createElement(lucideReact.PlusIcon, { className: "sb-mr-2 sb-h-4 sb-w-4" }), "Blok Toevoegen")));
|
|
1301
1305
|
};
|
|
1302
1306
|
var AddContentDividerButton = (props) => {
|
|
1303
|
-
return /* @__PURE__ */
|
|
1304
|
-
|
|
1307
|
+
return /* @__PURE__ */ React13__namespace.createElement(AddContentButton, { ...props }, /* @__PURE__ */ React13__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__ */ React13__namespace.createElement(
|
|
1308
|
+
chunkGSOMMLCG_js.Button,
|
|
1305
1309
|
{
|
|
1306
1310
|
size: "sm",
|
|
1307
1311
|
className: "sb-absolute sb-left-1/2 sb-top-1/2 sb--translate-y-1/2 sb--translate-x-1/2 sb-shadow"
|
|
1308
1312
|
},
|
|
1309
|
-
/* @__PURE__ */
|
|
1313
|
+
/* @__PURE__ */ React13__namespace.createElement(lucideReact.PlusIcon, { className: "sb-mr-2 sb-h-4 sb-w-4" }),
|
|
1310
1314
|
"Blok Toevoegen"
|
|
1311
1315
|
)));
|
|
1312
1316
|
};
|
|
1313
1317
|
|
|
1314
|
-
exports
|
|
1315
|
-
exports.default = build_container_client_default;
|
|
1318
|
+
module.exports = build_container_client_default;
|