react-luna-form 0.0.25 → 0.0.27

package/dist/server/esm/index.js

@@ -5,16 +5,27 @@ function Control(props) {
   return /* @__PURE__ */ jsx("div", { "data-slot": "field-control", className: "w-full", children: content });
 }
 
-// src/component/group.tsx
+// src/component/field/field-set-advanced.tsx
+import { Activity, useCallback, useState } from "react";
+
+// src/component/chevron-icon.tsx
 import { jsx as jsx2 } from "react/jsx-runtime";
-function Group(props) {
+function ChevronIcon(props) {
   return /* @__PURE__ */ jsx2(
-    "div",
+    "svg",
     {
-      "data-slot": "field-group",
-      "data-compact": props.compact,
-      className: "flex w-full flex-col gap-8 data-[compact=true]:gap-3",
-      children: props.children
+      xmlns: "http://www.w3.org/2000/svg",
+      viewBox: "0 0 20 20",
+      fill: "currentColor",
+      className: `size-4 transition-transform duration-200 ${props.expanded ? "rotate-90" : ""}`,
+      children: /* @__PURE__ */ jsx2(
+        "path",
+        {
+          fillRule: "evenodd",
+          d: "M8.22 5.22a.75.75 0 0 1 1.06 0l4.25 4.25a.75.75 0 0 1 0 1.06l-4.25 4.25a.75.75 0 0 1-1.06-1.06L11.94 10 8.22 6.28a.75.75 0 0 1 0-1.06Z",
+          clipRule: "evenodd"
+        }
+      )
     }
   );
 }
@@ -26,10 +37,12 @@ var INPUT_NUMBER = "input/number";
 var TEXTAREA = "textarea";
 var RADIO = "radio";
 var CHECKBOX = "checkbox";
+var LIST = "list";
 var SELECT = "select";
 var SELECT_MONTH = "select/month";
 var SELECT_YEAR = "select/year";
 var COLUMN = "column";
+var FIELDS = "fields";
 var LABEL = "label";
 var VALUE = "value";
 var OPTIONS = "options";
@@ -51,17 +64,21 @@ var MAX_LENGTH = "maxLength";
 var $REF = "$ref";
 var VERTICAL = "vertical";
 var HORIZONTAL = "horizontal";
+var TYPE = "type";
 
 // ../luna-core/src/util/is-type.ts
 function isObject(value) {
   return value !== null && Object.prototype.toString.call(value) === "[object Object]";
 }
 function isValue(value) {
-  return typeof value === "string" || typeof value === "number" || typeof value === "boolean";
+  return isString(value) || typeof value === "number" || isBoolean(value);
 }
 function isString(value) {
   return typeof value === "string";
 }
+function isBoolean(value) {
+  return typeof value === "boolean";
+}
 
 // ../luna-core/src/util/extract.ts
 var REGEX_TYPE = /[^/]+$/;
@@ -151,6 +168,9 @@ function interpolate(template, values = {}) {
   }
   return template;
 }
+function interpolateIfNeeded(template, values = {}) {
+  return isInterpolated(template) ? interpolate(template, values) : template;
+}
 function isInterpolated(template) {
   if (isString(template)) {
     return /{([^}]+)}/.test(template);
@@ -219,11 +239,14 @@ var isNumber = createTypeChecker(INPUT_NUMBER, TYPE_NUMBER);
 function isClickable(field) {
   return isRadio(field) || isCheckbox(field);
 }
+function isList(slot) {
+  return slot.type === LIST;
+}
 function isColumn(slot) {
   return slot.type === COLUMN;
 }
 function isField(slot) {
-  return slot.type !== COLUMN;
+  return slot.type !== COLUMN && slot.type !== LIST;
 }
 function isOptions(field) {
   return isSelect(field) || isRadio(field);
@@ -485,7 +508,7 @@ function prepareDefaultValue(field, value) {
 var REGEX_REF = /^#\/definition\//;
 function prepare(base = [], definition) {
   const resolved = resolveRefs(base, definition);
-  return Array.isArray(resolved) ? resolved.sort((a, b) => getOrder(a) - getOrder(b)) : [];
+  return Array.isArray(resolved) ? resolved.filter(filter).sort((a, b) => getOrder(a) - getOrder(b)) : [];
 }
 function resolveRefs(base, definition, cache = /* @__PURE__ */ new Map(), visited = /* @__PURE__ */ new WeakSet()) {
   if (!isDefinition(definition) || !base || typeof base !== "object") {
@@ -526,6 +549,15 @@ function getOrder(item) {
 function isDefinition(definition) {
   return definition !== void 0 && isObject(definition) && Object.keys(definition).length > 0;
 }
+function filter(base) {
+  if (TYPE in base) {
+    return true;
+  }
+  if (Array.isArray(base[FIELDS])) {
+    return base[FIELDS].length > 0;
+  }
+  return true;
+}
 
 // ../luna-core/src/util/attributes.ts
 function getPrefixedAttributes(prefix, record) {
@@ -573,6 +605,31 @@ function getSpan(value) {
   }
 }
 
+// ../luna-core/src/util/list.ts
+function getInitialCount(list, value) {
+  const min = list.advanced?.length?.min ?? 1;
+  if (value) {
+    const data = extract(value, list.name);
+    if (Array.isArray(data)) {
+      return Math.max(data.length, min);
+    }
+  }
+  return Math.max(min, 0);
+}
+function isMultiFieldList(list) {
+  if (!Array.isArray(list.fields) || list.fields.length === 0) {
+    return false;
+  }
+  return list.fields.length > 1 || list.fields[0].type === COLUMN;
+}
+function getInitialList(list, value) {
+  const count = getInitialCount(list, value);
+  return Array.from({ length: count }, (_, index) => index);
+}
+function getLabel(list) {
+  return list.label ?? list.name;
+}
+
 // ../luna-core/src/util/translate.ts
 function translate(key, dictionary) {
   if (!key) {
@@ -610,94 +667,266 @@ function formatMarkdown2(text) {
   );
 }
 
+// src/component/field/field-set-advanced.tsx
+import { jsx as jsx4, jsxs } from "react/jsx-runtime";
+function FieldSetAdvanced(props) {
+  const { fields = [] } = props.section;
+  const [isOpen, setIsOpen] = useState(false);
+  const handleOpen = useCallback(() => setIsOpen((previous) => !previous), []);
+  return /* @__PURE__ */ jsxs(
+    "fieldset",
+    {
+      "data-slot": "field-set",
+      "data-advanced": "true",
+      "data-expanded": isOpen,
+      "data-empty": fields.length === 0,
+      className: "flex flex-col",
+      id: props.section.id?.toString(),
+      children: [
+        /* @__PURE__ */ jsx4("legend", { children: /* @__PURE__ */ jsxs(
+          "button",
+          {
+            className: "flex cursor-pointer items-center gap-2 text-base font-medium text-slate-600 dark:text-slate-400",
+            onClick: handleOpen,
+            type: "button",
+            children: [
+              /* @__PURE__ */ jsx4(ChevronIcon, { expanded: isOpen }),
+              /* @__PURE__ */ jsx4("span", { children: formatMarkdown2(props.section.title) })
+            ]
+          }
+        ) }),
+        /* @__PURE__ */ jsx4(Activity, { mode: isOpen ? "visible" : "hidden", children: /* @__PURE__ */ jsxs(
+          "div",
+          {
+            className: "mt-3 ml-1.5 flex flex-col gap-4 border-l-2 border-slate-300 pl-4 dark:border-slate-600",
+            "data-slot": "field-set-content",
+            children: [
+              props.section.description && /* @__PURE__ */ jsx4("p", { className: "text-sm leading-normal font-normal text-slate-600 dark:text-slate-400", children: formatMarkdown2(props.section.description) }),
+              props.group
+            ]
+          }
+        ) })
+      ]
+    }
+  );
+}
+
 // src/component/legend.tsx
-import { Fragment, jsx as jsx4, jsxs } from "react/jsx-runtime";
+import { Fragment, jsx as jsx5, jsxs as jsxs2 } from "react/jsx-runtime";
 function Legend(props) {
-  return /* @__PURE__ */ jsxs(Fragment, { children: [
-    props.title && /* @__PURE__ */ jsx4("legend", { className: "mb-3 font-medium text-slate-800 dark:text-slate-200", children: formatMarkdown2(props.title) }),
-    props.description && /* @__PURE__ */ jsx4("p", { className: "-mt-2 text-sm leading-normal font-normal text-slate-600 dark:text-slate-400", children: formatMarkdown2(props.description) })
+  return /* @__PURE__ */ jsxs2(Fragment, { children: [
+    props.title && /* @__PURE__ */ jsx5("legend", { className: "mb-3 font-medium text-slate-800 dark:text-slate-200", children: formatMarkdown2(props.title) }),
+    props.description && /* @__PURE__ */ jsx5("p", { className: "-mt-2 text-sm leading-normal font-normal text-slate-600 dark:text-slate-400", children: formatMarkdown2(props.description) })
   ] });
 }
 
+// src/component/field/field-set-base.tsx
+import { jsx as jsx6, jsxs as jsxs3 } from "react/jsx-runtime";
+function FieldSetBase(props) {
+  return /* @__PURE__ */ jsxs3(
+    "fieldset",
+    {
+      "data-slot": "field-set",
+      "data-empty": props.empty,
+      className: "flex flex-col data-[empty=false]:gap-6",
+      id: props.id,
+      children: [
+        /* @__PURE__ */ jsx6(Legend, { description: props.description, title: props.title }),
+        props.children
+      ]
+    }
+  );
+}
+
+// src/component/group.tsx
+import { jsx as jsx7 } from "react/jsx-runtime";
+function Group(props) {
+  return /* @__PURE__ */ jsx7(
+    "div",
+    {
+      "data-slot": "field-group",
+      "data-compact": props.compact,
+      className: "flex w-full flex-col gap-8 data-[compact=true]:gap-3",
+      children: props.children
+    }
+  );
+}
+
 // src/component/field/field-set.tsx
-import { jsx as jsx5, jsxs as jsxs2 } from "react/jsx-runtime";
+import { jsx as jsx8 } from "react/jsx-runtime";
 function FieldSet(props) {
-  const fields = props.section.fields || [];
+  const { fields = [] } = props.section;
   const { compact } = mergeStyle(props.style, {
     compact: props.section.compact
   });
+  const group = /* @__PURE__ */ jsx8(Group, { compact, children: props.children });
   if (!props.section.title && !props.section.description) {
-    return /* @__PURE__ */ jsx5(Group, { compact, children: props.children });
+    return group;
   }
-  return /* @__PURE__ */ jsxs2(
-    "fieldset",
+  if (props.section.advanced) {
+    return /* @__PURE__ */ jsx8(FieldSetAdvanced, { section: props.section, group });
+  }
+  return /* @__PURE__ */ jsx8(
+    FieldSetBase,
     {
-      "data-slot": "field-set",
-      "data-empty": fields.length === 0,
-      className: "flex flex-col data-[empty=false]:gap-6",
+      description: props.section.description,
+      empty: fields.length === 0,
       id: props.section.id?.toString(),
-      children: [
-        /* @__PURE__ */ jsx5(
-          Legend,
-          {
-            description: props.section.description,
-            title: props.section.title
-          }
-        ),
-        /* @__PURE__ */ jsx5(Group, { compact, children: props.children })
-      ]
+      title: props.section.title,
+      children: group
     }
   );
 }
 
-// src/component/form.tsx
-import { Fragment as Fragment2 } from "react";
+// src/client/component/guard/visibility-guard.tsx
+import { useAtomValue } from "jotai";
+
+// src/client/lib/store-helper.ts
+import { atom } from "jotai";
+import { atomFamily } from "jotai-family";
+import { deepEqual } from "fast-equals";
+function createRecordAtomFamily(baseAtom) {
+  return atomFamily(
+    (name) => atom(
+      (get) => {
+        return get(baseAtom)[name] ?? void 0;
+      },
+      (get, set, newValue) => {
+        const current = get(baseAtom);
+        if (newValue !== void 0 && newValue !== null) {
+          const currentValue = current[name];
+          if (!currentValue || !deepEqual(currentValue, newValue)) {
+            set(baseAtom, { ...current, [name]: newValue });
+          }
+        } else if (current[name]) {
+          const { [name]: _unused, ...rest } = current;
+          set(baseAtom, rest);
+        }
+      }
+    )
+  );
+}
+function createClearAllAtom(baseAtom) {
+  return atom(null, (get, set) => {
+    const current = get(baseAtom);
+    if (current && Object.keys(current).length > 0) {
+      set(baseAtom, {});
+    }
+  });
+}
+function createClearAtom(baseAtom) {
+  return atom(null, (get, set, names) => {
+    const current = get(baseAtom);
+    const next = { ...current };
+    let hasChanges = false;
+    for (const name of names) {
+      if (next[name]) {
+        delete next[name];
+        hasChanges = true;
+      }
+    }
+    if (hasChanges) {
+      set(baseAtom, next);
+    }
+  });
+}
+function createBulkReportAtom(baseAtom) {
+  return atom(null, (get, set, newValue) => {
+    const current = get(baseAtom);
+    if (!deepEqual(current, newValue)) {
+      set(baseAtom, newValue);
+    }
+  });
+}
+function createAtomStore(initialValue = {}) {
+  const baseAtom = atom(initialValue);
+  return {
+    atom: baseAtom,
+    clearAll: createClearAllAtom(baseAtom),
+    clear: createClearAtom(baseAtom),
+    bulkReport: createBulkReportAtom(baseAtom),
+    report: createRecordAtomFamily(baseAtom)
+  };
+}
+
+// src/client/lib/state-store.ts
+var store = createAtomStore();
+var fieldStateAtom = store.atom;
+var reportFieldStateAtom = store.report;
+
+// src/client/component/guard/visibility-guard.tsx
+function isColumnHidden(column, states) {
+  return column.fields.every((field) => isFieldHidden(field, states));
+}
+function isFieldHidden(field, states) {
+  return states[field.name]?.hidden ?? field.hidden ?? false;
+}
+function isEntryHidden(entry, states) {
+  return isColumn(entry) ? isColumnHidden(entry, states) : isFieldHidden(entry, states);
+}
+function VisibilityGuard(props) {
+  const states = useAtomValue(fieldStateAtom);
+  if (props.container) {
+    const hidden = states[props.container.name]?.hidden ?? props.container.hidden ?? false;
+    if (hidden) {
+      return null;
+    }
+  }
+  if (props.fields.length === 0) {
+    return null;
+  }
+  const allHidden = props.fields.every((entry) => isEntryHidden(entry, states));
+  if (allHidden) {
+    return null;
+  }
+  return props.children;
+}
 
 // src/component/separator.tsx
-import { jsx as jsx6 } from "react/jsx-runtime";
+import { jsx as jsx9 } from "react/jsx-runtime";
 function Separator() {
-  return /* @__PURE__ */ jsx6("div", { "data-slot": "field-separator", className: "relative -my-2 h-5 text-sm", children: /* @__PURE__ */ jsx6("div", { className: "absolute inset-0 top-1/2 h-px w-full bg-slate-200 dark:bg-slate-800" }) });
+  return /* @__PURE__ */ jsx9("div", { "data-slot": "field-separator", className: "relative -my-2 h-5 text-sm", children: /* @__PURE__ */ jsx9("div", { className: "absolute inset-0 top-1/2 h-px w-full bg-slate-200 dark:bg-slate-800" }) });
 }
 
 // src/component/form.tsx
-import { jsx as jsx7, jsxs as jsxs3 } from "react/jsx-runtime";
+import { jsx as jsx10, jsxs as jsxs4 } from "react/jsx-runtime";
 function Form(props) {
   const sections = prepare(props.sections, props.definition);
-  return /* @__PURE__ */ jsx7("div", { className: "h-full w-full", children: /* @__PURE__ */ jsx7("form", { noValidate: props.noValidate, action: props.action, children: /* @__PURE__ */ jsxs3(Group, { children: [
-    sections.map((section, index) => /* @__PURE__ */ jsxs3(Fragment2, { children: [
-      /* @__PURE__ */ jsx7(FieldSet, { section, style: props.config.style, children: props.children({
+  return /* @__PURE__ */ jsx10("div", { className: "h-full w-full", children: /* @__PURE__ */ jsx10("form", { noValidate: props.noValidate, action: props.action, children: /* @__PURE__ */ jsxs4(Group, { children: [
+    sections.map((section, index) => /* @__PURE__ */ jsxs4(VisibilityGuard, { fields: section.fields ?? [], children: [
+      /* @__PURE__ */ jsx10(FieldSet, { section, style: props.config.style, children: props.children({
         disabled: props.readOnly,
         fields: section.fields
       }) }),
-      section.separator && /* @__PURE__ */ jsx7(Separator, {})
+      section.separator && /* @__PURE__ */ jsx10(Separator, {})
     ] }, index)),
-    props.control && /* @__PURE__ */ jsx7(Control, { isPending: props.isPending, children: props.control })
+    props.control && /* @__PURE__ */ jsx10(Control, { isPending: props.isPending, children: props.control })
   ] }) }) });
 }
 
 // src/component/description.tsx
-import { jsx as jsx8 } from "react/jsx-runtime";
+import { jsx as jsx11 } from "react/jsx-runtime";
 function Description(props) {
-  return /* @__PURE__ */ jsx8("p", { className: "-mt-2 text-xs leading-normal font-normal text-slate-600 dark:text-slate-400", children: props.children });
+  return /* @__PURE__ */ jsx11("p", { className: "-mt-2 text-xs leading-normal font-normal text-slate-600 dark:text-slate-400", children: props.children });
 }
 
 // src/component/formatted-description.tsx
-import { jsx as jsx9 } from "react/jsx-runtime";
+import { jsx as jsx12 } from "react/jsx-runtime";
 function FormattedDescription(props) {
   const content = formatMarkdown2(props.text);
   if (content) {
-    return /* @__PURE__ */ jsx9(Description, { children: content });
+    return /* @__PURE__ */ jsx12(Description, { children: content });
   }
   return null;
 }
 
 // src/component/label.tsx
 import { twMerge } from "tailwind-merge";
-import { jsx as jsx10, jsxs as jsxs4 } from "react/jsx-runtime";
+import { jsx as jsx13, jsxs as jsxs5 } from "react/jsx-runtime";
 function Label(props) {
   const showOptionalLabel = props.style?.showOptionalLabel ?? true;
   const normal = isRadio(props.field) || isCheckbox(props.field);
-  return /* @__PURE__ */ jsxs4(
+  return /* @__PURE__ */ jsxs5(
     "label",
     {
       "data-slot": "field-label",
@@ -710,30 +939,31 @@ function Label(props) {
       htmlFor: props.field.name,
       children: [
         props.children,
-        showOptionalLabel && !props.field.required && /* @__PURE__ */ jsx10("span", { className: "text-sm text-slate-600 dark:text-slate-400", children: translate("(Optional)", props.translations) })
+        showOptionalLabel && !props.field.required && /* @__PURE__ */ jsx13("span", { className: "text-sm text-slate-600 dark:text-slate-400", children: translate("(Optional)", props.translations) })
       ]
     }
   );
 }
 
 // src/component/input-label.tsx
-import { jsx as jsx11, jsxs as jsxs5 } from "react/jsx-runtime";
+import { jsx as jsx14, jsxs as jsxs6 } from "react/jsx-runtime";
 function InputLabel(props) {
-  const label = isInterpolated(props.field.label) ? interpolate(props.field.label, {
+  const interpolateOpts = {
     context: props.context,
     env: props.config?.env
-  }) : props.field.label;
-  const description = isInterpolated(props.field.description) ? interpolate(props.field.description, {
-    context: props.context,
-    env: props.config?.env
-  }) : props.field.description;
-  return /* @__PURE__ */ jsxs5(
+  };
+  const label = interpolateIfNeeded(props.field.label, interpolateOpts);
+  const description = interpolateIfNeeded(
+    props.field.description,
+    interpolateOpts
+  );
+  return /* @__PURE__ */ jsxs6(
     "div",
     {
       "data-slot": "field-content",
       className: "flex w-full flex-1 flex-col gap-1.5 leading-snug",
       children: [
-        /* @__PURE__ */ jsx11(
+        /* @__PURE__ */ jsx14(
           Label,
           {
             field: props.field,
@@ -742,7 +972,7 @@ function InputLabel(props) {
             children: translate(label, props.translations)
           }
         ),
-        props.orientation === HORIZONTAL && /* @__PURE__ */ jsx11(
+        props.orientation === HORIZONTAL && /* @__PURE__ */ jsx14(
           FormattedDescription,
           {
             text: translate(description, props.translations)
@@ -754,10 +984,10 @@ function InputLabel(props) {
 }
 
 // src/component/input-group.tsx
-import { Fragment as Fragment3, jsx as jsx12, jsxs as jsxs6 } from "react/jsx-runtime";
+import { Fragment as Fragment2, jsx as jsx15, jsxs as jsxs7 } from "react/jsx-runtime";
 function InputGroup(props) {
-  return /* @__PURE__ */ jsxs6(Fragment3, { children: [
-    props.field.name && props.field.label && /* @__PURE__ */ jsx12(
+  return /* @__PURE__ */ jsxs7(Fragment2, { children: [
+    props.field.name && props.field.label && /* @__PURE__ */ jsx15(
       InputLabel,
       {
         config: props.config,
@@ -768,7 +998,7 @@ function InputGroup(props) {
       }
     ),
     props.children,
-    props.orientation === VERTICAL && props.field.description && /* @__PURE__ */ jsx12(
+    props.orientation === VERTICAL && props.field.description && /* @__PURE__ */ jsx15(
       FormattedDescription,
       {
         text: translate(props.field.description, props.translations)
@@ -786,7 +1016,7 @@ function renderIfExists(value, render) {
 }
 
 // src/server/component/input.tsx
-import { jsx as jsx13 } from "react/jsx-runtime";
+import { jsx as jsx16 } from "react/jsx-runtime";
 function Input(props) {
   const source = resolveSource(props.field, props.value);
   const { commonPropsWithOptions, defaultValue } = prepareInputProps(
@@ -796,7 +1026,7 @@ function Input(props) {
     props.value
   );
   const defaultProps = prepareDefaultValue(props.field, defaultValue);
-  return renderIfExists(props.config.inputs[props.field.type], (Component) => /* @__PURE__ */ jsx13(
+  return renderIfExists(props.config.inputs[props.field.type], (Component) => /* @__PURE__ */ jsx16(
     InputGroup,
     {
       config: props.config,
@@ -804,7 +1034,7 @@ function Input(props) {
       field: props.field,
       orientation: props.orientation,
       translations: props.translations,
-      children: /* @__PURE__ */ jsx13(
+      children: /* @__PURE__ */ jsx16(
         Component,
         {
           ...props.ariaAttributes,
@@ -818,27 +1048,27 @@ function Input(props) {
 }
 
 // src/component/field/field-error.tsx
-import { jsx as jsx14 } from "react/jsx-runtime";
+import { jsx as jsx17 } from "react/jsx-runtime";
 function FieldError(props) {
   if (!props.errors || props.errors.length === 0) {
     return null;
   }
-  return /* @__PURE__ */ jsx14(
+  return /* @__PURE__ */ jsx17(
     "ul",
     {
       className: "text-sm text-red-600 dark:text-red-500",
       id: props.name ? `${props.name}-error` : void 0,
-      children: props.errors?.map((error, index) => /* @__PURE__ */ jsx14("li", { children: error }, props.name ? `${props.name}-error-${index}` : index))
+      children: props.errors?.map((error, index) => /* @__PURE__ */ jsx17("li", { children: error }, props.name ? `${props.name}-error-${index}` : index))
     }
   );
 }
 
 // src/component/field/field-base.tsx
 import { twMerge as twMerge2 } from "tailwind-merge";
-import { jsx as jsx15 } from "react/jsx-runtime";
+import { jsx as jsx18 } from "react/jsx-runtime";
 function FieldBase(props) {
   const errors = props.errors && props.errors.length > 0;
-  return /* @__PURE__ */ jsx15(
+  return /* @__PURE__ */ jsx18(
     "div",
     {
       "data-slot": "field",
@@ -860,9 +1090,9 @@ function FieldBase(props) {
 
 // src/component/field/field-vertical.tsx
 import { twMerge as twMerge3 } from "tailwind-merge";
-import { jsx as jsx16 } from "react/jsx-runtime";
+import { jsx as jsx19 } from "react/jsx-runtime";
 function FieldVertical(props) {
-  return /* @__PURE__ */ jsx16(
+  return /* @__PURE__ */ jsx19(
     FieldBase,
     {
       ...props,
@@ -878,9 +1108,9 @@ function FieldVertical(props) {
 
 // src/component/field/field-horizontal.tsx
 import { twMerge as twMerge4 } from "tailwind-merge";
-import { jsx as jsx17 } from "react/jsx-runtime";
+import { jsx as jsx20 } from "react/jsx-runtime";
 function FieldHorizontal(props) {
-  return /* @__PURE__ */ jsx17(
+  return /* @__PURE__ */ jsx20(
     FieldBase,
     {
       ...props,
@@ -903,13 +1133,13 @@ function FieldHorizontal(props) {
 }
 
 // src/component/field/field-group.tsx
-import { jsx as jsx18 } from "react/jsx-runtime";
+import { jsx as jsx21 } from "react/jsx-runtime";
 function FieldGroup(props) {
   const clickable = isClickable(props.field);
   const checkbox = isCheckbox(props.field);
   const reversed = buildReverse(props.field);
   if (props.orientation === VERTICAL) {
-    return /* @__PURE__ */ jsx18(
+    return /* @__PURE__ */ jsx21(
       FieldVertical,
       {
         disabled: props.disabled,
@@ -921,7 +1151,7 @@ function FieldGroup(props) {
       }
     );
   }
-  return /* @__PURE__ */ jsx18(
+  return /* @__PURE__ */ jsx21(
     FieldHorizontal,
     {
       disabled: props.disabled,
@@ -957,7 +1187,7 @@ function InputBase(props) {
 
 // src/component/field/field.tsx
 import { twMerge as twMerge5 } from "tailwind-merge";
-import { jsx as jsx19, jsxs as jsxs7 } from "react/jsx-runtime";
+import { jsx as jsx22, jsxs as jsxs8 } from "react/jsx-runtime";
 function Field(props) {
   const cols2 = props.field.advanced?.cols;
   const errors = props.field.name ? props.errors?.[props.field.name] : void 0;
@@ -965,15 +1195,15 @@ function Field(props) {
     orientation: buildOrientation(props.field)
   });
   const disabled = buildDisabled(props.field, props.disabled);
-  return /* @__PURE__ */ jsxs7("div", { className: twMerge5("flex flex-col gap-3", getSpan(cols2)), children: [
-    /* @__PURE__ */ jsx19(
+  return /* @__PURE__ */ jsxs8("div", { className: twMerge5("flex flex-col gap-3", getSpan(cols2)), children: [
+    /* @__PURE__ */ jsx22(
       FieldGroup,
       {
         disabled,
         errors,
         field: props.field,
         orientation,
-        children: /* @__PURE__ */ jsx19(
+        children: /* @__PURE__ */ jsx22(
           InputBase,
           {
             disabled,
@@ -985,44 +1215,175 @@ function Field(props) {
         )
       }
     ),
-    /* @__PURE__ */ jsx19(FieldError, { errors, name: props.field.name })
+    /* @__PURE__ */ jsx22(FieldError, { errors, name: props.field.name })
   ] });
 }
 
-// src/component/column.tsx
+// src/component/field/field-list-item.tsx
 import { twMerge as twMerge6 } from "tailwind-merge";
-import { jsx as jsx20 } from "react/jsx-runtime";
+import { jsx as jsx23, jsxs as jsxs9 } from "react/jsx-runtime";
+function FieldListItem(props) {
+  function handleRemove() {
+    if (props.canRemove && props.onRemove) {
+      props.onRemove(props.index);
+    }
+  }
+  const removeButton = props.canRemove && props.onRemove != null && /* @__PURE__ */ jsx23(
+    "button",
+    {
+      "aria-label": `Remove ${props.label} item ${props.index + 1}`,
+      className: twMerge6(
+        "rounded p-1 text-xl text-slate-400",
+        "transition-colors duration-150",
+        "hover:text-red-500",
+        "focus-visible:ring-2 focus-visible:ring-slate-400 focus-visible:outline-none",
+        "dark:text-slate-500 dark:hover:text-red-400"
+      ),
+      onClick: handleRemove,
+      type: "button",
+      children: /* @__PURE__ */ jsx23("span", { "aria-hidden": "true", children: "\xD7" })
+    }
+  );
+  if (props.isMultiField) {
+    return /* @__PURE__ */ jsxs9("div", { className: "rounded-lg border border-slate-100 p-4 dark:border-slate-900", children: [
+      /* @__PURE__ */ jsxs9("div", { className: "mb-3 flex items-center justify-between", children: [
+        /* @__PURE__ */ jsxs9("span", { className: "text-sm font-medium text-slate-400 dark:text-slate-500", children: [
+          props.label,
+          " ",
+          props.index + 1
+        ] }),
+        removeButton
+      ] }),
+      /* @__PURE__ */ jsx23(Group, { children: props.children })
+    ] });
+  }
+  return /* @__PURE__ */ jsxs9("div", { className: "flex items-start gap-2", children: [
+    /* @__PURE__ */ jsx23(Group, { children: props.children }),
+    removeButton && /* @__PURE__ */ jsx23("div", { className: "shrink-0", children: removeButton })
+  ] });
+}
+
+// src/component/field/field-list.tsx
+import { jsx as jsx24 } from "react/jsx-runtime";
+function FieldList(props) {
+  const label = getLabel(props.field);
+  const isMultiField = isMultiFieldList(props.field);
+  return getInitialList(props.field, props.value).map((index) => /* @__PURE__ */ jsx24(
+    FieldListItem,
+    {
+      index,
+      isMultiField,
+      label,
+      children: props.children(index)
+    },
+    index
+  ));
+}
+
+// src/component/list.tsx
+import { jsx as jsx25 } from "react/jsx-runtime";
+function List(props) {
+  const empty = Array.isArray(props.field.fields) && props.field.fields.length === 0;
+  return /* @__PURE__ */ jsx25(
+    FieldSetBase,
+    {
+      description: props.field.description,
+      empty,
+      id: props.field.name,
+      title: props.field.label,
+      children: props.children
+    }
+  );
+}
+
+// src/component/slot/list-slot.tsx
+import { jsx as jsx26 } from "react/jsx-runtime";
+function ListSlot({ children, field, value }) {
+  return /* @__PURE__ */ jsx26(List, { field, children: /* @__PURE__ */ jsx26(FieldList, { field, value, children }) });
+}
+
+// src/component/column.tsx
+import { twMerge as twMerge7 } from "tailwind-merge";
+import { jsx as jsx27 } from "react/jsx-runtime";
 function Column(props) {
   const cols2 = getColumn(props.column?.advanced?.cols);
-  return /* @__PURE__ */ jsx20("div", { className: "flex w-full flex-col gap-4", children: /* @__PURE__ */ jsx20("div", { className: twMerge6("grid grid-cols-1 gap-3 sm:gap-4", cols2), children: props.children }) });
+  return /* @__PURE__ */ jsx27("div", { className: "flex w-full flex-col gap-4", children: /* @__PURE__ */ jsx27("div", { className: twMerge7("grid grid-cols-1 gap-3 sm:gap-4", cols2), children: props.children }) });
+}
+
+// src/component/slot/slot-base.tsx
+import { Fragment as Fragment3 } from "react";
+
+// src/component/slot/slot-list.tsx
+import { jsx as jsx28 } from "react/jsx-runtime";
+function SlotList(props) {
+  const fields = Array.isArray(props.field.fields) ? props.field.fields.map((field) => {
+    if (isField(field)) {
+      return {
+        ...field,
+        name: `${props.field.name}.${props.index}.${field.name}`
+      };
+    }
+    if (isColumn(field)) {
+      return {
+        ...field,
+        fields: field.fields.map((columnField) => ({
+          ...columnField,
+          name: `${props.field.name}.${props.index}.${columnField.name}`
+        }))
+      };
+    }
+    return field;
+  }) : [];
+  return /* @__PURE__ */ jsx28(
+    SlotBase,
+    {
+      children: props.children,
+      components: props.components,
+      disabled: props.disabled,
+      fields,
+      style: props.style,
+      value: props.value
+    }
+  );
 }
 
 // src/component/slot/slot-base.tsx
-import { Fragment as Fragment4 } from "react";
-import { jsx as jsx21, jsxs as jsxs8 } from "react/jsx-runtime";
+import { jsx as jsx29, jsxs as jsxs10 } from "react/jsx-runtime";
 function SlotBase(props) {
-  const { column: Column2, field: Field2 } = props.components;
-  return prepare(props.fields).map((field, index) => /* @__PURE__ */ jsxs8(Fragment4, { children: [
-    isColumn(field) && /* @__PURE__ */ jsx21(Column2, { column: field, children: /* @__PURE__ */ jsx21(SlotBase, { ...props, fields: field.fields }) }),
-    isField(field) && /* @__PURE__ */ jsx21(Field2, { disabled: props.disabled, field, style: props.style, children: props.children })
+  const { field: Field2, list: List2 } = props.components;
+  return prepare(props.fields).map((field, index) => /* @__PURE__ */ jsxs10(Fragment3, { children: [
+    isColumn(field) && /* @__PURE__ */ jsx29(Column, { column: field, children: /* @__PURE__ */ jsx29(SlotBase, { ...props, fields: field.fields }) }),
+    isField(field) && /* @__PURE__ */ jsx29(Field2, { disabled: props.disabled, field, style: props.style, children: props.children }),
+    isList(field) && /* @__PURE__ */ jsx29(List2, { field, value: props.value, children: (index2) => /* @__PURE__ */ jsx29(
+      SlotList,
+      {
+        children: props.children,
+        components: props.components,
+        disabled: props.disabled,
+        field,
+        index: index2,
+        style: props.style,
+        value: props.value
+      }
+    ) })
   ] }, index));
 }
 
 // src/component/slot/slot-create.tsx
-import { jsx as jsx22 } from "react/jsx-runtime";
-function createSlot(Field2) {
-  const CreateSlot = (props) => /* @__PURE__ */ jsx22(SlotBase, { ...props, components: { column: Column, field: Field2 } });
+import { jsx as jsx30 } from "react/jsx-runtime";
+function createSlot(components) {
+  const CreateSlot = (props) => /* @__PURE__ */ jsx30(SlotBase, { ...props, components });
   return CreateSlot;
 }
 
 // src/component/slot/slot.tsx
-var Slot = createSlot(Field);
+var Slot = createSlot({ field: Field, list: ListSlot });
 
 // src/server/component/form.tsx
-import { jsx as jsx23 } from "react/jsx-runtime";
+import { jsx as jsx31 } from "react/jsx-runtime";
 function Form2(props) {
   const translations = props.translations?.[props.lang ?? ""];
-  return /* @__PURE__ */ jsx23(
+  return /* @__PURE__ */ jsx31(
     Form,
     {
       config: props.config,
@@ -1030,7 +1391,7 @@ function Form2(props) {
       definition: props.definition,
       readOnly: props.readOnly,
       sections: props.sections,
-      children: ({ disabled, fields }) => /* @__PURE__ */ jsx23(Slot, { disabled, fields, style: props.config.style, children: (internal) => /* @__PURE__ */ jsx23(
+      children: ({ disabled, fields }) => /* @__PURE__ */ jsx31(Slot, { disabled, fields, style: props.config.style, children: (internal) => /* @__PURE__ */ jsx31(
         Input,
         {
           ...internal,
@@ -1046,12 +1407,12 @@ function Form2(props) {
 
 // src/server/component/fallback.tsx
 import { Suspense } from "react";
-import { jsx as jsx24 } from "react/jsx-runtime";
+import { jsx as jsx32 } from "react/jsx-runtime";
 function Fallback(props) {
-  return /* @__PURE__ */ jsx24(
+  return /* @__PURE__ */ jsx32(
     Suspense,
     {
-      fallback: /* @__PURE__ */ jsx24(Form2, { config: props.config, sections: props.sections, readOnly: true }),
+      fallback: /* @__PURE__ */ jsx32(Form2, { config: props.config, sections: props.sections, readOnly: true }),
       children: props.children
     }
   );