@dappworks/kit 0.4.87 → 0.4.89

package/dist/form.mjs

@@ -4,8 +4,8 @@ import { helper } from './chunk-XAIZMT2F.mjs';
 import { _ } from './chunk-MGU3KYGC.mjs';
 import { cn } from './chunk-TMFAGW4V.mjs';
 import { __objRest, __spreadValues, __spreadProps } from './chunk-6F7H4PAA.mjs';
-import React6, { useEffect, useMemo, useState, useCallback, useRef, createRef } from 'react';
-import { Modal, ModalContent, ModalHeader, ModalBody, Checkbox, Input, Select, SelectItem, Button, Textarea, DatePicker, Card, Tabs, Tab } from '@nextui-org/react';
+import React7, { useEffect, useMemo, useState, useCallback, useRef, createRef } from 'react';
+import { Modal, ModalContent, ModalHeader, ModalBody, Checkbox, Input, Select, SelectItem, Button, Textarea, DatePicker, Chip, Card, Tabs, Tab } from '@nextui-org/react';
 import { Check, ChevronUp, ChevronDown } from 'lucide-react';
 import MonacoEditor from '@monaco-editor/react';
 import validator from '@rjsf/validator-ajv8';
@@ -29,7 +29,7 @@ function CheckboxWidget({
   const { validate } = uiSchema;
   const [errMsg, setErrMsg] = useState("");
   const isInvalid = !!errMsg;
-  return /* @__PURE__ */ React6.createElement(React6.Fragment, null, /* @__PURE__ */ React6.createElement(
+  return /* @__PURE__ */ React7.createElement(React7.Fragment, null, /* @__PURE__ */ React7.createElement(
     Checkbox,
     {
       className: cn("w-full", className),
@@ -38,7 +38,7 @@ function CheckboxWidget({
       },
       defaultSelected: value,
       isDisabled: disabled,
-      icon: /* @__PURE__ */ React6.createElement(Check, { className: "bg-white dark:bg-black" }),
+      icon: /* @__PURE__ */ React7.createElement(Check, { className: "bg-white dark:bg-black" }),
       color,
       size,
       onChange: (e) => {
@@ -55,13 +55,15 @@ function CheckboxWidget({
       }
     },
     label
-  ), description && /* @__PURE__ */ React6.createElement("div", { className: cn("mt-1 text-xs text-[#A1A1A9] dark:text-[#717179]", descriptionClassName) }, description), isInvalid && /* @__PURE__ */ React6.createElement("div", { className: "mt-2 text-xs text-[#DF3562]" }, errMsg));
+  ), description && /* @__PURE__ */ React7.createElement("div", { className: cn("mt-1 text-xs text-[#A1A1A9] dark:text-[#717179]", descriptionClassName) }, description), isInvalid && /* @__PURE__ */ React7.createElement("div", { className: "mt-2 text-xs text-[#DF3562]" }, errMsg));
 }
 function InputWidget(props) {
+  var _a;
   const { onChange, options, label, value, required, disabled, uiSchema } = props;
-  const { className, nextuiClassNames, labelPlacement = "inside", size = "sm", inputType = "text", placeholder, color, variant, radius, startContent, endContent, description } = options;
+  const { className, nextuiClassNames, labelPlacement = "inside", size = "sm", inputType = "text", color, variant, radius, startContent, endContent, description } = options;
   const { requiredErrMsg, validate } = uiSchema;
-  return /* @__PURE__ */ React6.createElement(
+  const placeholder = (_a = uiSchema["ui:options"]) == null ? void 0 : _a.placeholder;
+  return /* @__PURE__ */ React7.createElement(
     Input,
     {
       className: cn("w-full", className),
@@ -95,6 +97,7 @@ function InputWidget(props) {
   );
 }
 function SelectWidget(props) {
+  var _a;
   const { onChange, options, label, value, required, disabled, uiSchema } = props;
   const {
     className,
@@ -118,13 +121,13 @@ function SelectWidget(props) {
     },
     labelPlacement = "inside",
     size = "sm",
-    placeholder = "Select an option",
     color,
     variant,
     radius,
     description
   } = options;
   const { selectOptions = [], requiredErrMsg, validate } = uiSchema;
+  const placeholder = (_a = uiSchema["ui:options"]) == null ? void 0 : _a.placeholder;
   const [errMsg, setErrMsg] = useState("");
   const isInvalid = !!errMsg;
   const checkValue = useCallback((value2) => {
@@ -139,7 +142,7 @@ function SelectWidget(props) {
     }
     setErrMsg("");
   }, []);
-  return /* @__PURE__ */ React6.createElement(
+  return /* @__PURE__ */ React7.createElement(
     Select,
     {
       label: label == null ? void 0 : label.trim(),
@@ -165,9 +168,82 @@ function SelectWidget(props) {
         checkValue(_v);
       }
     },
-    selectOptions.map((item) => /* @__PURE__ */ React6.createElement(SelectItem, { key: item.value, value: item.value }, item.label))
+    selectOptions.map((item) => /* @__PURE__ */ React7.createElement(SelectItem, { key: item.value, value: item.value }, item.label))
+  );
+}
+function MultipleSelectWidget(props) {
+  var _a;
+  const { onChange, options, label, value, required, uiSchema = {} } = props;
+  const { selectOptions = [], requiredErrMsg, validate } = uiSchema;
+  const { className, labelPlacement = "inside", size = "sm", color, description, renderValue = DefaultRenderValue } = options;
+  const placeholder = ((_a = uiSchema["ui:options"]) == null ? void 0 : _a.placeholder) || "Select an option";
+  const selectedKeys = useMemo(() => {
+    return value ? value.split(",") : [];
+  }, [value]);
+  const [errMsg, setErrMsg] = useState("");
+  const isInvalid = !!errMsg;
+  const checkValue = useCallback((value2) => {
+    if (!value2 && required) {
+      setErrMsg(requiredErrMsg || "This field is required");
+      return;
+    }
+    if (validate) {
+      const errMsg2 = validate(value2);
+      setErrMsg(errMsg2);
+      return;
+    }
+    setErrMsg("");
+  }, []);
+  return /* @__PURE__ */ React7.createElement(
+    Select,
+    {
+      className: cn("w-full", className),
+      label,
+      isMultiline: true,
+      selectionMode: "multiple",
+      labelPlacement,
+      size,
+      placeholder,
+      selectedKeys,
+      isRequired: required,
+      color: isInvalid ? "danger" : color,
+      errorMessage: isInvalid && errMsg,
+      onSelectionChange: (v) => {
+        const keys = Array.from(v);
+        const _v = keys.join(",");
+        onChange(_v);
+        checkValue(_v);
+      },
+      items: selectOptions,
+      classNames: {
+        base: "w-full",
+        trigger: "min-h-12 py-1",
+        popoverContent: "rounded-lg shadow-md border dark:border-[#3e3e3e]"
+      },
+      listboxProps: {
+        itemClasses: {
+          base: [
+            "rounded-lg",
+            "text-default-500",
+            "transition-opacity",
+            "data-[hover=true]:text-foreground",
+            "data-[hover=true]:bg-default-100",
+            "dark:data-[hover=true]:bg-default-50",
+            "data-[selectable=true]:focus:bg-default-50",
+            "data-[pressed=true]:opacity-70",
+            "data-[focus-visible=true]:ring-default-500"
+          ]
+        }
+      },
+      description,
+      renderValue
+    },
+    selectOptions.map((item) => /* @__PURE__ */ React7.createElement(SelectItem, { key: item.value, textValue: item.label }, item.label))
   );
 }
+function DefaultRenderValue(items) {
+  return /* @__PURE__ */ React7.createElement("div", { className: "flex flex-wrap gap-2" }, items.map((item) => /* @__PURE__ */ React7.createElement(Chip, { color: "secondary", size: "sm", key: item.key }, item.textValue)));
+}
 var EditorWidget = ({ label, options = {}, value, required, uiSchema, disabled, onChange }) => {
   const { editorHeight = "200px", readOnly = false, language = "json", jsonStrSpace, languageSelectorOptions = [], description, descriptionClassName, errMsgClassName, onChangeLanguage, onRun, onMount } = options;
   const { requiredErrMsg, validate } = uiSchema;
@@ -190,14 +266,14 @@ var EditorWidget = ({ label, options = {}, value, required, uiSchema, disabled,
       setErrMsg("");
     }, 1e3)
   ).current;
-  return /* @__PURE__ */ React6.createElement("div", { className: "flex flex-col relative" }, /* @__PURE__ */ React6.createElement("div", { className: cn("flex justify-between items-center", { "mb-[10px]": label.trim() || showLanguageSelector }) }, label && /* @__PURE__ */ React6.createElement(
+  return /* @__PURE__ */ React7.createElement("div", { className: "flex flex-col relative" }, /* @__PURE__ */ React7.createElement("div", { className: cn("flex justify-between items-center", { "mb-[10px]": label.trim() || showLanguageSelector }) }, label && /* @__PURE__ */ React7.createElement(
     "label",
     {
       className: "mr-2 flex items-center text-sm"
     },
     label,
-    required && /* @__PURE__ */ React6.createElement("span", { className: "font-bold text-red-600" }, "*")
-  ), showLanguageSelector && /* @__PURE__ */ React6.createElement(
+    required && /* @__PURE__ */ React7.createElement("span", { className: "font-bold text-red-600" }, "*")
+  ), showLanguageSelector && /* @__PURE__ */ React7.createElement(
     "select",
     {
       className: "w-full p-3 text-sm rounded-md bg-[#F4F4F5] dark:bg-[#27272A]",
@@ -209,9 +285,9 @@ var EditorWidget = ({ label, options = {}, value, required, uiSchema, disabled,
       }
     },
     languageSelectorOptions.map((item) => {
-      return /* @__PURE__ */ React6.createElement("option", { key: item.value, value: item.value }, item.label);
+      return /* @__PURE__ */ React7.createElement("option", { key: item.value, value: item.value }, item.label);
     })
-  )), description && /* @__PURE__ */ React6.createElement("div", { className: cn("mb-2 text-xs text-[#A1A1A9] dark:text-[#717179]", descriptionClassName) }, description), /* @__PURE__ */ React6.createElement("div", { className: "rounded-lg overflow-hidden relative" }, /* @__PURE__ */ React6.createElement(
+  )), description && /* @__PURE__ */ React7.createElement("div", { className: cn("mb-2 text-xs text-[#A1A1A9] dark:text-[#717179]", descriptionClassName) }, description), /* @__PURE__ */ React7.createElement("div", { className: "rounded-lg overflow-hidden relative" }, /* @__PURE__ */ React7.createElement(
     MonacoEditor,
     {
       options: { readOnly: readOnly || disabled, minimap: { enabled: false } },
@@ -231,7 +307,7 @@ var EditorWidget = ({ label, options = {}, value, required, uiSchema, disabled,
         }
       }
     }
-  )), isInvalid && /* @__PURE__ */ React6.createElement("div", { className: cn("mt-2 text-xs text-[#DF3562]", errMsgClassName) }, errMsg), onRun && /* @__PURE__ */ React6.createElement(
+  )), isInvalid && /* @__PURE__ */ React7.createElement("div", { className: cn("mt-2 text-xs text-[#DF3562]", errMsgClassName) }, errMsg), onRun && /* @__PURE__ */ React7.createElement(
     Button,
     {
       className: "absolute bottom-2 right-4",
@@ -343,7 +419,7 @@ var getFormState = (props, formLayout = {}) => {
     const value = {};
     const required = [];
     const properties = Object.entries(metadata).reduce((p, c) => {
-      var _a2, _b, _c;
+      var _a2, _b, _c, _d;
       const [k, v] = c;
       const type = typeof v;
       p[k] = {
@@ -361,7 +437,11 @@ var getFormState = (props, formLayout = {}) => {
       }
       if (type === "string" || type === "number") {
         if ((_c = formConfigData[k]) == null ? void 0 : _c.selectOptions) {
-          formConfigData[k]["ui:widget"] = SelectWidget;
+          if ((_d = formConfigData[k]) == null ? void 0 : _d.isMultipleSelect) {
+            formConfigData[k]["ui:widget"] = MultipleSelectWidget;
+          } else {
+            formConfigData[k]["ui:widget"] = SelectWidget;
+          }
         } else {
           if (!formConfigData[k]["ui:widget"]) {
             formConfigData[k]["ui:widget"] = InputWidget;
@@ -437,7 +517,7 @@ var getFormState = (props, formLayout = {}) => {
 var BatchSubmitButton = ({ formStates, onSubmit, buttonProps }) => {
   const _a = buttonProps || {}, { className, onClick, children, isLoading, onBatchSubmit } = _a, rest = __objRest(_a, ["className", "onClick", "children", "isLoading", "onBatchSubmit"]);
   const [loading, setLoading] = useState(false);
-  return /* @__PURE__ */ React6.createElement(
+  return /* @__PURE__ */ React7.createElement(
     Button,
     __spreadValues({
       className: cn("mt-4 ml-auto", className),
@@ -488,7 +568,7 @@ var BatchSubmitButton = ({ formStates, onSubmit, buttonProps }) => {
 var SubmitButton = ({ formKey, formState, buttonProps }) => {
   const _a = buttonProps || {}, { className, onClick, children, isLoading, onAfterSubmit } = _a, rest = __objRest(_a, ["className", "onClick", "children", "isLoading", "onAfterSubmit"]);
   const [loading, setLoading] = useState(false);
-  return /* @__PURE__ */ React6.createElement("div", { className: "w-full flex" }, /* @__PURE__ */ React6.createElement(
+  return /* @__PURE__ */ React7.createElement("div", { className: "w-full flex" }, /* @__PURE__ */ React7.createElement(
     Button,
     __spreadValues({
       className: cn("mt-4 ml-auto", className),
@@ -529,10 +609,10 @@ var SubmitButton = ({ formKey, formState, buttonProps }) => {
   ));
 };
 var CustomButton = ({ formKey, formState, buttonProps }) => {
-  return /* @__PURE__ */ React6.createElement("div", { className: "w-full flex gap-2" }, buttonProps.map((i, index) => {
+  return /* @__PURE__ */ React7.createElement("div", { className: "w-full flex gap-2" }, buttonProps.map((i, index) => {
     const [loading, setLoading] = useState(false);
     const _a = i, { className, onClick, title } = _a, rest = __objRest(_a, ["className", "onClick", "title"]);
-    return /* @__PURE__ */ React6.createElement(
+    return /* @__PURE__ */ React7.createElement(
       Button,
       __spreadValues({
         className: cn("mt-4", className),
@@ -560,51 +640,51 @@ function FieldTemplate(props) {
   const isDateTime = uiSchema && uiSchema["ui:widget"] === "date-time";
   const isTime = uiSchema && uiSchema["ui:widget"] === "time";
   const showLabel = isDate || isDateTime || isTime;
-  return /* @__PURE__ */ React6.createElement("div", { className: cn(classNames) }, showLabel && /* @__PURE__ */ React6.createElement("label", { htmlFor: id, className: cn("flex items-center h-8") }, /* @__PURE__ */ React6.createElement("span", { className: "text-sm" }, label), required && /* @__PURE__ */ React6.createElement("span", { className: "font-bold text-red-600" }, "*")), children);
+  return /* @__PURE__ */ React7.createElement("div", { className: cn(classNames) }, showLabel && /* @__PURE__ */ React7.createElement("label", { htmlFor: id, className: cn("flex items-center h-8") }, /* @__PURE__ */ React7.createElement("span", { className: "text-sm" }, label), required && /* @__PURE__ */ React7.createElement("span", { className: "font-bold text-red-600" }, "*")), children);
 }
 var renderLayout = (layout, fields, n = 1) => {
   n++;
   return layout.map((item, index) => {
     if (Array.isArray(item)) {
       const even = (n & 1) === 0;
-      return /* @__PURE__ */ React6.createElement("div", { key: index, className: cn("w-full flex justify-between items-center space-x-2", even ? "flex-row items-start" : "flex-col") }, renderLayout(item, fields, n));
+      return /* @__PURE__ */ React7.createElement("div", { key: index, className: cn("w-full flex justify-between items-center space-x-2", even ? "flex-row items-start" : "flex-col") }, renderLayout(item, fields, n));
     } else {
-      return /* @__PURE__ */ React6.createElement("div", { className: "w-full", key: index }, fields[item]);
+      return /* @__PURE__ */ React7.createElement("div", { className: "w-full", key: index }, fields[item]);
     }
   });
 };
 var ObjectFieldTemplate = ({ title, idSchema: { $id }, properties, uiSchema: { layout } }) => {
   const [opened, setOpened] = useState(false);
   const fields = Object.fromEntries(properties.map((item) => [item.name, item.content]));
-  return /* @__PURE__ */ React6.createElement("div", { className: "w-full space-y-2.5" }, $id === "root" ? layout ? renderLayout(layout, fields) : properties.map((element) => {
-    return /* @__PURE__ */ React6.createElement("div", { key: element.content.key }, element.content);
-  }) : /* @__PURE__ */ React6.createElement(React6.Fragment, null, /* @__PURE__ */ React6.createElement(
+  return /* @__PURE__ */ React7.createElement("div", { className: "w-full space-y-2.5" }, $id === "root" ? layout ? renderLayout(layout, fields) : properties.map((element) => {
+    return /* @__PURE__ */ React7.createElement("div", { key: element.content.key }, element.content);
+  }) : /* @__PURE__ */ React7.createElement(React7.Fragment, null, /* @__PURE__ */ React7.createElement(
     "div",
     {
       className: "mt-5 mb-[10px] flex justify-between items-center cursor-pointer border-t-[1px solid #E5E5EA] py-[5px] hover:bg-[#F2F2F7] dark:hover:bg-gray-900",
       onClick: () => setOpened((o) => !o)
     },
-    /* @__PURE__ */ React6.createElement("div", { className: "text-gray-900 dark:text-gray-100 font-bold text-base" }, title),
-    opened ? /* @__PURE__ */ React6.createElement(ChevronUp, null) : /* @__PURE__ */ React6.createElement(ChevronDown, null)
-  ), /* @__PURE__ */ React6.createElement("div", { className: cn("mt-2 space-y-2.5", opened ? "block" : "hidden") }, layout ? renderLayout(layout, fields) : properties.map((element) => {
-    return /* @__PURE__ */ React6.createElement("div", { key: element.content.key }, element.content);
+    /* @__PURE__ */ React7.createElement("div", { className: "text-gray-900 dark:text-gray-100 font-bold text-base" }, title),
+    opened ? /* @__PURE__ */ React7.createElement(ChevronUp, null) : /* @__PURE__ */ React7.createElement(ChevronDown, null)
+  ), /* @__PURE__ */ React7.createElement("div", { className: cn("mt-2 space-y-2.5", opened ? "block" : "hidden") }, layout ? renderLayout(layout, fields) : properties.map((element) => {
+    return /* @__PURE__ */ React7.createElement("div", { key: element.content.key }, element.content);
   }))));
 };
 var ErrorListTemplate = ({ errors }) => {
-  return /* @__PURE__ */ React6.createElement("div", null, /* @__PURE__ */ React6.createElement("div", { className: "font-bold" }, "Errors"), /* @__PURE__ */ React6.createElement("div", { className: "mt-[10px]" }, errors.map((error) => /* @__PURE__ */ React6.createElement("div", { className: "mb-[10px]", color: "red", key: error.property }, error.stack))));
+  return /* @__PURE__ */ React7.createElement("div", null, /* @__PURE__ */ React7.createElement("div", { className: "font-bold" }, "Errors"), /* @__PURE__ */ React7.createElement("div", { className: "mt-[10px]" }, errors.map((error) => /* @__PURE__ */ React7.createElement("div", { className: "mb-[10px]", color: "red", key: error.property }, error.stack))));
 };
 var SubmitButton2 = ({ uiSchema }) => {
   const { submitText, norender, props: submitButtonProps = {} } = Utils.getSubmitButtonOptions(uiSchema);
   if (norender) {
     return null;
   }
-  return /* @__PURE__ */ React6.createElement("div", { className: "flex justify-end mt-4" }, /* @__PURE__ */ React6.createElement(Button, { type: "submit", color: "primary", size: "sm" }, submitText));
+  return /* @__PURE__ */ React7.createElement("div", { className: "flex justify-end mt-4" }, /* @__PURE__ */ React7.createElement(Button, { type: "submit", color: "primary", size: "sm" }, submitText));
 };
 var JSONSchemaForm = observer(({ children, formState }) => {
   var _a;
   if (!((_a = formState == null ? void 0 : formState.dynamicData) == null ? void 0 : _a.ready))
-    return /* @__PURE__ */ React6.createElement(React6.Fragment, null);
-  return /* @__PURE__ */ React6.createElement(
+    return /* @__PURE__ */ React7.createElement(React7.Fragment, null);
+  return /* @__PURE__ */ React7.createElement(
     Form,
     {
       showErrorList: "bottom",
@@ -751,7 +831,7 @@ var colSpanLg = {
 };
 
 // components/ui/grid/col.tsx
-var Col = React6.forwardRef((props, ref) => {
+var Col = React7.forwardRef((props, ref) => {
   const _a = props, { numColSpan = 1, numColSpanSm, numColSpanMd, numColSpanLg, children, className } = _a, other = __objRest(_a, ["numColSpan", "numColSpanSm", "numColSpanMd", "numColSpanLg", "children", "className"]);
   const getColSpan = (numColSpan2, colSpanMapping) => {
     if (!numColSpan2)
@@ -767,7 +847,7 @@ var Col = React6.forwardRef((props, ref) => {
     const spanLg = getColSpan(numColSpanLg, colSpanLg);
     return cn(spanBase, spanSm, spanMd, spanLg);
   };
-  return /* @__PURE__ */ React6.createElement("div", __spreadValues({ ref, className: cn(getColSpanClassNames(), className) }, other), children);
+  return /* @__PURE__ */ React7.createElement("div", __spreadValues({ ref, className: cn(getColSpanClassNames(), className) }, other), children);
 });
 Col.displayName = "Col";
 var col_default = Col;
@@ -778,14 +858,14 @@ var getGridCols = (numCols, gridColsMapping) => {
     return "";
   return gridColsMapping[numCols];
 };
-var Grid = React6.forwardRef((props, ref) => {
+var Grid = React7.forwardRef((props, ref) => {
   const _a = props, { numItems = 1, numItemsSm, numItemsMd, numItemsLg, children, className } = _a, other = __objRest(_a, ["numItems", "numItemsSm", "numItemsMd", "numItemsLg", "children", "className"]);
   const colsBase = getGridCols(numItems, gridCols);
   const colsSm = getGridCols(numItemsSm, gridColsSm);
   const colsMd = getGridCols(numItemsMd, gridColsMd);
   const colsLg = getGridCols(numItemsLg, gridColsLg);
   const colClassNames = cn(colsBase, colsSm, colsMd, colsLg);
-  return /* @__PURE__ */ React6.createElement("div", __spreadValues({ ref, className: cn("grid", colClassNames, className) }, other), children);
+  return /* @__PURE__ */ React7.createElement("div", __spreadValues({ ref, className: cn("grid", colClassNames, className) }, other), children);
 });
 Grid.displayName = "Grid";
 var grid_default = Grid;
@@ -800,23 +880,23 @@ var GridLayout = (props) => {
       onReady(formStates);
     }
   }, [formStates]);
-  return /* @__PURE__ */ React6.createElement(React6.Fragment, null, /* @__PURE__ */ React6.createElement(grid_default, { numItems: $gridColumn != null ? $gridColumn : 1, className: "gap-2" }, Object.keys(formStates).map((key) => {
+  return /* @__PURE__ */ React7.createElement(React7.Fragment, null, /* @__PURE__ */ React7.createElement(grid_default, { numItems: $gridColumn != null ? $gridColumn : 1, className: "gap-2" }, Object.keys(formStates).map((key) => {
     var _a2;
     const layout = formLayout[key];
-    return /* @__PURE__ */ React6.createElement(col_default, { numColSpan: (_a2 = layout == null ? void 0 : layout.colSpan) != null ? _a2 : 1, key, id: `form-${key}` }, /* @__PURE__ */ React6.createElement(Card, { className: cn("h-full m-0 p-4 shadow-sm border dark:border-[#3e3e3e]", layout == null ? void 0 : layout.cardCss) }, /* @__PURE__ */ React6.createElement("div", { className: cn("mb-2 font-bold text-center", layout == null ? void 0 : layout.titleBoxCss) }, (layout == null ? void 0 : layout.title) || key), /* @__PURE__ */ React6.createElement(JSONSchemaForm, { formState: formStates[key] }, (layout == null ? void 0 : layout.submitButtonProps) && /* @__PURE__ */ React6.createElement(SubmitButton, { formKey: key, formState: formStates[key], buttonProps: layout.submitButtonProps }), (layout == null ? void 0 : layout.customButtonProps) && /* @__PURE__ */ React6.createElement(CustomButton, { formKey: key, formState: formStates[key], buttonProps: layout.customButtonProps }))));
-  })), (onBatchSubmit || (batchSubmitButtonProps == null ? void 0 : batchSubmitButtonProps.onBatchSubmit)) && /* @__PURE__ */ React6.createElement("div", { className: "w-full flex" }, /* @__PURE__ */ React6.createElement(BatchSubmitButton, { formStates, onSubmit: onBatchSubmit, buttonProps: batchSubmitButtonProps })));
+    return /* @__PURE__ */ React7.createElement(col_default, { numColSpan: (_a2 = layout == null ? void 0 : layout.colSpan) != null ? _a2 : 1, key, id: `form-${key}` }, /* @__PURE__ */ React7.createElement(Card, { className: cn("h-full m-0 p-4 shadow-sm border dark:border-[#3e3e3e]", layout == null ? void 0 : layout.cardCss) }, /* @__PURE__ */ React7.createElement("div", { className: cn("mb-2 font-bold text-center", layout == null ? void 0 : layout.titleBoxCss) }, (layout == null ? void 0 : layout.title) || key), /* @__PURE__ */ React7.createElement(JSONSchemaForm, { formState: formStates[key] }, (layout == null ? void 0 : layout.submitButtonProps) && /* @__PURE__ */ React7.createElement(SubmitButton, { formKey: key, formState: formStates[key], buttonProps: layout.submitButtonProps }), (layout == null ? void 0 : layout.customButtonProps) && /* @__PURE__ */ React7.createElement(CustomButton, { formKey: key, formState: formStates[key], buttonProps: layout.customButtonProps }))));
+  })), (onBatchSubmit || (batchSubmitButtonProps == null ? void 0 : batchSubmitButtonProps.onBatchSubmit)) && /* @__PURE__ */ React7.createElement("div", { className: "w-full flex" }, /* @__PURE__ */ React7.createElement(BatchSubmitButton, { formStates, onSubmit: onBatchSubmit, buttonProps: batchSubmitButtonProps })));
 };
 var CollapsibleBox = ({ formKey, title, titleBoxCss, formState, submitButtonProps, customButtonProps }) => {
   const [opened, setOpened] = useState(true);
-  return /* @__PURE__ */ React6.createElement("div", { id: `form-${formKey}` }, /* @__PURE__ */ React6.createElement(
+  return /* @__PURE__ */ React7.createElement("div", { id: `form-${formKey}` }, /* @__PURE__ */ React7.createElement(
     "div",
     {
       className: "mt-5 mb-[10px] flex justify-between items-center cursor-pointer border-t-[1px solid #E5E5EA] py-[5px] hover:bg-[#F2F2F7] dark:hover:bg-gray-900",
       onClick: () => setOpened((o) => !o)
     },
-    /* @__PURE__ */ React6.createElement("div", { className: cn("text-gray-900 dark:text-gray-100 font-bold text-base", titleBoxCss) }, title),
-    opened ? /* @__PURE__ */ React6.createElement(ChevronUp, null) : /* @__PURE__ */ React6.createElement(ChevronDown, null)
-  ), /* @__PURE__ */ React6.createElement("div", { className: cn("mt-2", opened ? "block" : "hidden") }, /* @__PURE__ */ React6.createElement(JSONSchemaForm, { formState }, submitButtonProps && /* @__PURE__ */ React6.createElement(SubmitButton, { formKey, formState, buttonProps: submitButtonProps }), customButtonProps && /* @__PURE__ */ React6.createElement(CustomButton, { formKey, formState, buttonProps: customButtonProps }))));
+    /* @__PURE__ */ React7.createElement("div", { className: cn("text-gray-900 dark:text-gray-100 font-bold text-base", titleBoxCss) }, title),
+    opened ? /* @__PURE__ */ React7.createElement(ChevronUp, null) : /* @__PURE__ */ React7.createElement(ChevronDown, null)
+  ), /* @__PURE__ */ React7.createElement("div", { className: cn("mt-2", opened ? "block" : "hidden") }, /* @__PURE__ */ React7.createElement(JSONSchemaForm, { formState }, submitButtonProps && /* @__PURE__ */ React7.createElement(SubmitButton, { formKey, formState, buttonProps: submitButtonProps }), customButtonProps && /* @__PURE__ */ React7.createElement(CustomButton, { formKey, formState, buttonProps: customButtonProps }))));
 };
 var ListLayout = (props) => {
   const { layoutConfig = {}, onBatchSubmit, batchSubmitButtonProps, onReady } = props;
@@ -827,10 +907,10 @@ var ListLayout = (props) => {
       onReady(formStates);
     }
   }, [formStates]);
-  return /* @__PURE__ */ React6.createElement(React6.Fragment, null, Object.keys(formStates).map((key) => {
+  return /* @__PURE__ */ React7.createElement(React7.Fragment, null, Object.keys(formStates).map((key) => {
     const layout = formLayout[key];
     const formState = formStates[key];
-    return /* @__PURE__ */ React6.createElement(
+    return /* @__PURE__ */ React7.createElement(
       CollapsibleBox,
       {
         key,
@@ -842,7 +922,7 @@ var ListLayout = (props) => {
         customButtonProps: layout == null ? void 0 : layout.customButtonProps
       }
     );
-  }), (onBatchSubmit || (batchSubmitButtonProps == null ? void 0 : batchSubmitButtonProps.onBatchSubmit)) && /* @__PURE__ */ React6.createElement("div", { className: "w-full flex" }, /* @__PURE__ */ React6.createElement(BatchSubmitButton, { formStates, onSubmit: onBatchSubmit, buttonProps: batchSubmitButtonProps })));
+  }), (onBatchSubmit || (batchSubmitButtonProps == null ? void 0 : batchSubmitButtonProps.onBatchSubmit)) && /* @__PURE__ */ React7.createElement("div", { className: "w-full flex" }, /* @__PURE__ */ React7.createElement(BatchSubmitButton, { formStates, onSubmit: onBatchSubmit, buttonProps: batchSubmitButtonProps })));
 };
 var SimpleLayout = (props) => {
   const { layoutConfig = {}, onBatchSubmit, batchSubmitButtonProps, onReady } = props;
@@ -853,10 +933,10 @@ var SimpleLayout = (props) => {
       onReady(formStates);
     }
   }, [formStates]);
-  return /* @__PURE__ */ React6.createElement(React6.Fragment, null, /* @__PURE__ */ React6.createElement("div", { className: "space-y-2" }, Object.keys(formStates).map((key) => {
+  return /* @__PURE__ */ React7.createElement(React7.Fragment, null, /* @__PURE__ */ React7.createElement("div", { className: "space-y-2" }, Object.keys(formStates).map((key) => {
     const layout = formLayout[key];
-    return /* @__PURE__ */ React6.createElement("div", { key, id: `form-${key}` }, /* @__PURE__ */ React6.createElement(JSONSchemaForm, { formState: formStates[key] }, (layout == null ? void 0 : layout.submitButtonProps) && /* @__PURE__ */ React6.createElement(SubmitButton, { formKey: key, formState: formStates[key], buttonProps: layout.submitButtonProps })));
-  })), (onBatchSubmit || (batchSubmitButtonProps == null ? void 0 : batchSubmitButtonProps.onBatchSubmit)) && /* @__PURE__ */ React6.createElement("div", { className: "w-full flex" }, /* @__PURE__ */ React6.createElement(BatchSubmitButton, { formStates, onSubmit: onBatchSubmit, buttonProps: batchSubmitButtonProps })));
+    return /* @__PURE__ */ React7.createElement("div", { key, id: `form-${key}` }, /* @__PURE__ */ React7.createElement(JSONSchemaForm, { formState: formStates[key] }, (layout == null ? void 0 : layout.submitButtonProps) && /* @__PURE__ */ React7.createElement(SubmitButton, { formKey: key, formState: formStates[key], buttonProps: layout.submitButtonProps })));
+  })), (onBatchSubmit || (batchSubmitButtonProps == null ? void 0 : batchSubmitButtonProps.onBatchSubmit)) && /* @__PURE__ */ React7.createElement("div", { className: "w-full flex" }, /* @__PURE__ */ React7.createElement(BatchSubmitButton, { formStates, onSubmit: onBatchSubmit, buttonProps: batchSubmitButtonProps })));
 };
 var TabLayout = (props) => {
   const { layoutConfig = {}, onBatchSubmit, batchSubmitButtonProps, onReady } = props;
@@ -877,7 +957,7 @@ var TabLayout = (props) => {
       onReady(formStates);
     }
   }, [formStates]);
-  return /* @__PURE__ */ React6.createElement(React6.Fragment, null, /* @__PURE__ */ React6.createElement(
+  return /* @__PURE__ */ React7.createElement(React7.Fragment, null, /* @__PURE__ */ React7.createElement(
     Tabs,
     __spreadProps(__spreadValues({}, $tabsProps), {
       selectedKey: selectedTab,
@@ -887,20 +967,20 @@ var TabLayout = (props) => {
     }),
     formKeys.map((key) => {
       const layout = formLayout[key];
-      return /* @__PURE__ */ React6.createElement(Tab, { id: `form-${key}-tab-menu`, key, title: /* @__PURE__ */ React6.createElement("div", { className: layout == null ? void 0 : layout.titleBoxCss }, (layout == null ? void 0 : layout.title) || key) });
+      return /* @__PURE__ */ React7.createElement(Tab, { id: `form-${key}-tab-menu`, key, title: /* @__PURE__ */ React7.createElement("div", { className: layout == null ? void 0 : layout.titleBoxCss }, (layout == null ? void 0 : layout.title) || key) });
     })
   ), formKeys.map((key) => {
     const layout = formLayout[key];
-    return /* @__PURE__ */ React6.createElement(
+    return /* @__PURE__ */ React7.createElement(
       "div",
       {
         key,
         id: `form-${key}-tab-content`,
         className: cn("mt-4", selectedTab === key ? "" : "hidden")
       },
-      /* @__PURE__ */ React6.createElement(JSONSchemaForm, { formState: formStates[key] }, (layout == null ? void 0 : layout.submitButtonProps) && /* @__PURE__ */ React6.createElement(SubmitButton, { formKey: key, formState: formStates[key], buttonProps: layout.submitButtonProps }))
+      /* @__PURE__ */ React7.createElement(JSONSchemaForm, { formState: formStates[key] }, (layout == null ? void 0 : layout.submitButtonProps) && /* @__PURE__ */ React7.createElement(SubmitButton, { formKey: key, formState: formStates[key], buttonProps: layout.submitButtonProps }), (layout == null ? void 0 : layout.customButtonProps) && /* @__PURE__ */ React7.createElement(CustomButton, { formKey: key, formState: formStates[key], buttonProps: layout.customButtonProps }))
     );
-  }), (onBatchSubmit || (batchSubmitButtonProps == null ? void 0 : batchSubmitButtonProps.onBatchSubmit)) && /* @__PURE__ */ React6.createElement("div", { className: "w-full flex" }, /* @__PURE__ */ React6.createElement(BatchSubmitButton, { formStates, onSubmit: onBatchSubmit, buttonProps: batchSubmitButtonProps })));
+  }), (onBatchSubmit || (batchSubmitButtonProps == null ? void 0 : batchSubmitButtonProps.onBatchSubmit)) && /* @__PURE__ */ React7.createElement("div", { className: "w-full flex" }, /* @__PURE__ */ React7.createElement(BatchSubmitButton, { formStates, onSubmit: onBatchSubmit, buttonProps: batchSubmitButtonProps })));
 };
 
 // components/JSONForm/index.tsx
@@ -914,18 +994,20 @@ var JSONForm = (props) => {
   var _a;
   const type = ((_a = props.layoutConfig) == null ? void 0 : _a.$type) || "SimpleLayout";
   const Component = components[type];
-  return /* @__PURE__ */ React6.createElement(
+  return /* @__PURE__ */ React7.createElement(
     "div",
     { className: props.className },
     // @ts-ignore
-    /* @__PURE__ */ React6.createElement(Component, __spreadValues({}, props))
+    /* @__PURE__ */ React7.createElement(Component, __spreadValues({}, props))
   );
 };
 function TextareaWidget(props) {
+  var _a;
   const { onChange, options, label, value, required, disabled, uiSchema } = props;
-  const { className, nextuiClassNames, labelPlacement = "inside", size = "md", minRows = 3, maxRows = 8, placeholder, color, variant, radius, startContent, endContent, description } = options;
+  const { className, nextuiClassNames, labelPlacement = "inside", size = "md", minRows = 3, maxRows = 8, color, variant, radius, startContent, endContent, description } = options;
   const { requiredErrMsg, validate } = uiSchema;
-  return /* @__PURE__ */ React6.createElement(
+  const placeholder = (_a = uiSchema["ui:options"]) == null ? void 0 : _a.placeholder;
+  return /* @__PURE__ */ React7.createElement(
     Textarea,
     {
       className: cn("w-full", className),
@@ -974,7 +1056,7 @@ function DatePickerWidget({ label, options, value, required, disabled, uiSchema,
       }
     }
   }, [value]);
-  return /* @__PURE__ */ React6.createElement(
+  return /* @__PURE__ */ React7.createElement(
     DatePicker,
     {
       showMonthAndYearPickers: true,
@@ -1039,7 +1121,7 @@ var JSONViewModal = observer(() => {
         }
       });
     }
-    return /* @__PURE__ */ React6.createElement(
+    return /* @__PURE__ */ React7.createElement(
       Modal,
       {
         className: complexFormModal.className,
@@ -1054,7 +1136,7 @@ var JSONViewModal = observer(() => {
           }
         }
       },
-      /* @__PURE__ */ React6.createElement("div", { className: "z-50 fixed top-0 left-0 w-screen h-screen" }, /* @__PURE__ */ React6.createElement(Draggable, { handle: ".draggable-handle" }, /* @__PURE__ */ React6.createElement(ModalContent, null, complexFormModal.title && /* @__PURE__ */ React6.createElement(ModalHeader, { className: "flex flex-col gap-1 draggable-handle cursor-move" }, complexFormModal.title), /* @__PURE__ */ React6.createElement(ModalBody, { className: cn("max-h-[90vh] overflow-auto") }, /* @__PURE__ */ React6.createElement(
+      /* @__PURE__ */ React7.createElement("div", { className: "z-50 fixed top-0 left-0 w-screen h-screen" }, /* @__PURE__ */ React7.createElement(Draggable, { handle: ".draggable-handle" }, /* @__PURE__ */ React7.createElement(ModalContent, null, complexFormModal.title && /* @__PURE__ */ React7.createElement(ModalHeader, { className: "flex flex-col gap-1 draggable-handle cursor-move" }, complexFormModal.title), /* @__PURE__ */ React7.createElement(ModalBody, { className: cn("max-h-[90vh] overflow-auto") }, /* @__PURE__ */ React7.createElement(
         JSONForm,
         {
           formData,
@@ -1077,7 +1159,7 @@ var Provider_default = JSONViewModal;
 var ComplexFormModalStore = class {
   constructor(args) {
     this.sid = "ComplexFormModalStore";
-    this.provider = () => /* @__PURE__ */ React6.createElement(Provider_default, null);
+    this.provider = () => /* @__PURE__ */ React7.createElement(Provider_default, null);
     this.isOpen = false;
     this.title = "";
     this.className = "";
@@ -1136,7 +1218,7 @@ var JSONFormModal = observer(() => {
   if (!form) {
     return null;
   }
-  return /* @__PURE__ */ React6.createElement(
+  return /* @__PURE__ */ React7.createElement(
     Modal,
     {
       className: formModal.className,
@@ -1151,7 +1233,7 @@ var JSONFormModal = observer(() => {
         }
       }
     },
-    /* @__PURE__ */ React6.createElement("div", { className: "z-50 fixed top-0 left-0 w-screen h-screen flex items-center justify-center" }, /* @__PURE__ */ React6.createElement(Draggable, { handle: ".draggable-handle" }, /* @__PURE__ */ React6.createElement(ModalContent, null, formModal.title && /* @__PURE__ */ React6.createElement(ModalHeader, { className: "flex flex-col gap-1 draggable-handle cursor-move" }, formModal.title), /* @__PURE__ */ React6.createElement(ModalBody, { className: "max-h-[90vh] overflow-auto" }, /* @__PURE__ */ React6.createElement(JSONSchemaForm, { formState: form })))))
+    /* @__PURE__ */ React7.createElement("div", { className: "z-50 fixed top-0 left-0 w-screen h-screen flex items-center justify-center" }, /* @__PURE__ */ React7.createElement(Draggable, { handle: ".draggable-handle" }, /* @__PURE__ */ React7.createElement(ModalContent, null, formModal.title && /* @__PURE__ */ React7.createElement(ModalHeader, { className: "flex flex-col gap-1 draggable-handle cursor-move" }, formModal.title), /* @__PURE__ */ React7.createElement(ModalBody, { className: "max-h-[90vh] overflow-auto" }, /* @__PURE__ */ React7.createElement(JSONSchemaForm, { formState: form })))))
   );
 });
 var Provider_default2 = JSONFormModal;
@@ -1160,7 +1242,7 @@ var Provider_default2 = JSONFormModal;
 var FormModalStore = class {
   constructor(args) {
     this.sid = "FormModalStore";
-    this.provider = () => /* @__PURE__ */ React6.createElement(Provider_default2, null);
+    this.provider = () => /* @__PURE__ */ React7.createElement(Provider_default2, null);
     this.isOpen = false;
     this.title = "";
     this.form = null;
@@ -1315,7 +1397,7 @@ var _JSONViewPlugin = class _JSONViewPlugin {
     this.JSONView = {
       Test: {
         name: "Test",
-        render: () => /* @__PURE__ */ React6.createElement("div", null, "Test")
+        render: () => /* @__PURE__ */ React7.createElement("div", null, "Test")
       }
     };
   }
@@ -1333,7 +1415,7 @@ var _JSONViewPlugin = class _JSONViewPlugin {
 };
 _JSONViewPlugin.JSONView = (props) => {
   const jsonviewplugin = RootStore.Get(_JSONViewPlugin);
-  return /* @__PURE__ */ React6.createElement(React6.Fragment, null, Object.keys(props.uiConfigs).map((key) => {
+  return /* @__PURE__ */ React7.createElement(React7.Fragment, null, Object.keys(props.uiConfigs).map((key) => {
     const config = props.uiConfigs[key];
     const data = _.get(props.datas, key);
     const Component = jsonviewplugin.JSONView[config.type].render;
@@ -1345,11 +1427,11 @@ _JSONViewPlugin.JSONView = (props) => {
         });
       }
     });
-    return /* @__PURE__ */ React6.createElement(Component, { key, data, uiConfig: config });
+    return /* @__PURE__ */ React7.createElement(Component, { key, data, uiConfig: config });
   }));
 };
 var JSONViewPlugin = _JSONViewPlugin;
 
-export { CheckboxWidget, ComplexFormModalStore, DatePickerWidget, EditorWidget, FormModalStore, InputWidget, JSONForm, JSONSchemaForm, JSONViewPlugin, SelectWidget, TextareaWidget, getComplexFormData, getFormData, getFormState2 as getFormState, getSimpleFormData };
+export { CheckboxWidget, ComplexFormModalStore, DatePickerWidget, EditorWidget, FormModalStore, InputWidget, JSONForm, JSONSchemaForm, JSONViewPlugin, MultipleSelectWidget, SelectWidget, TextareaWidget, getComplexFormData, getFormData, getFormState2 as getFormState, getSimpleFormData };
 //# sourceMappingURL=out.js.map
 //# sourceMappingURL=form.mjs.map