@invana/forms 0.0.32 → 0.0.34

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (7) hide show
  1. package/dist/index.cjs +186 -126
  2. package/dist/index.cjs.map +1 -1
  3. package/dist/index.d.cts +22 -9
  4. package/dist/index.d.ts +22 -9
  5. package/dist/index.js +186 -126
  6. package/dist/index.js.map +1 -1
  7. package/package.json +5 -5
package/dist/index.cjs CHANGED
@@ -645,6 +645,7 @@ var SliderNumber = ({
645
645
  min = 0,
646
646
  max = 100,
647
647
  step = 1,
648
+ disabled,
648
649
  className
649
650
  }) => {
650
651
  const [local, setLocal] = React2__namespace.useState(value);
@@ -666,6 +667,7 @@ var SliderNumber = ({
666
667
  min,
667
668
  max,
668
669
  step,
670
+ disabled,
669
671
  className: "flex-1"
670
672
  }
671
673
  ),
@@ -678,7 +680,8 @@ var SliderNumber = ({
678
680
  className: "h-8 w-16",
679
681
  min,
680
682
  max,
681
- step
683
+ step,
684
+ disabled
682
685
  }
683
686
  )
684
687
  ] });
@@ -780,13 +783,20 @@ function FieldLabel({
780
783
  label,
781
784
  badge,
782
785
  size,
786
+ disabled,
783
787
  className
784
788
  }) {
785
789
  if (!label && !badge) return null;
786
- return /* @__PURE__ */ jsxRuntime.jsxs(FormLabel, { className: ui.cn(SIZE[size].label, SIZE[size].fieldLabel, className), children: [
787
- label,
788
- badge && /* @__PURE__ */ jsxRuntime.jsx(StatusPill, { badge })
789
- ] });
790
+ return /* @__PURE__ */ jsxRuntime.jsxs(
791
+ FormLabel,
792
+ {
793
+ className: ui.cn(SIZE[size].label, SIZE[size].fieldLabel, disabled && "opacity-70", className),
794
+ children: [
795
+ label,
796
+ badge && /* @__PURE__ */ jsxRuntime.jsx(StatusPill, { badge })
797
+ ]
798
+ }
799
+ );
790
800
  }
791
801
  var AffixedInput = React2__namespace.forwardRef(({ unit, aside, className, ...props }, ref) => {
792
802
  if (!unit && !aside) return /* @__PURE__ */ jsxRuntime.jsx(Input, { ref, className, ...props });
@@ -811,9 +821,10 @@ var InputField = ({
811
821
  size = "sm",
812
822
  labelClassName,
813
823
  badge,
814
- className
824
+ className,
825
+ disabled
815
826
  }) => /* @__PURE__ */ jsxRuntime.jsxs(FormItem, { className: itemClasses(labelPosition, size, className), children: [
816
- /* @__PURE__ */ jsxRuntime.jsx(FieldLabel, { label, badge, size, className: labelClassName }),
827
+ /* @__PURE__ */ jsxRuntime.jsx(FieldLabel, { label, badge, size, disabled, className: labelClassName }),
817
828
  /* @__PURE__ */ jsxRuntime.jsxs("div", { className: inputWrapper(labelPosition, size), children: [
818
829
  /* @__PURE__ */ jsxRuntime.jsx(FormControl, { children: /* @__PURE__ */ jsxRuntime.jsx(
819
830
  AffixedInput,
@@ -822,6 +833,7 @@ var InputField = ({
822
833
  unit,
823
834
  aside,
824
835
  placeholder,
836
+ disabled,
825
837
  value: value ?? "",
826
838
  onChange: (e) => onChange?.(e.target.value)
827
839
  }
@@ -840,15 +852,17 @@ var PasswordField = ({
840
852
  size = "sm",
841
853
  labelClassName,
842
854
  badge,
843
- className
855
+ className,
856
+ disabled
844
857
  }) => /* @__PURE__ */ jsxRuntime.jsxs(FormItem, { className: itemClasses(labelPosition, size, className), children: [
845
- /* @__PURE__ */ jsxRuntime.jsx(FieldLabel, { label, badge, size, className: labelClassName }),
858
+ /* @__PURE__ */ jsxRuntime.jsx(FieldLabel, { label, badge, size, disabled, className: labelClassName }),
846
859
  /* @__PURE__ */ jsxRuntime.jsxs("div", { className: inputWrapper(labelPosition, size), children: [
847
860
  /* @__PURE__ */ jsxRuntime.jsx(FormControl, { children: /* @__PURE__ */ jsxRuntime.jsx(
848
861
  PasswordInput,
849
862
  {
850
863
  className: SIZE[size].input,
851
864
  placeholder,
865
+ disabled,
852
866
  value: value ?? "",
853
867
  onChange: (e) => onChange?.(e.target.value)
854
868
  }
@@ -868,9 +882,10 @@ var TextareaField = ({
868
882
  size = "sm",
869
883
  labelClassName,
870
884
  badge,
871
- className
885
+ className,
886
+ disabled
872
887
  }) => /* @__PURE__ */ jsxRuntime.jsxs(FormItem, { className: itemClasses(labelPosition, size, className), children: [
873
- /* @__PURE__ */ jsxRuntime.jsx(FieldLabel, { label, badge, size, className: labelClassName }),
888
+ /* @__PURE__ */ jsxRuntime.jsx(FieldLabel, { label, badge, size, disabled, className: labelClassName }),
874
889
  /* @__PURE__ */ jsxRuntime.jsxs("div", { className: inputWrapper(labelPosition, size), children: [
875
890
  /* @__PURE__ */ jsxRuntime.jsx(FormControl, { children: /* @__PURE__ */ jsxRuntime.jsx(
876
891
  Textarea,
@@ -878,6 +893,7 @@ var TextareaField = ({
878
893
  className: SIZE[size].textarea || void 0,
879
894
  rows,
880
895
  placeholder,
896
+ disabled,
881
897
  value: value ?? "",
882
898
  onChange: (e) => onChange?.(e.target.value)
883
899
  }
@@ -897,13 +913,14 @@ var SelectField = ({
897
913
  size = "sm",
898
914
  labelClassName,
899
915
  badge,
900
- className
916
+ className,
917
+ disabled
901
918
  }) => /* @__PURE__ */ jsxRuntime.jsxs(FormItem, { className: itemClasses(labelPosition, size, className), children: [
902
- /* @__PURE__ */ jsxRuntime.jsx(FieldLabel, { label, badge, size, className: labelClassName }),
919
+ /* @__PURE__ */ jsxRuntime.jsx(FieldLabel, { label, badge, size, disabled, className: labelClassName }),
903
920
  /* @__PURE__ */ jsxRuntime.jsxs("div", { className: inputWrapper(labelPosition, size), children: [
904
- /* @__PURE__ */ jsxRuntime.jsxs(Select, { value: value ?? "", onValueChange: onChange, children: [
921
+ /* @__PURE__ */ jsxRuntime.jsxs(Select, { value: value ?? "", onValueChange: onChange, disabled, children: [
905
922
  /* @__PURE__ */ jsxRuntime.jsx(FormControl, { children: /* @__PURE__ */ jsxRuntime.jsx(SelectTrigger, { className: SIZE[size].select, children: /* @__PURE__ */ jsxRuntime.jsx(SelectValue, { placeholder }) }) }),
906
- /* @__PURE__ */ jsxRuntime.jsx(SelectContent, { children: options.map((o) => /* @__PURE__ */ jsxRuntime.jsx(SelectItem, { value: o.value, children: o.label }, o.value)) })
923
+ /* @__PURE__ */ jsxRuntime.jsx(SelectContent, { children: options.map((o) => /* @__PURE__ */ jsxRuntime.jsx(SelectItem, { value: o.value, disabled: o.disabled, children: o.label }, o.value)) })
907
924
  ] }),
908
925
  description && /* @__PURE__ */ jsxRuntime.jsx(FormDescription, { className: SIZE[size].desc, children: description }),
909
926
  /* @__PURE__ */ jsxRuntime.jsx(FormMessage, { className: SIZE[size].desc })
@@ -920,37 +937,53 @@ var BooleanField = ({
920
937
  labelClassName,
921
938
  badge,
922
939
  className,
923
- boxed = false
940
+ boxed = false,
941
+ disabled
924
942
  }) => {
925
943
  const boxClass = boxed ? "rounded-md border p-2" : "";
926
944
  if (control === "checkbox") {
927
- return /* @__PURE__ */ jsxRuntime.jsxs(FormItem, { className: ui.cn("flex items-center gap-2 space-y-0", className), children: [
928
- /* @__PURE__ */ jsxRuntime.jsx(FormControl, { children: /* @__PURE__ */ jsxRuntime.jsx(
929
- Checkbox,
930
- {
931
- className: SIZE[size].check,
932
- checked: !!value,
933
- onCheckedChange: onChange
934
- }
935
- ) }),
936
- /* @__PURE__ */ jsxRuntime.jsx(
937
- FieldLabel,
938
- {
939
- label,
940
- badge,
941
- size,
942
- className: ui.cn(
943
- "!mt-0 cursor-pointer font-normal leading-none",
944
- labelClassName
945
- )
946
- }
947
- )
948
- ] });
945
+ return /* @__PURE__ */ jsxRuntime.jsxs(
946
+ FormItem,
947
+ {
948
+ className: ui.cn(
949
+ "flex gap-2 space-y-0",
950
+ description ? "items-start" : "items-center",
951
+ className
952
+ ),
953
+ children: [
954
+ /* @__PURE__ */ jsxRuntime.jsx(FormControl, { children: /* @__PURE__ */ jsxRuntime.jsx(
955
+ Checkbox,
956
+ {
957
+ className: SIZE[size].check,
958
+ checked: !!value,
959
+ disabled,
960
+ onCheckedChange: onChange
961
+ }
962
+ ) }),
963
+ /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "space-y-1", children: [
964
+ /* @__PURE__ */ jsxRuntime.jsx(
965
+ FieldLabel,
966
+ {
967
+ label,
968
+ badge,
969
+ size,
970
+ disabled,
971
+ className: ui.cn(
972
+ "!mt-0 cursor-pointer font-normal leading-none",
973
+ labelClassName
974
+ )
975
+ }
976
+ ),
977
+ description && /* @__PURE__ */ jsxRuntime.jsx(FormDescription, { className: SIZE[size].desc, children: description })
978
+ ] })
979
+ ]
980
+ }
981
+ );
949
982
  }
950
983
  if (labelPosition === "side") {
951
984
  return /* @__PURE__ */ jsxRuntime.jsxs(FormItem, { className: ui.cn("flex items-center justify-between", boxClass), children: [
952
985
  /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
953
- /* @__PURE__ */ jsxRuntime.jsx(FieldLabel, { label, badge, size, className: labelClassName }),
986
+ /* @__PURE__ */ jsxRuntime.jsx(FieldLabel, { label, badge, size, disabled, className: labelClassName }),
954
987
  description && /* @__PURE__ */ jsxRuntime.jsx(FormDescription, { className: SIZE[size].desc, children: description })
955
988
  ] }),
956
989
  /* @__PURE__ */ jsxRuntime.jsx(FormControl, { children: /* @__PURE__ */ jsxRuntime.jsx(
@@ -958,19 +991,21 @@ var BooleanField = ({
958
991
  {
959
992
  className: SIZE[size].switch || void 0,
960
993
  checked: !!value,
994
+ disabled,
961
995
  onCheckedChange: onChange
962
996
  }
963
997
  ) })
964
998
  ] });
965
999
  }
966
1000
  return /* @__PURE__ */ jsxRuntime.jsxs(FormItem, { className: SIZE[size].stack, children: [
967
- /* @__PURE__ */ jsxRuntime.jsx(FieldLabel, { label, badge, size, className: labelClassName }),
1001
+ /* @__PURE__ */ jsxRuntime.jsx(FieldLabel, { label, badge, size, disabled, className: labelClassName }),
968
1002
  /* @__PURE__ */ jsxRuntime.jsxs("div", { className: ui.cn("flex items-center justify-between", boxClass), children: [
969
1003
  /* @__PURE__ */ jsxRuntime.jsx(FormControl, { children: /* @__PURE__ */ jsxRuntime.jsx(
970
1004
  Switch,
971
1005
  {
972
1006
  className: SIZE[size].switch || void 0,
973
1007
  checked: !!value,
1008
+ disabled,
974
1009
  onCheckedChange: onChange
975
1010
  }
976
1011
  ) }),
@@ -989,33 +1024,46 @@ var RadioField = ({
989
1024
  orientation = "vertical",
990
1025
  labelClassName,
991
1026
  badge,
992
- className
1027
+ className,
1028
+ disabled
993
1029
  }) => /* @__PURE__ */ jsxRuntime.jsxs(FormItem, { className: itemClasses(labelPosition, size, className), children: [
994
- /* @__PURE__ */ jsxRuntime.jsx(FieldLabel, { label, badge, size, className: labelClassName }),
1030
+ /* @__PURE__ */ jsxRuntime.jsx(FieldLabel, { label, badge, size, disabled, className: labelClassName }),
995
1031
  /* @__PURE__ */ jsxRuntime.jsxs("div", { className: inputWrapper(labelPosition, size), children: [
996
1032
  /* @__PURE__ */ jsxRuntime.jsx(FormControl, { children: /* @__PURE__ */ jsxRuntime.jsx(
997
1033
  RadioGroup,
998
1034
  {
999
1035
  value: value ?? "",
1000
1036
  onValueChange: onChange,
1037
+ disabled,
1001
1038
  className: orientation === "horizontal" ? "flex flex-row items-center gap-x-4" : ui.cn("flex flex-col", SIZE[size].stack),
1002
- children: options.map((o) => /* @__PURE__ */ jsxRuntime.jsxs(
1003
- "label",
1004
- {
1005
- className: "flex cursor-pointer items-center gap-2",
1006
- children: [
1007
- /* @__PURE__ */ jsxRuntime.jsx(
1008
- RadioGroupItem,
1009
- {
1010
- value: o.value,
1011
- className: ui.cn("shrink-0", SIZE[size].radio)
1012
- }
1039
+ children: options.map((o) => {
1040
+ const off = disabled || o.disabled;
1041
+ return /* @__PURE__ */ jsxRuntime.jsxs(
1042
+ "label",
1043
+ {
1044
+ className: ui.cn(
1045
+ "flex gap-2",
1046
+ o.description ? "items-start" : "items-center",
1047
+ off ? "cursor-not-allowed" : "cursor-pointer"
1013
1048
  ),
1014
- /* @__PURE__ */ jsxRuntime.jsx("span", { className: ui.cn("leading-none", SIZE[size].label), children: o.label })
1015
- ]
1016
- },
1017
- o.value
1018
- ))
1049
+ children: [
1050
+ /* @__PURE__ */ jsxRuntime.jsx(
1051
+ RadioGroupItem,
1052
+ {
1053
+ value: o.value,
1054
+ disabled: o.disabled,
1055
+ className: ui.cn("shrink-0", SIZE[size].radio)
1056
+ }
1057
+ ),
1058
+ /* @__PURE__ */ jsxRuntime.jsxs("span", { className: ui.cn("flex flex-col gap-1", off && "opacity-50"), children: [
1059
+ /* @__PURE__ */ jsxRuntime.jsx("span", { className: ui.cn(o.description ? "leading-4" : "leading-none", SIZE[size].label), children: o.label }),
1060
+ o.description && /* @__PURE__ */ jsxRuntime.jsx("span", { className: ui.cn("text-muted-foreground", SIZE[size].desc), children: o.description })
1061
+ ] })
1062
+ ]
1063
+ },
1064
+ o.value
1065
+ );
1066
+ })
1019
1067
  }
1020
1068
  ) }),
1021
1069
  description && /* @__PURE__ */ jsxRuntime.jsx(FormDescription, { className: SIZE[size].desc, children: description }),
@@ -1033,12 +1081,13 @@ var CheckboxGroupField = ({
1033
1081
  orientation = "vertical",
1034
1082
  labelClassName,
1035
1083
  badge,
1036
- className
1084
+ className,
1085
+ disabled
1037
1086
  }) => {
1038
1087
  const selected = Array.isArray(value) ? value : [];
1039
1088
  const toggle = (v, checked) => onChange?.(checked ? [...selected, v] : selected.filter((x) => x !== v));
1040
1089
  return /* @__PURE__ */ jsxRuntime.jsxs(FormItem, { className: itemClasses(labelPosition, size, className), children: [
1041
- /* @__PURE__ */ jsxRuntime.jsx(FieldLabel, { label, badge, size, className: labelClassName }),
1090
+ /* @__PURE__ */ jsxRuntime.jsx(FieldLabel, { label, badge, size, disabled, className: labelClassName }),
1042
1091
  /* @__PURE__ */ jsxRuntime.jsxs("div", { className: inputWrapper(labelPosition, size), children: [
1043
1092
  /* @__PURE__ */ jsxRuntime.jsx(
1044
1093
  "div",
@@ -1054,6 +1103,7 @@ var CheckboxGroupField = ({
1054
1103
  {
1055
1104
  className: ui.cn("shrink-0", SIZE[size].check),
1056
1105
  checked: selected.includes(o.value),
1106
+ disabled: disabled || o.disabled,
1057
1107
  onCheckedChange: (c) => toggle(o.value, c === true)
1058
1108
  }
1059
1109
  ),
@@ -1080,9 +1130,10 @@ var ColorField = ({
1080
1130
  size = "sm",
1081
1131
  labelClassName,
1082
1132
  badge,
1083
- className
1133
+ className,
1134
+ disabled
1084
1135
  }) => /* @__PURE__ */ jsxRuntime.jsxs(FormItem, { className: itemClasses(labelPosition, size, className), children: [
1085
- /* @__PURE__ */ jsxRuntime.jsx(FieldLabel, { label, badge, size, className: labelClassName }),
1136
+ /* @__PURE__ */ jsxRuntime.jsx(FieldLabel, { label, badge, size, disabled, className: labelClassName }),
1086
1137
  /* @__PURE__ */ jsxRuntime.jsxs("div", { className: inputWrapper(labelPosition, size), children: [
1087
1138
  /* @__PURE__ */ jsxRuntime.jsx(FormControl, { children: /* @__PURE__ */ jsxRuntime.jsx(
1088
1139
  ColorSwatches,
@@ -1111,9 +1162,10 @@ var NumberField = ({
1111
1162
  size = "sm",
1112
1163
  labelClassName,
1113
1164
  badge,
1114
- className
1165
+ className,
1166
+ disabled
1115
1167
  }) => /* @__PURE__ */ jsxRuntime.jsxs(FormItem, { className: itemClasses(labelPosition, size, className), children: [
1116
- /* @__PURE__ */ jsxRuntime.jsx(FieldLabel, { label, badge, size, className: labelClassName }),
1168
+ /* @__PURE__ */ jsxRuntime.jsx(FieldLabel, { label, badge, size, disabled, className: labelClassName }),
1117
1169
  /* @__PURE__ */ jsxRuntime.jsxs("div", { className: inputWrapper(labelPosition, size), children: [
1118
1170
  /* @__PURE__ */ jsxRuntime.jsx(FormControl, { children: min != null && max != null ? /* @__PURE__ */ jsxRuntime.jsx(
1119
1171
  SliderNumber,
@@ -1122,7 +1174,8 @@ var NumberField = ({
1122
1174
  onChange,
1123
1175
  min,
1124
1176
  max,
1125
- step
1177
+ step,
1178
+ disabled
1126
1179
  }
1127
1180
  ) : /* @__PURE__ */ jsxRuntime.jsx(
1128
1181
  AffixedInput,
@@ -1134,6 +1187,7 @@ var NumberField = ({
1134
1187
  min,
1135
1188
  max,
1136
1189
  step,
1190
+ disabled,
1137
1191
  value: typeof value === "number" ? value : "",
1138
1192
  onChange: (e) => onChange?.(e.target.value === "" ? void 0 : Number(e.target.value))
1139
1193
  }
@@ -1151,9 +1205,10 @@ var IconField = ({
1151
1205
  size = "sm",
1152
1206
  labelClassName,
1153
1207
  badge,
1154
- className
1208
+ className,
1209
+ disabled
1155
1210
  }) => /* @__PURE__ */ jsxRuntime.jsxs(FormItem, { className: itemClasses(labelPosition, size, className), children: [
1156
- /* @__PURE__ */ jsxRuntime.jsx(FieldLabel, { label, badge, size, className: labelClassName }),
1211
+ /* @__PURE__ */ jsxRuntime.jsx(FieldLabel, { label, badge, size, disabled, className: labelClassName }),
1157
1212
  /* @__PURE__ */ jsxRuntime.jsxs("div", { className: inputWrapper(labelPosition, size), children: [
1158
1213
  /* @__PURE__ */ jsxRuntime.jsx(FormControl, { children: /* @__PURE__ */ jsxRuntime.jsx(IconInput, { value, onChange }) }),
1159
1214
  description && /* @__PURE__ */ jsxRuntime.jsx(FormDescription, { className: SIZE[size].desc, children: description }),
@@ -1176,6 +1231,7 @@ function renderField(field, parentName, control, labelPosition, size) {
1176
1231
  label: field.label ?? humanize(field.name),
1177
1232
  description: field.description,
1178
1233
  options: field.options,
1234
+ disabled: field.disabled,
1179
1235
  min: field.min,
1180
1236
  max: field.max,
1181
1237
  step: field.step,
@@ -1340,66 +1396,70 @@ var ObjectField = ({
1340
1396
  const groupConfigById = new Map(
1341
1397
  (groupConfig ?? []).map((g) => [g.id, g])
1342
1398
  );
1343
- return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: SIZE[size].outer, children: [
1344
- ungrouped.length > 0 && /* @__PURE__ */ jsxRuntime.jsx("div", { className: SIZE[size].section, children: renderRows(
1345
- ungrouped,
1346
- rowConfig,
1347
- name,
1348
- control,
1349
- labelPosition,
1350
- size,
1351
- columns,
1352
- fit
1353
- ) }),
1354
- groupedEntries.length > 0 && groupAs === "section" && /* @__PURE__ */ jsxRuntime.jsx("div", { className: SIZE[size].section, children: groupedEntries.map(([group, gFields]) => /* @__PURE__ */ jsxRuntime.jsxs("section", { className: SIZE[size].stack, children: [
1355
- /* @__PURE__ */ jsxRuntime.jsx(ui.Eyebrow, { children: groupConfigById.get(group)?.label ?? humanize(group) }),
1356
- renderRows(gFields, rowConfig, name, control, labelPosition, size, columns, fit)
1357
- ] }, group)) }),
1358
- groupedEntries.length > 0 && groupAs === "accordion" && /* @__PURE__ */ jsxRuntime.jsx(
1359
- ui.Accordion,
1360
- {
1361
- type: "multiple",
1362
- defaultValue: groupedEntries.map(([k]) => k),
1363
- className: "w-full",
1364
- children: groupedEntries.map(([group, gFields]) => {
1365
- const gc = groupConfigById.get(group);
1366
- return /* @__PURE__ */ jsxRuntime.jsxs(ui.AccordionItem, { value: group, className: "border-b", children: [
1367
- /* @__PURE__ */ jsxRuntime.jsx(
1368
- ui.AccordionTrigger,
1369
- {
1370
- className: ui.cn(
1371
- "font-semibold uppercase tracking-wide text-muted-foreground hover:no-underline",
1372
- SIZE[size].trigger
1373
- ),
1374
- children: /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "flex items-center gap-2", children: [
1375
- gc?.label ?? humanize(group),
1376
- (gc?.showCount ?? true) && /* @__PURE__ */ jsxRuntime.jsx(
1377
- ui.Badge,
1378
- {
1379
- variant: "secondary",
1380
- className: "px-1.5 py-0 text-base font-normal tabular-nums",
1381
- children: gFields.length
1382
- }
1399
+ return (
1400
+ // A container has no width of its own, so one fitted to it takes its
1401
+ // parent's: in a row beside a button it would otherwise shrink to nothing.
1402
+ /* @__PURE__ */ jsxRuntime.jsxs("div", { className: ui.cn(SIZE[size].outer, fit === "container" && "w-full min-w-0"), children: [
1403
+ ungrouped.length > 0 && /* @__PURE__ */ jsxRuntime.jsx("div", { className: SIZE[size].section, children: renderRows(
1404
+ ungrouped,
1405
+ rowConfig,
1406
+ name,
1407
+ control,
1408
+ labelPosition,
1409
+ size,
1410
+ columns,
1411
+ fit
1412
+ ) }),
1413
+ groupedEntries.length > 0 && groupAs === "section" && /* @__PURE__ */ jsxRuntime.jsx("div", { className: SIZE[size].section, children: groupedEntries.map(([group, gFields]) => /* @__PURE__ */ jsxRuntime.jsxs("section", { className: SIZE[size].stack, children: [
1414
+ /* @__PURE__ */ jsxRuntime.jsx(ui.Eyebrow, { children: groupConfigById.get(group)?.label ?? humanize(group) }),
1415
+ renderRows(gFields, rowConfig, name, control, labelPosition, size, columns, fit)
1416
+ ] }, group)) }),
1417
+ groupedEntries.length > 0 && groupAs === "accordion" && /* @__PURE__ */ jsxRuntime.jsx(
1418
+ ui.Accordion,
1419
+ {
1420
+ type: "multiple",
1421
+ defaultValue: groupedEntries.map(([k]) => k),
1422
+ className: "w-full",
1423
+ children: groupedEntries.map(([group, gFields]) => {
1424
+ const gc = groupConfigById.get(group);
1425
+ return /* @__PURE__ */ jsxRuntime.jsxs(ui.AccordionItem, { value: group, className: "border-b", children: [
1426
+ /* @__PURE__ */ jsxRuntime.jsx(
1427
+ ui.AccordionTrigger,
1428
+ {
1429
+ className: ui.cn(
1430
+ "font-semibold uppercase tracking-wide text-muted-foreground hover:no-underline",
1431
+ SIZE[size].trigger
1383
1432
  ),
1384
- gc?.badges?.map((b, i) => /* @__PURE__ */ jsxRuntime.jsx(StatusPill, { badge: b }, i))
1385
- ] })
1386
- }
1387
- ),
1388
- /* @__PURE__ */ jsxRuntime.jsx(ui.AccordionContent, { className: "pb-3 pt-1", children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: SIZE[size].section, children: renderRows(
1389
- gFields,
1390
- rowConfig,
1391
- name,
1392
- control,
1393
- labelPosition,
1394
- size,
1395
- columns,
1396
- fit
1397
- ) }) })
1398
- ] }, group);
1399
- })
1400
- }
1401
- )
1402
- ] });
1433
+ children: /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "flex items-center gap-2", children: [
1434
+ gc?.label ?? humanize(group),
1435
+ (gc?.showCount ?? true) && /* @__PURE__ */ jsxRuntime.jsx(
1436
+ ui.Badge,
1437
+ {
1438
+ variant: "secondary",
1439
+ className: "px-1.5 py-0 text-base font-normal tabular-nums",
1440
+ children: gFields.length
1441
+ }
1442
+ ),
1443
+ gc?.badges?.map((b, i) => /* @__PURE__ */ jsxRuntime.jsx(StatusPill, { badge: b }, i))
1444
+ ] })
1445
+ }
1446
+ ),
1447
+ /* @__PURE__ */ jsxRuntime.jsx(ui.AccordionContent, { className: "pb-3 pt-1", children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: SIZE[size].section, children: renderRows(
1448
+ gFields,
1449
+ rowConfig,
1450
+ name,
1451
+ control,
1452
+ labelPosition,
1453
+ size,
1454
+ columns,
1455
+ fit
1456
+ ) }) })
1457
+ ] }, group);
1458
+ })
1459
+ }
1460
+ )
1461
+ ] })
1462
+ );
1403
1463
  };
1404
1464
  var FormField2 = Object.assign(FormField, {
1405
1465
  ObjectField,