react-luna-form 0.0.25 → 0.0.27

package/dist/server/cjs/index.js

@@ -32,16 +32,27 @@ function Control(props) {
   return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { "data-slot": "field-control", className: "w-full", children: content });
 }
 
-// src/component/group.tsx
+// src/component/field/field-set-advanced.tsx
+var import_react = require("react");
+
+// src/component/chevron-icon.tsx
 var import_jsx_runtime2 = require("react/jsx-runtime");
-function Group(props) {
+function ChevronIcon(props) {
   return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
-    "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__ */ (0, import_jsx_runtime2.jsx)(
+        "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"
+        }
+      )
     }
   );
 }
@@ -53,10 +64,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";
@@ -78,17 +91,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 = /[^/]+$/;
@@ -178,6 +195,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);
@@ -246,11 +266,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);
@@ -512,7 +535,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") {
@@ -553,6 +576,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) {
@@ -600,6 +632,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) {
@@ -637,94 +694,266 @@ function formatMarkdown2(text) {
   );
 }
 
-// src/component/legend.tsx
+// src/component/field/field-set-advanced.tsx
 var import_jsx_runtime4 = require("react/jsx-runtime");
+function FieldSetAdvanced(props) {
+  const { fields = [] } = props.section;
+  const [isOpen, setIsOpen] = (0, import_react.useState)(false);
+  const handleOpen = (0, import_react.useCallback)(() => setIsOpen((previous) => !previous), []);
+  return /* @__PURE__ */ (0, import_jsx_runtime4.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__ */ (0, import_jsx_runtime4.jsx)("legend", { children: /* @__PURE__ */ (0, import_jsx_runtime4.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__ */ (0, import_jsx_runtime4.jsx)(ChevronIcon, { expanded: isOpen }),
+              /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("span", { children: formatMarkdown2(props.section.title) })
+            ]
+          }
+        ) }),
+        /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_react.Activity, { mode: isOpen ? "visible" : "hidden", children: /* @__PURE__ */ (0, import_jsx_runtime4.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__ */ (0, import_jsx_runtime4.jsx)("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
+var import_jsx_runtime5 = require("react/jsx-runtime");
 function Legend(props) {
-  return /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(import_jsx_runtime4.Fragment, { children: [
-    props.title && /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("legend", { className: "mb-3 font-medium text-slate-800 dark:text-slate-200", children: formatMarkdown2(props.title) }),
-    props.description && /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("p", { className: "-mt-2 text-sm leading-normal font-normal text-slate-600 dark:text-slate-400", children: formatMarkdown2(props.description) })
+  return /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(import_jsx_runtime5.Fragment, { children: [
+    props.title && /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("legend", { className: "mb-3 font-medium text-slate-800 dark:text-slate-200", children: formatMarkdown2(props.title) }),
+    props.description && /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("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
+var import_jsx_runtime6 = require("react/jsx-runtime");
+function FieldSetBase(props) {
+  return /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(
+    "fieldset",
+    {
+      "data-slot": "field-set",
+      "data-empty": props.empty,
+      className: "flex flex-col data-[empty=false]:gap-6",
+      id: props.id,
+      children: [
+        /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(Legend, { description: props.description, title: props.title }),
+        props.children
+      ]
+    }
+  );
+}
+
+// src/component/group.tsx
+var import_jsx_runtime7 = require("react/jsx-runtime");
+function Group(props) {
+  return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+    "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
-var import_jsx_runtime5 = require("react/jsx-runtime");
+var import_jsx_runtime8 = require("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__ */ (0, import_jsx_runtime8.jsx)(Group, { compact, children: props.children });
   if (!props.section.title && !props.section.description) {
-    return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(Group, { compact, children: props.children });
+    return group;
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(
-    "fieldset",
+  if (props.section.advanced) {
+    return /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(FieldSetAdvanced, { section: props.section, group });
+  }
+  return /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+    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__ */ (0, import_jsx_runtime5.jsx)(
-          Legend,
-          {
-            description: props.section.description,
-            title: props.section.title
-          }
-        ),
-        /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(Group, { compact, children: props.children })
-      ]
+      title: props.section.title,
+      children: group
     }
   );
 }
 
-// src/component/form.tsx
-var import_react = require("react");
+// src/client/component/guard/visibility-guard.tsx
+var import_jotai2 = require("jotai");
+
+// src/client/lib/store-helper.ts
+var import_jotai = require("jotai");
+var import_jotai_family = require("jotai-family");
+var import_fast_equals = require("fast-equals");
+function createRecordAtomFamily(baseAtom) {
+  return (0, import_jotai_family.atomFamily)(
+    (name) => (0, import_jotai.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 || !(0, import_fast_equals.deepEqual)(currentValue, newValue)) {
+            set(baseAtom, { ...current, [name]: newValue });
+          }
+        } else if (current[name]) {
+          const { [name]: _unused, ...rest } = current;
+          set(baseAtom, rest);
+        }
+      }
+    )
+  );
+}
+function createClearAllAtom(baseAtom) {
+  return (0, import_jotai.atom)(null, (get, set) => {
+    const current = get(baseAtom);
+    if (current && Object.keys(current).length > 0) {
+      set(baseAtom, {});
+    }
+  });
+}
+function createClearAtom(baseAtom) {
+  return (0, import_jotai.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 (0, import_jotai.atom)(null, (get, set, newValue) => {
+    const current = get(baseAtom);
+    if (!(0, import_fast_equals.deepEqual)(current, newValue)) {
+      set(baseAtom, newValue);
+    }
+  });
+}
+function createAtomStore(initialValue = {}) {
+  const baseAtom = (0, import_jotai.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 = (0, import_jotai2.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
-var import_jsx_runtime6 = require("react/jsx-runtime");
+var import_jsx_runtime9 = require("react/jsx-runtime");
 function Separator() {
-  return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("div", { "data-slot": "field-separator", className: "relative -my-2 h-5 text-sm", children: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("div", { className: "absolute inset-0 top-1/2 h-px w-full bg-slate-200 dark:bg-slate-800" }) });
+  return /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("div", { "data-slot": "field-separator", className: "relative -my-2 h-5 text-sm", children: /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("div", { className: "absolute inset-0 top-1/2 h-px w-full bg-slate-200 dark:bg-slate-800" }) });
 }
 
 // src/component/form.tsx
-var import_jsx_runtime7 = require("react/jsx-runtime");
+var import_jsx_runtime10 = require("react/jsx-runtime");
 function Form(props) {
   const sections = prepare(props.sections, props.definition);
-  return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("div", { className: "h-full w-full", children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("form", { noValidate: props.noValidate, action: props.action, children: /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(Group, { children: [
-    sections.map((section, index) => /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(import_react.Fragment, { children: [
-      /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(FieldSet, { section, style: props.config.style, children: props.children({
+  return /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("div", { className: "h-full w-full", children: /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("form", { noValidate: props.noValidate, action: props.action, children: /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(Group, { children: [
+    sections.map((section, index) => /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(VisibilityGuard, { fields: section.fields ?? [], children: [
+      /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(FieldSet, { section, style: props.config.style, children: props.children({
         disabled: props.readOnly,
         fields: section.fields
       }) }),
-      section.separator && /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(Separator, {})
+      section.separator && /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(Separator, {})
     ] }, index)),
-    props.control && /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(Control, { isPending: props.isPending, children: props.control })
+    props.control && /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(Control, { isPending: props.isPending, children: props.control })
   ] }) }) });
 }
 
 // src/component/description.tsx
-var import_jsx_runtime8 = require("react/jsx-runtime");
+var import_jsx_runtime11 = require("react/jsx-runtime");
 function Description(props) {
-  return /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("p", { className: "-mt-2 text-xs leading-normal font-normal text-slate-600 dark:text-slate-400", children: props.children });
+  return /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("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
-var import_jsx_runtime9 = require("react/jsx-runtime");
+var import_jsx_runtime12 = require("react/jsx-runtime");
 function FormattedDescription(props) {
   const content = formatMarkdown2(props.text);
   if (content) {
-    return /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(Description, { children: content });
+    return /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(Description, { children: content });
   }
   return null;
 }
 
 // src/component/label.tsx
 var import_tailwind_merge = require("tailwind-merge");
-var import_jsx_runtime10 = require("react/jsx-runtime");
+var import_jsx_runtime13 = require("react/jsx-runtime");
 function Label(props) {
   const showOptionalLabel = props.style?.showOptionalLabel ?? true;
   const normal = isRadio(props.field) || isCheckbox(props.field);
-  return /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)(
     "label",
     {
       "data-slot": "field-label",
@@ -737,30 +966,31 @@ function Label(props) {
       htmlFor: props.field.name,
       children: [
         props.children,
-        showOptionalLabel && !props.field.required && /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("span", { className: "text-sm text-slate-600 dark:text-slate-400", children: translate("(Optional)", props.translations) })
+        showOptionalLabel && !props.field.required && /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("span", { className: "text-sm text-slate-600 dark:text-slate-400", children: translate("(Optional)", props.translations) })
       ]
     }
   );
 }
 
 // src/component/input-label.tsx
-var import_jsx_runtime11 = require("react/jsx-runtime");
+var import_jsx_runtime14 = require("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__ */ (0, import_jsx_runtime11.jsxs)(
+  };
+  const label = interpolateIfNeeded(props.field.label, interpolateOpts);
+  const description = interpolateIfNeeded(
+    props.field.description,
+    interpolateOpts
+  );
+  return /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)(
     "div",
     {
       "data-slot": "field-content",
       className: "flex w-full flex-1 flex-col gap-1.5 leading-snug",
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
           Label,
           {
             field: props.field,
@@ -769,7 +999,7 @@ function InputLabel(props) {
             children: translate(label, props.translations)
           }
         ),
-        props.orientation === HORIZONTAL && /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
+        props.orientation === HORIZONTAL && /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
           FormattedDescription,
           {
             text: translate(description, props.translations)
@@ -781,10 +1011,10 @@ function InputLabel(props) {
 }
 
 // src/component/input-group.tsx
-var import_jsx_runtime12 = require("react/jsx-runtime");
+var import_jsx_runtime15 = require("react/jsx-runtime");
 function InputGroup(props) {
-  return /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)(import_jsx_runtime12.Fragment, { children: [
-    props.field.name && props.field.label && /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)(import_jsx_runtime15.Fragment, { children: [
+    props.field.name && props.field.label && /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
       InputLabel,
       {
         config: props.config,
@@ -795,7 +1025,7 @@ function InputGroup(props) {
       }
     ),
     props.children,
-    props.orientation === VERTICAL && props.field.description && /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
+    props.orientation === VERTICAL && props.field.description && /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
       FormattedDescription,
       {
         text: translate(props.field.description, props.translations)
@@ -813,7 +1043,7 @@ function renderIfExists(value, render) {
 }
 
 // src/server/component/input.tsx
-var import_jsx_runtime13 = require("react/jsx-runtime");
+var import_jsx_runtime16 = require("react/jsx-runtime");
 function Input(props) {
   const source = resolveSource(props.field, props.value);
   const { commonPropsWithOptions, defaultValue } = prepareInputProps(
@@ -823,7 +1053,7 @@ function Input(props) {
     props.value
   );
   const defaultProps = prepareDefaultValue(props.field, defaultValue);
-  return renderIfExists(props.config.inputs[props.field.type], (Component) => /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
+  return renderIfExists(props.config.inputs[props.field.type], (Component) => /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
     InputGroup,
     {
       config: props.config,
@@ -831,7 +1061,7 @@ function Input(props) {
       field: props.field,
       orientation: props.orientation,
       translations: props.translations,
-      children: /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
+      children: /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
         Component,
         {
           ...props.ariaAttributes,
@@ -845,27 +1075,27 @@ function Input(props) {
 }
 
 // src/component/field/field-error.tsx
-var import_jsx_runtime14 = require("react/jsx-runtime");
+var import_jsx_runtime17 = require("react/jsx-runtime");
 function FieldError(props) {
   if (!props.errors || props.errors.length === 0) {
     return null;
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
     "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__ */ (0, import_jsx_runtime14.jsx)("li", { children: error }, props.name ? `${props.name}-error-${index}` : index))
+      children: props.errors?.map((error, index) => /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("li", { children: error }, props.name ? `${props.name}-error-${index}` : index))
     }
   );
 }
 
 // src/component/field/field-base.tsx
 var import_tailwind_merge2 = require("tailwind-merge");
-var import_jsx_runtime15 = require("react/jsx-runtime");
+var import_jsx_runtime18 = require("react/jsx-runtime");
 function FieldBase(props) {
   const errors = props.errors && props.errors.length > 0;
-  return /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
     "div",
     {
       "data-slot": "field",
@@ -887,9 +1117,9 @@ function FieldBase(props) {
 
 // src/component/field/field-vertical.tsx
 var import_tailwind_merge3 = require("tailwind-merge");
-var import_jsx_runtime16 = require("react/jsx-runtime");
+var import_jsx_runtime19 = require("react/jsx-runtime");
 function FieldVertical(props) {
-  return /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
     FieldBase,
     {
       ...props,
@@ -905,9 +1135,9 @@ function FieldVertical(props) {
 
 // src/component/field/field-horizontal.tsx
 var import_tailwind_merge4 = require("tailwind-merge");
-var import_jsx_runtime17 = require("react/jsx-runtime");
+var import_jsx_runtime20 = require("react/jsx-runtime");
 function FieldHorizontal(props) {
-  return /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
     FieldBase,
     {
       ...props,
@@ -930,13 +1160,13 @@ function FieldHorizontal(props) {
 }
 
 // src/component/field/field-group.tsx
-var import_jsx_runtime18 = require("react/jsx-runtime");
+var import_jsx_runtime21 = require("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__ */ (0, import_jsx_runtime18.jsx)(
+    return /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
       FieldVertical,
       {
         disabled: props.disabled,
@@ -948,7 +1178,7 @@ function FieldGroup(props) {
       }
     );
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
     FieldHorizontal,
     {
       disabled: props.disabled,
@@ -984,7 +1214,7 @@ function InputBase(props) {
 
 // src/component/field/field.tsx
 var import_tailwind_merge5 = require("tailwind-merge");
-var import_jsx_runtime19 = require("react/jsx-runtime");
+var import_jsx_runtime22 = require("react/jsx-runtime");
 function Field(props) {
   const cols2 = props.field.advanced?.cols;
   const errors = props.field.name ? props.errors?.[props.field.name] : void 0;
@@ -992,15 +1222,15 @@ function Field(props) {
     orientation: buildOrientation(props.field)
   });
   const disabled = buildDisabled(props.field, props.disabled);
-  return /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)("div", { className: (0, import_tailwind_merge5.twMerge)("flex flex-col gap-3", getSpan(cols2)), children: [
-    /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)("div", { className: (0, import_tailwind_merge5.twMerge)("flex flex-col gap-3", getSpan(cols2)), children: [
+    /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
       FieldGroup,
       {
         disabled,
         errors,
         field: props.field,
         orientation,
-        children: /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
+        children: /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
           InputBase,
           {
             disabled,
@@ -1012,44 +1242,175 @@ function Field(props) {
         )
       }
     ),
-    /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(FieldError, { errors, name: props.field.name })
+    /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(FieldError, { errors, name: props.field.name })
   ] });
 }
 
-// src/component/column.tsx
+// src/component/field/field-list-item.tsx
 var import_tailwind_merge6 = require("tailwind-merge");
-var import_jsx_runtime20 = require("react/jsx-runtime");
+var import_jsx_runtime23 = require("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__ */ (0, import_jsx_runtime23.jsx)(
+    "button",
+    {
+      "aria-label": `Remove ${props.label} item ${props.index + 1}`,
+      className: (0, import_tailwind_merge6.twMerge)(
+        "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__ */ (0, import_jsx_runtime23.jsx)("span", { "aria-hidden": "true", children: "\xD7" })
+    }
+  );
+  if (props.isMultiField) {
+    return /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)("div", { className: "rounded-lg border border-slate-100 p-4 dark:border-slate-900", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)("div", { className: "mb-3 flex items-center justify-between", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)("span", { className: "text-sm font-medium text-slate-400 dark:text-slate-500", children: [
+          props.label,
+          " ",
+          props.index + 1
+        ] }),
+        removeButton
+      ] }),
+      /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(Group, { children: props.children })
+    ] });
+  }
+  return /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)("div", { className: "flex items-start gap-2", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(Group, { children: props.children }),
+    removeButton && /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("div", { className: "shrink-0", children: removeButton })
+  ] });
+}
+
+// src/component/field/field-list.tsx
+var import_jsx_runtime24 = require("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__ */ (0, import_jsx_runtime24.jsx)(
+    FieldListItem,
+    {
+      index,
+      isMultiField,
+      label,
+      children: props.children(index)
+    },
+    index
+  ));
+}
+
+// src/component/list.tsx
+var import_jsx_runtime25 = require("react/jsx-runtime");
+function List(props) {
+  const empty = Array.isArray(props.field.fields) && props.field.fields.length === 0;
+  return /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(
+    FieldSetBase,
+    {
+      description: props.field.description,
+      empty,
+      id: props.field.name,
+      title: props.field.label,
+      children: props.children
+    }
+  );
+}
+
+// src/component/slot/list-slot.tsx
+var import_jsx_runtime26 = require("react/jsx-runtime");
+function ListSlot({ children, field, value }) {
+  return /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(List, { field, children: /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(FieldList, { field, value, children }) });
+}
+
+// src/component/column.tsx
+var import_tailwind_merge7 = require("tailwind-merge");
+var import_jsx_runtime27 = require("react/jsx-runtime");
 function Column(props) {
   const cols2 = getColumn(props.column?.advanced?.cols);
-  return /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("div", { className: "flex w-full flex-col gap-4", children: /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("div", { className: (0, import_tailwind_merge6.twMerge)("grid grid-cols-1 gap-3 sm:gap-4", cols2), children: props.children }) });
+  return /* @__PURE__ */ (0, import_jsx_runtime27.jsx)("div", { className: "flex w-full flex-col gap-4", children: /* @__PURE__ */ (0, import_jsx_runtime27.jsx)("div", { className: (0, import_tailwind_merge7.twMerge)("grid grid-cols-1 gap-3 sm:gap-4", cols2), children: props.children }) });
 }
 
 // src/component/slot/slot-base.tsx
 var import_react2 = require("react");
-var import_jsx_runtime21 = require("react/jsx-runtime");
+
+// src/component/slot/slot-list.tsx
+var import_jsx_runtime28 = require("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__ */ (0, import_jsx_runtime28.jsx)(
+    SlotBase,
+    {
+      children: props.children,
+      components: props.components,
+      disabled: props.disabled,
+      fields,
+      style: props.style,
+      value: props.value
+    }
+  );
+}
+
+// src/component/slot/slot-base.tsx
+var import_jsx_runtime29 = require("react/jsx-runtime");
 function SlotBase(props) {
-  const { column: Column2, field: Field2 } = props.components;
-  return prepare(props.fields).map((field, index) => /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)(import_react2.Fragment, { children: [
-    isColumn(field) && /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(Column2, { column: field, children: /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(SlotBase, { ...props, fields: field.fields }) }),
-    isField(field) && /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(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__ */ (0, import_jsx_runtime29.jsxs)(import_react2.Fragment, { children: [
+    isColumn(field) && /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(Column, { column: field, children: /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(SlotBase, { ...props, fields: field.fields }) }),
+    isField(field) && /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(Field2, { disabled: props.disabled, field, style: props.style, children: props.children }),
+    isList(field) && /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(List2, { field, value: props.value, children: (index2) => /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(
+      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
-var import_jsx_runtime22 = require("react/jsx-runtime");
-function createSlot(Field2) {
-  const CreateSlot = (props) => /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(SlotBase, { ...props, components: { column: Column, field: Field2 } });
+var import_jsx_runtime30 = require("react/jsx-runtime");
+function createSlot(components) {
+  const CreateSlot = (props) => /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(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
-var import_jsx_runtime23 = require("react/jsx-runtime");
+var import_jsx_runtime31 = require("react/jsx-runtime");
 function Form2(props) {
   const translations = props.translations?.[props.lang ?? ""];
-  return /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(
     Form,
     {
       config: props.config,
@@ -1057,7 +1418,7 @@ function Form2(props) {
       definition: props.definition,
       readOnly: props.readOnly,
       sections: props.sections,
-      children: ({ disabled, fields }) => /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(Slot, { disabled, fields, style: props.config.style, children: (internal) => /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
+      children: ({ disabled, fields }) => /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(Slot, { disabled, fields, style: props.config.style, children: (internal) => /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(
         Input,
         {
           ...internal,
@@ -1073,12 +1434,12 @@ function Form2(props) {
 
 // src/server/component/fallback.tsx
 var import_react3 = require("react");
-var import_jsx_runtime24 = require("react/jsx-runtime");
+var import_jsx_runtime32 = require("react/jsx-runtime");
 function Fallback(props) {
-  return /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(
     import_react3.Suspense,
     {
-      fallback: /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(Form2, { config: props.config, sections: props.sections, readOnly: true }),
+      fallback: /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(Form2, { config: props.config, sections: props.sections, readOnly: true }),
       children: props.children
     }
   );