@invana/forms 0.0.7 → 0.0.11
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/index.cjs +172 -46
- package/dist/index.cjs.map +1 -1
- package/dist/index.d.cts +32 -2
- package/dist/index.d.ts +32 -2
- package/dist/index.js +170 -47
- package/dist/index.js.map +1 -1
- package/package.json +5 -5
package/dist/index.cjs
CHANGED
|
@@ -7,9 +7,9 @@ var reactHookForm = require('react-hook-form');
|
|
|
7
7
|
var LabelPrimitive = require('@radix-ui/react-label');
|
|
8
8
|
var classVarianceAuthority = require('class-variance-authority');
|
|
9
9
|
var jsxRuntime = require('react/jsx-runtime');
|
|
10
|
+
var lucideReact = require('lucide-react');
|
|
10
11
|
var SwitchPrimitives = require('@radix-ui/react-switch');
|
|
11
12
|
var SelectPrimitive = require('@radix-ui/react-select');
|
|
12
|
-
var lucideReact = require('lucide-react');
|
|
13
13
|
var SliderPrimitive = require('@radix-ui/react-slider');
|
|
14
14
|
var CheckboxPrimitive = require('@radix-ui/react-checkbox');
|
|
15
15
|
var RadioGroupPrimitive = require('@radix-ui/react-radio-group');
|
|
@@ -153,7 +153,7 @@ var Input = React2__namespace.forwardRef(
|
|
|
153
153
|
{
|
|
154
154
|
type,
|
|
155
155
|
className: ui.cn(
|
|
156
|
-
"flex h-10 w-full rounded-md border border-input bg-background px-3 py-2 text-base ring-offset-background file:border-0 file:bg-transparent file:text-sm file:font-medium file:text-foreground placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50
|
|
156
|
+
"flex h-10 w-full rounded-md border border-input bg-background px-3 py-2 text-base ring-offset-background file:border-0 file:bg-transparent file:text-sm file:font-medium file:text-foreground placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50",
|
|
157
157
|
className
|
|
158
158
|
),
|
|
159
159
|
ref,
|
|
@@ -163,6 +163,58 @@ var Input = React2__namespace.forwardRef(
|
|
|
163
163
|
}
|
|
164
164
|
);
|
|
165
165
|
Input.displayName = "Input";
|
|
166
|
+
var PasswordInput = React2__namespace.forwardRef(
|
|
167
|
+
({ className, visible, onVisibleChange, disabled, ...props }, ref) => {
|
|
168
|
+
const [internalVisible, setInternalVisible] = React2__namespace.useState(false);
|
|
169
|
+
const isControlled = visible !== void 0;
|
|
170
|
+
const show = isControlled ? visible : internalVisible;
|
|
171
|
+
const toggle = () => {
|
|
172
|
+
const next = !show;
|
|
173
|
+
if (!isControlled) setInternalVisible(next);
|
|
174
|
+
onVisibleChange?.(next);
|
|
175
|
+
};
|
|
176
|
+
return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "relative", children: [
|
|
177
|
+
/* @__PURE__ */ jsxRuntime.jsx(
|
|
178
|
+
Input,
|
|
179
|
+
{
|
|
180
|
+
type: show ? "text" : "password",
|
|
181
|
+
className: ui.cn("pr-10", className),
|
|
182
|
+
disabled,
|
|
183
|
+
ref,
|
|
184
|
+
...props
|
|
185
|
+
}
|
|
186
|
+
),
|
|
187
|
+
/* @__PURE__ */ jsxRuntime.jsx(
|
|
188
|
+
"button",
|
|
189
|
+
{
|
|
190
|
+
type: "button",
|
|
191
|
+
onClick: toggle,
|
|
192
|
+
disabled,
|
|
193
|
+
tabIndex: -1,
|
|
194
|
+
"aria-label": show ? "Hide password" : "Show password",
|
|
195
|
+
"aria-pressed": show,
|
|
196
|
+
className: "absolute inset-y-0 right-0 flex items-center justify-center px-3 text-muted-foreground transition-colors hover:text-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50",
|
|
197
|
+
children: show ? /* @__PURE__ */ jsxRuntime.jsx(lucideReact.EyeOff, { className: "size-4", "aria-hidden": "true" }) : /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Eye, { className: "size-4", "aria-hidden": "true" })
|
|
198
|
+
}
|
|
199
|
+
)
|
|
200
|
+
] });
|
|
201
|
+
}
|
|
202
|
+
);
|
|
203
|
+
PasswordInput.displayName = "PasswordInput";
|
|
204
|
+
var Textarea = React2__namespace.forwardRef(({ className, ...props }, ref) => {
|
|
205
|
+
return /* @__PURE__ */ jsxRuntime.jsx(
|
|
206
|
+
"textarea",
|
|
207
|
+
{
|
|
208
|
+
className: ui.cn(
|
|
209
|
+
"flex min-h-[80px] w-full rounded-md border border-input bg-background px-3 py-2 text-base ring-offset-background placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50",
|
|
210
|
+
className
|
|
211
|
+
),
|
|
212
|
+
ref,
|
|
213
|
+
...props
|
|
214
|
+
}
|
|
215
|
+
);
|
|
216
|
+
});
|
|
217
|
+
Textarea.displayName = "Textarea";
|
|
166
218
|
var Switch = React2__namespace.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx(
|
|
167
219
|
SwitchPrimitives__namespace.Root,
|
|
168
220
|
{
|
|
@@ -436,6 +488,10 @@ var IconInput = ({ value, onChange }) => {
|
|
|
436
488
|
)
|
|
437
489
|
] });
|
|
438
490
|
};
|
|
491
|
+
var SIZE = {
|
|
492
|
+
sm: { input: "h-8 text-sm", select: "h-8", label: "text-xs", desc: "text-xs" },
|
|
493
|
+
md: { input: "", select: "", label: "", desc: "" }
|
|
494
|
+
};
|
|
439
495
|
function itemClasses(labelPosition, className) {
|
|
440
496
|
return ui.cn(
|
|
441
497
|
labelPosition === "side" && "grid grid-cols-3 items-center gap-2",
|
|
@@ -453,21 +509,74 @@ var InputField = ({
|
|
|
453
509
|
value,
|
|
454
510
|
onChange,
|
|
455
511
|
labelPosition = "side",
|
|
512
|
+
size = "sm",
|
|
456
513
|
className
|
|
457
514
|
}) => /* @__PURE__ */ jsxRuntime.jsxs(FormItem, { className: itemClasses(labelPosition, className), children: [
|
|
458
|
-
label && /* @__PURE__ */ jsxRuntime.jsx(FormLabel, { className:
|
|
515
|
+
label && /* @__PURE__ */ jsxRuntime.jsx(FormLabel, { className: SIZE[size].label, children: label }),
|
|
459
516
|
/* @__PURE__ */ jsxRuntime.jsxs("div", { className: inputWrapper(labelPosition), children: [
|
|
460
517
|
/* @__PURE__ */ jsxRuntime.jsx(FormControl, { children: /* @__PURE__ */ jsxRuntime.jsx(
|
|
461
518
|
Input,
|
|
462
519
|
{
|
|
463
|
-
className:
|
|
520
|
+
className: SIZE[size].input,
|
|
464
521
|
placeholder,
|
|
465
522
|
value: value ?? "",
|
|
466
523
|
onChange: (e) => onChange?.(e.target.value)
|
|
467
524
|
}
|
|
468
525
|
) }),
|
|
469
|
-
description && /* @__PURE__ */ jsxRuntime.jsx(FormDescription, { className:
|
|
470
|
-
/* @__PURE__ */ jsxRuntime.jsx(FormMessage, { className:
|
|
526
|
+
description && /* @__PURE__ */ jsxRuntime.jsx(FormDescription, { className: SIZE[size].desc, children: description }),
|
|
527
|
+
/* @__PURE__ */ jsxRuntime.jsx(FormMessage, { className: SIZE[size].desc })
|
|
528
|
+
] })
|
|
529
|
+
] });
|
|
530
|
+
var PasswordField = ({
|
|
531
|
+
label,
|
|
532
|
+
description,
|
|
533
|
+
placeholder,
|
|
534
|
+
value,
|
|
535
|
+
onChange,
|
|
536
|
+
labelPosition = "side",
|
|
537
|
+
size = "sm",
|
|
538
|
+
className
|
|
539
|
+
}) => /* @__PURE__ */ jsxRuntime.jsxs(FormItem, { className: itemClasses(labelPosition, className), children: [
|
|
540
|
+
label && /* @__PURE__ */ jsxRuntime.jsx(FormLabel, { className: SIZE[size].label, children: label }),
|
|
541
|
+
/* @__PURE__ */ jsxRuntime.jsxs("div", { className: inputWrapper(labelPosition), children: [
|
|
542
|
+
/* @__PURE__ */ jsxRuntime.jsx(FormControl, { children: /* @__PURE__ */ jsxRuntime.jsx(
|
|
543
|
+
PasswordInput,
|
|
544
|
+
{
|
|
545
|
+
className: SIZE[size].input,
|
|
546
|
+
placeholder,
|
|
547
|
+
value: value ?? "",
|
|
548
|
+
onChange: (e) => onChange?.(e.target.value)
|
|
549
|
+
}
|
|
550
|
+
) }),
|
|
551
|
+
description && /* @__PURE__ */ jsxRuntime.jsx(FormDescription, { className: SIZE[size].desc, children: description }),
|
|
552
|
+
/* @__PURE__ */ jsxRuntime.jsx(FormMessage, { className: SIZE[size].desc })
|
|
553
|
+
] })
|
|
554
|
+
] });
|
|
555
|
+
var TextareaField = ({
|
|
556
|
+
label,
|
|
557
|
+
description,
|
|
558
|
+
placeholder,
|
|
559
|
+
value,
|
|
560
|
+
onChange,
|
|
561
|
+
rows,
|
|
562
|
+
labelPosition = "side",
|
|
563
|
+
size = "sm",
|
|
564
|
+
className
|
|
565
|
+
}) => /* @__PURE__ */ jsxRuntime.jsxs(FormItem, { className: itemClasses(labelPosition, className), children: [
|
|
566
|
+
label && /* @__PURE__ */ jsxRuntime.jsx(FormLabel, { className: SIZE[size].label, children: label }),
|
|
567
|
+
/* @__PURE__ */ jsxRuntime.jsxs("div", { className: inputWrapper(labelPosition), children: [
|
|
568
|
+
/* @__PURE__ */ jsxRuntime.jsx(FormControl, { children: /* @__PURE__ */ jsxRuntime.jsx(
|
|
569
|
+
Textarea,
|
|
570
|
+
{
|
|
571
|
+
className: size === "sm" ? "text-sm" : void 0,
|
|
572
|
+
rows,
|
|
573
|
+
placeholder,
|
|
574
|
+
value: value ?? "",
|
|
575
|
+
onChange: (e) => onChange?.(e.target.value)
|
|
576
|
+
}
|
|
577
|
+
) }),
|
|
578
|
+
description && /* @__PURE__ */ jsxRuntime.jsx(FormDescription, { className: SIZE[size].desc, children: description }),
|
|
579
|
+
/* @__PURE__ */ jsxRuntime.jsx(FormMessage, { className: SIZE[size].desc })
|
|
471
580
|
] })
|
|
472
581
|
] });
|
|
473
582
|
var SelectField = ({
|
|
@@ -478,16 +587,17 @@ var SelectField = ({
|
|
|
478
587
|
onChange,
|
|
479
588
|
placeholder = "Select type",
|
|
480
589
|
labelPosition = "side",
|
|
590
|
+
size = "sm",
|
|
481
591
|
className
|
|
482
592
|
}) => /* @__PURE__ */ jsxRuntime.jsxs(FormItem, { className: itemClasses(labelPosition, className), children: [
|
|
483
|
-
label && /* @__PURE__ */ jsxRuntime.jsx(FormLabel, { className:
|
|
593
|
+
label && /* @__PURE__ */ jsxRuntime.jsx(FormLabel, { className: SIZE[size].label, children: label }),
|
|
484
594
|
/* @__PURE__ */ jsxRuntime.jsxs("div", { className: inputWrapper(labelPosition), children: [
|
|
485
595
|
/* @__PURE__ */ jsxRuntime.jsxs(Select, { value: value ?? "", onValueChange: onChange, children: [
|
|
486
|
-
/* @__PURE__ */ jsxRuntime.jsx(FormControl, { children: /* @__PURE__ */ jsxRuntime.jsx(SelectTrigger, { className:
|
|
596
|
+
/* @__PURE__ */ jsxRuntime.jsx(FormControl, { children: /* @__PURE__ */ jsxRuntime.jsx(SelectTrigger, { className: SIZE[size].select, children: /* @__PURE__ */ jsxRuntime.jsx(SelectValue, { placeholder }) }) }),
|
|
487
597
|
/* @__PURE__ */ jsxRuntime.jsx(SelectContent, { children: options.map((o) => /* @__PURE__ */ jsxRuntime.jsx(SelectItem, { value: o.value, children: o.label }, o.value)) })
|
|
488
598
|
] }),
|
|
489
|
-
description && /* @__PURE__ */ jsxRuntime.jsx(FormDescription, { className:
|
|
490
|
-
/* @__PURE__ */ jsxRuntime.jsx(FormMessage, { className:
|
|
599
|
+
description && /* @__PURE__ */ jsxRuntime.jsx(FormDescription, { className: SIZE[size].desc, children: description }),
|
|
600
|
+
/* @__PURE__ */ jsxRuntime.jsx(FormMessage, { className: SIZE[size].desc })
|
|
491
601
|
] })
|
|
492
602
|
] });
|
|
493
603
|
var BooleanField = ({
|
|
@@ -495,22 +605,23 @@ var BooleanField = ({
|
|
|
495
605
|
description,
|
|
496
606
|
value,
|
|
497
607
|
onChange,
|
|
498
|
-
labelPosition = "side"
|
|
608
|
+
labelPosition = "side",
|
|
609
|
+
size = "sm"
|
|
499
610
|
}) => {
|
|
500
611
|
if (labelPosition === "side") {
|
|
501
612
|
return /* @__PURE__ */ jsxRuntime.jsxs(FormItem, { className: "flex items-center justify-between rounded-md border p-2", children: [
|
|
502
613
|
/* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
|
|
503
|
-
label && /* @__PURE__ */ jsxRuntime.jsx(FormLabel, { className:
|
|
504
|
-
description && /* @__PURE__ */ jsxRuntime.jsx(FormDescription, { className:
|
|
614
|
+
label && /* @__PURE__ */ jsxRuntime.jsx(FormLabel, { className: SIZE[size].label, children: label }),
|
|
615
|
+
description && /* @__PURE__ */ jsxRuntime.jsx(FormDescription, { className: SIZE[size].desc, children: description })
|
|
505
616
|
] }),
|
|
506
617
|
/* @__PURE__ */ jsxRuntime.jsx(FormControl, { children: /* @__PURE__ */ jsxRuntime.jsx(Switch, { checked: !!value, onCheckedChange: onChange }) })
|
|
507
618
|
] });
|
|
508
619
|
}
|
|
509
620
|
return /* @__PURE__ */ jsxRuntime.jsxs(FormItem, { className: "space-y-2", children: [
|
|
510
|
-
label && /* @__PURE__ */ jsxRuntime.jsx(FormLabel, { className:
|
|
621
|
+
label && /* @__PURE__ */ jsxRuntime.jsx(FormLabel, { className: SIZE[size].label, children: label }),
|
|
511
622
|
/* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center justify-between rounded-md border p-2", children: [
|
|
512
623
|
/* @__PURE__ */ jsxRuntime.jsx(FormControl, { children: /* @__PURE__ */ jsxRuntime.jsx(Switch, { checked: !!value, onCheckedChange: onChange }) }),
|
|
513
|
-
description && /* @__PURE__ */ jsxRuntime.jsx(FormDescription, { className: "ml-2
|
|
624
|
+
description && /* @__PURE__ */ jsxRuntime.jsx(FormDescription, { className: ui.cn("ml-2", SIZE[size].desc), children: description })
|
|
514
625
|
] })
|
|
515
626
|
] });
|
|
516
627
|
};
|
|
@@ -522,9 +633,10 @@ var ColorField = ({
|
|
|
522
633
|
presetColors,
|
|
523
634
|
defaultValue,
|
|
524
635
|
labelPosition = "side",
|
|
636
|
+
size = "sm",
|
|
525
637
|
className
|
|
526
638
|
}) => /* @__PURE__ */ jsxRuntime.jsxs(FormItem, { className: itemClasses(labelPosition, className), children: [
|
|
527
|
-
label && /* @__PURE__ */ jsxRuntime.jsx(FormLabel, { className:
|
|
639
|
+
label && /* @__PURE__ */ jsxRuntime.jsx(FormLabel, { className: SIZE[size].label, children: label }),
|
|
528
640
|
/* @__PURE__ */ jsxRuntime.jsxs("div", { className: inputWrapper(labelPosition), children: [
|
|
529
641
|
/* @__PURE__ */ jsxRuntime.jsx(FormControl, { children: /* @__PURE__ */ jsxRuntime.jsx(
|
|
530
642
|
ColorSwatches,
|
|
@@ -535,8 +647,8 @@ var ColorField = ({
|
|
|
535
647
|
defaultValue
|
|
536
648
|
}
|
|
537
649
|
) }),
|
|
538
|
-
description && /* @__PURE__ */ jsxRuntime.jsx(FormDescription, { className:
|
|
539
|
-
/* @__PURE__ */ jsxRuntime.jsx(FormMessage, { className:
|
|
650
|
+
description && /* @__PURE__ */ jsxRuntime.jsx(FormDescription, { className: SIZE[size].desc, children: description }),
|
|
651
|
+
/* @__PURE__ */ jsxRuntime.jsx(FormMessage, { className: SIZE[size].desc })
|
|
540
652
|
] })
|
|
541
653
|
] });
|
|
542
654
|
var NumberField = ({
|
|
@@ -548,9 +660,10 @@ var NumberField = ({
|
|
|
548
660
|
max,
|
|
549
661
|
step,
|
|
550
662
|
labelPosition = "side",
|
|
663
|
+
size = "sm",
|
|
551
664
|
className
|
|
552
665
|
}) => /* @__PURE__ */ jsxRuntime.jsxs(FormItem, { className: itemClasses(labelPosition, className), children: [
|
|
553
|
-
label && /* @__PURE__ */ jsxRuntime.jsx(FormLabel, { className:
|
|
666
|
+
label && /* @__PURE__ */ jsxRuntime.jsx(FormLabel, { className: SIZE[size].label, children: label }),
|
|
554
667
|
/* @__PURE__ */ jsxRuntime.jsxs("div", { className: inputWrapper(labelPosition), children: [
|
|
555
668
|
/* @__PURE__ */ jsxRuntime.jsx(FormControl, { children: /* @__PURE__ */ jsxRuntime.jsx(
|
|
556
669
|
SliderNumber,
|
|
@@ -562,8 +675,8 @@ var NumberField = ({
|
|
|
562
675
|
step
|
|
563
676
|
}
|
|
564
677
|
) }),
|
|
565
|
-
description && /* @__PURE__ */ jsxRuntime.jsx(FormDescription, { className:
|
|
566
|
-
/* @__PURE__ */ jsxRuntime.jsx(FormMessage, { className:
|
|
678
|
+
description && /* @__PURE__ */ jsxRuntime.jsx(FormDescription, { className: SIZE[size].desc, children: description }),
|
|
679
|
+
/* @__PURE__ */ jsxRuntime.jsx(FormMessage, { className: SIZE[size].desc })
|
|
567
680
|
] })
|
|
568
681
|
] });
|
|
569
682
|
var IconField = ({
|
|
@@ -572,17 +685,20 @@ var IconField = ({
|
|
|
572
685
|
value,
|
|
573
686
|
onChange,
|
|
574
687
|
labelPosition = "side",
|
|
688
|
+
size = "sm",
|
|
575
689
|
className
|
|
576
690
|
}) => /* @__PURE__ */ jsxRuntime.jsxs(FormItem, { className: itemClasses(labelPosition, className), children: [
|
|
577
|
-
label && /* @__PURE__ */ jsxRuntime.jsx(FormLabel, { className:
|
|
691
|
+
label && /* @__PURE__ */ jsxRuntime.jsx(FormLabel, { className: SIZE[size].label, children: label }),
|
|
578
692
|
/* @__PURE__ */ jsxRuntime.jsxs("div", { className: inputWrapper(labelPosition), children: [
|
|
579
693
|
/* @__PURE__ */ jsxRuntime.jsx(FormControl, { children: /* @__PURE__ */ jsxRuntime.jsx(IconInput, { value, onChange }) }),
|
|
580
|
-
description && /* @__PURE__ */ jsxRuntime.jsx(FormDescription, { className:
|
|
581
|
-
/* @__PURE__ */ jsxRuntime.jsx(FormMessage, { className:
|
|
694
|
+
description && /* @__PURE__ */ jsxRuntime.jsx(FormDescription, { className: SIZE[size].desc, children: description }),
|
|
695
|
+
/* @__PURE__ */ jsxRuntime.jsx(FormMessage, { className: SIZE[size].desc })
|
|
582
696
|
] })
|
|
583
697
|
] });
|
|
584
698
|
var Field = {
|
|
585
699
|
Input: InputField,
|
|
700
|
+
Password: PasswordField,
|
|
701
|
+
Textarea: TextareaField,
|
|
586
702
|
Boolean: BooleanField,
|
|
587
703
|
Color: ColorField,
|
|
588
704
|
Number: NumberField,
|
|
@@ -597,7 +713,7 @@ function chunk(arr, size) {
|
|
|
597
713
|
for (let i = 0; i < arr.length; i += size) out.push(arr.slice(i, i + size));
|
|
598
714
|
return out;
|
|
599
715
|
}
|
|
600
|
-
function renderField(field, parentName, control, labelPosition) {
|
|
716
|
+
function renderField(field, parentName, control, labelPosition, size) {
|
|
601
717
|
return /* @__PURE__ */ jsxRuntime.jsx(
|
|
602
718
|
FormField,
|
|
603
719
|
{
|
|
@@ -614,11 +730,21 @@ function renderField(field, parentName, control, labelPosition) {
|
|
|
614
730
|
step: field.step,
|
|
615
731
|
presetColors: field.presetColors,
|
|
616
732
|
defaultValue: field.defaultValue,
|
|
733
|
+
rows: field.rows,
|
|
617
734
|
labelPosition,
|
|
735
|
+
size,
|
|
618
736
|
value: rhf.value,
|
|
619
737
|
onChange: rhf.onChange
|
|
620
738
|
};
|
|
621
739
|
switch (field.type) {
|
|
740
|
+
case "password":
|
|
741
|
+
return /* @__PURE__ */ jsxRuntime.jsx(
|
|
742
|
+
PasswordField,
|
|
743
|
+
{
|
|
744
|
+
...common,
|
|
745
|
+
placeholder: field.placeholder ?? `Enter ${field.name}`
|
|
746
|
+
}
|
|
747
|
+
);
|
|
622
748
|
case "boolean":
|
|
623
749
|
return /* @__PURE__ */ jsxRuntime.jsx(BooleanField, { ...common });
|
|
624
750
|
case "color":
|
|
@@ -629,6 +755,14 @@ function renderField(field, parentName, control, labelPosition) {
|
|
|
629
755
|
return /* @__PURE__ */ jsxRuntime.jsx(SelectField, { ...common });
|
|
630
756
|
case "icon":
|
|
631
757
|
return /* @__PURE__ */ jsxRuntime.jsx(IconField, { ...common });
|
|
758
|
+
case "textarea":
|
|
759
|
+
return /* @__PURE__ */ jsxRuntime.jsx(
|
|
760
|
+
TextareaField,
|
|
761
|
+
{
|
|
762
|
+
...common,
|
|
763
|
+
placeholder: field.placeholder ?? `Enter ${field.name}`
|
|
764
|
+
}
|
|
765
|
+
);
|
|
632
766
|
case "text":
|
|
633
767
|
default:
|
|
634
768
|
return /* @__PURE__ */ jsxRuntime.jsx(
|
|
@@ -644,9 +778,9 @@ function renderField(field, parentName, control, labelPosition) {
|
|
|
644
778
|
field.name
|
|
645
779
|
);
|
|
646
780
|
}
|
|
647
|
-
function renderRows(fields, rowConfig, parentName, control, labelPosition) {
|
|
781
|
+
function renderRows(fields, rowConfig, parentName, control, labelPosition, size) {
|
|
648
782
|
if (!rowConfig || rowConfig.length === 0) {
|
|
649
|
-
return /* @__PURE__ */ jsxRuntime.jsx("div", { className: "grid gap-4", children: chunk(fields, 2).map((row, i) => /* @__PURE__ */ jsxRuntime.jsx("div", { className: "grid grid-cols-1 gap-4 md:grid-cols-2", children: row.map((f) => renderField(f, parentName, control, labelPosition)) }, i)) });
|
|
783
|
+
return /* @__PURE__ */ jsxRuntime.jsx("div", { className: "grid gap-4", children: chunk(fields, 2).map((row, i) => /* @__PURE__ */ jsxRuntime.jsx("div", { className: "grid grid-cols-1 gap-4 md:grid-cols-2", children: row.map((f) => renderField(f, parentName, control, labelPosition, size)) }, i)) });
|
|
650
784
|
}
|
|
651
785
|
const used = new Set(rowConfig.flatMap((r) => r.fields));
|
|
652
786
|
const unassigned = fields.filter((f) => !used.has(f.name));
|
|
@@ -658,12 +792,12 @@ function renderRows(fields, rowConfig, parentName, control, labelPosition) {
|
|
|
658
792
|
"div",
|
|
659
793
|
{
|
|
660
794
|
className: "grid grid-cols-1 gap-4 md:grid-cols-2",
|
|
661
|
-
children: cnk.map((f) => renderField(f, parentName, control, labelPosition))
|
|
795
|
+
children: cnk.map((f) => renderField(f, parentName, control, labelPosition, size))
|
|
662
796
|
},
|
|
663
797
|
`${row.id}-${idx}`
|
|
664
798
|
));
|
|
665
799
|
}),
|
|
666
|
-
unassigned.length > 0 && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "grid gap-4", children: chunk(unassigned, 2).map((row, i) => /* @__PURE__ */ jsxRuntime.jsx("div", { className: "grid grid-cols-1 gap-4 md:grid-cols-2", children: row.map((f) => renderField(f, parentName, control, labelPosition)) }, `u-${i}`)) })
|
|
800
|
+
unassigned.length > 0 && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "grid gap-4", children: chunk(unassigned, 2).map((row, i) => /* @__PURE__ */ jsxRuntime.jsx("div", { className: "grid grid-cols-1 gap-4 md:grid-cols-2", children: row.map((f) => renderField(f, parentName, control, labelPosition, size)) }, `u-${i}`)) })
|
|
667
801
|
] });
|
|
668
802
|
}
|
|
669
803
|
var ObjectField = ({
|
|
@@ -671,7 +805,8 @@ var ObjectField = ({
|
|
|
671
805
|
name,
|
|
672
806
|
fields,
|
|
673
807
|
rowConfig,
|
|
674
|
-
labelPosition = "side"
|
|
808
|
+
labelPosition = "side",
|
|
809
|
+
size = "sm"
|
|
675
810
|
}) => {
|
|
676
811
|
const grouped = fields.reduce((acc, f) => {
|
|
677
812
|
const key = f.group ?? "_ungrouped";
|
|
@@ -682,7 +817,7 @@ var ObjectField = ({
|
|
|
682
817
|
delete grouped["_ungrouped"];
|
|
683
818
|
const groupedEntries = Object.entries(grouped);
|
|
684
819
|
return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "space-y-6", children: [
|
|
685
|
-
ungrouped.length > 0 && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "space-y-4", children: renderRows(ungrouped, rowConfig, name, control, labelPosition) }),
|
|
820
|
+
ungrouped.length > 0 && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "space-y-4", children: renderRows(ungrouped, rowConfig, name, control, labelPosition, size) }),
|
|
686
821
|
groupedEntries.length > 0 && /* @__PURE__ */ jsxRuntime.jsx(
|
|
687
822
|
ui.Accordion,
|
|
688
823
|
{
|
|
@@ -694,7 +829,7 @@ var ObjectField = ({
|
|
|
694
829
|
humanize(group),
|
|
695
830
|
" Settings"
|
|
696
831
|
] }),
|
|
697
|
-
/* @__PURE__ */ jsxRuntime.jsx(ui.AccordionContent, { className: "px-3 pb-3", children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "space-y-4", children: renderRows(gFields, rowConfig, name, control, labelPosition) }) })
|
|
832
|
+
/* @__PURE__ */ jsxRuntime.jsx(ui.AccordionContent, { className: "px-3 pb-3", children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "space-y-4", children: renderRows(gFields, rowConfig, name, control, labelPosition, size) }) })
|
|
698
833
|
] }, group))
|
|
699
834
|
}
|
|
700
835
|
)
|
|
@@ -703,26 +838,14 @@ var ObjectField = ({
|
|
|
703
838
|
var FormField2 = Object.assign(FormField, {
|
|
704
839
|
ObjectField,
|
|
705
840
|
Input: InputField,
|
|
841
|
+
Password: PasswordField,
|
|
842
|
+
Textarea: TextareaField,
|
|
706
843
|
Boolean: BooleanField,
|
|
707
844
|
Color: ColorField,
|
|
708
845
|
Number: NumberField,
|
|
709
846
|
Select: SelectField,
|
|
710
847
|
Icon: IconField
|
|
711
848
|
});
|
|
712
|
-
var Textarea = React2__namespace.forwardRef(({ className, ...props }, ref) => {
|
|
713
|
-
return /* @__PURE__ */ jsxRuntime.jsx(
|
|
714
|
-
"textarea",
|
|
715
|
-
{
|
|
716
|
-
className: ui.cn(
|
|
717
|
-
"flex min-h-[80px] w-full rounded-md border border-input bg-background px-3 py-2 text-base ring-offset-background placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50",
|
|
718
|
-
className
|
|
719
|
-
),
|
|
720
|
-
ref,
|
|
721
|
-
...props
|
|
722
|
-
}
|
|
723
|
-
);
|
|
724
|
-
});
|
|
725
|
-
Textarea.displayName = "Textarea";
|
|
726
849
|
var Checkbox = React2__namespace.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx(
|
|
727
850
|
CheckboxPrimitive__namespace.Root,
|
|
728
851
|
{
|
|
@@ -1135,6 +1258,8 @@ exports.InputGroupTextarea = InputGroupTextarea;
|
|
|
1135
1258
|
exports.Label = Label;
|
|
1136
1259
|
exports.NumberField = NumberField;
|
|
1137
1260
|
exports.ObjectField = ObjectField;
|
|
1261
|
+
exports.PasswordField = PasswordField;
|
|
1262
|
+
exports.PasswordInput = PasswordInput;
|
|
1138
1263
|
exports.RadioGroup = RadioGroup;
|
|
1139
1264
|
exports.RadioGroupItem = RadioGroupItem;
|
|
1140
1265
|
exports.Select = Select;
|
|
@@ -1152,6 +1277,7 @@ exports.Slider = Slider;
|
|
|
1152
1277
|
exports.SliderNumber = SliderNumber;
|
|
1153
1278
|
exports.Switch = Switch;
|
|
1154
1279
|
exports.Textarea = Textarea;
|
|
1280
|
+
exports.TextareaField = TextareaField;
|
|
1155
1281
|
exports.useFormField = useFormField;
|
|
1156
1282
|
//# sourceMappingURL=index.cjs.map
|
|
1157
1283
|
//# sourceMappingURL=index.cjs.map
|