@dappworks/kit 0.4.123 → 0.4.125

package/dist/form.mjs

@@ -1,10 +1,10 @@
-import { useStore } from './chunk-WS43BV7Y.mjs';
-import { RootStore } from './chunk-XJMRAPHI.mjs';
+import { useStore } from './chunk-DZMNL4BZ.mjs';
+import { RootStore } from './chunk-HRWHDF2F.mjs';
 import { helper } from './chunk-Q3AD5RHQ.mjs';
 import { _ } from './chunk-MGU3KYGC.mjs';
-import { cn } from './chunk-AIZ7XDNV.mjs';
-import { __objRest, __spreadValues, __spreadProps } from './chunk-R4SQKVDQ.mjs';
-import React7, { useEffect, useMemo, useState, useCallback, useRef, createRef } from 'react';
+import { cn } from './chunk-WYGQ3Y4R.mjs';
+import { __objRest, __spreadValues, __spreadProps } from './chunk-6F7H4PAA.mjs';
+import React7, { useEffect, useMemo, useState, useRef, useCallback, 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';
@@ -25,7 +25,16 @@ function CheckboxWidget({
   disabled,
   uiSchema
 }) {
-  const { className, nextuiClassNames = {}, size = "sm", color = "primary", description, descriptionClassName } = options;
+  const {
+    className,
+    nextuiClassNames = {
+      base: "m-0 flex items-center justify-start w-full cursor-pointer rounded-lg gap-2 p-[13px] bg-transparent border dark:border-[#2c2c2c]"
+    },
+    size = "sm",
+    color = "primary",
+    description,
+    descriptionClassName
+  } = options;
   const { validate } = uiSchema;
   const [errMsg, setErrMsg] = useState("");
   const isInvalid = !!errMsg;
@@ -33,9 +42,7 @@ function CheckboxWidget({
     Checkbox,
     {
       className: cn("w-full", className),
-      classNames: __spreadProps(__spreadValues({}, nextuiClassNames), {
-        base: cn("m-0 flex items-center justify-start w-full", "cursor-pointer rounded-lg gap-2 p-[13px] bg-content2 border-1 border-transparent", nextuiClassNames.base, value ? `border-${color}` : "")
-      }),
+      classNames: nextuiClassNames,
       defaultSelected: value,
       isDisabled: disabled,
       icon: /* @__PURE__ */ React7.createElement(Check, { className: "bg-white dark:bg-black" }),
@@ -60,9 +67,24 @@ function CheckboxWidget({
 function InputWidget(props) {
   var _a;
   const { onChange, options, label, value, required, disabled, uiSchema } = props;
-  const { className, nextuiClassNames, labelPlacement = "inside", size = "sm", inputType = "text", color, variant, radius, startContent, endContent, description } = options;
+  const {
+    className,
+    nextuiClassNames = {
+      inputWrapper: "rounded-lg shadow-none border dark:border-[#2c2c2c] !bg-transparent data-[hover=true]:!bg-default-50 group-data-[focus=true]:!bg-transparent"
+    },
+    labelPlacement = "inside",
+    size = "sm",
+    inputType = "text",
+    color,
+    variant,
+    radius,
+    startContent,
+    endContent,
+    description
+  } = options;
   const { requiredErrMsg, validate } = uiSchema;
   const placeholder = (_a = uiSchema["ui:options"]) == null ? void 0 : _a.placeholder;
+  const isFirstChecked = useRef(true);
   return /* @__PURE__ */ React7.createElement(
     Input,
     {
@@ -84,6 +106,10 @@ function InputWidget(props) {
       endContent,
       onChange: (e) => onChange(e.target.value),
       validate: () => {
+        if (isFirstChecked.current) {
+          isFirstChecked.current = false;
+          return true;
+        }
         if (value === "" && required) {
           return requiredErrMsg || "This field is required";
         }
@@ -102,7 +128,8 @@ function SelectWidget(props) {
   const {
     className,
     nextuiClassNames = {
-      popoverContent: "rounded-lg shadow-md border dark:border-[#3e3e3e]"
+      trigger: "rounded-lg bg-transparent shadow-none border dark:border-[#2c2c2c] data-[hover=true]:bg-default-50",
+      popoverContent: "rounded-lg shadow-md border border-[#F4F4F5] dark:border-[#3e3e3e]"
     },
     listboxProps = {
       itemClasses: {
@@ -175,7 +202,20 @@ function MultipleSelectWidget(props) {
   var _a;
   const { onChange, options, label, value, required, uiSchema = {} } = props;
   const { selectOptions = [], requiredErrMsg, validate } = uiSchema;
-  const { className, nextuiClassNames = {}, labelPlacement = "inside", listboxProps = {}, size = "sm", color, description, renderValue = DefaultRenderValue } = options;
+  const {
+    className,
+    nextuiClassNames = {
+      base: "w-full",
+      trigger: "min-h-12 py-1 rounded-lg bg-transparent shadow-none border dark:border-[#2c2c2c] data-[hover=true]:bg-default-50",
+      popoverContent: "rounded-lg shadow-md border dark:border-[#3e3e3e]"
+    },
+    labelPlacement = "inside",
+    listboxProps = {},
+    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(",") : [];
@@ -215,11 +255,7 @@ function MultipleSelectWidget(props) {
         checkValue(_v);
       },
       items: selectOptions,
-      classNames: __spreadValues({
-        base: "w-full",
-        trigger: "min-h-12 py-1",
-        popoverContent: "rounded-lg shadow-md border dark:border-[#3e3e3e]"
-      }, nextuiClassNames),
+      classNames: nextuiClassNames,
       listboxProps: __spreadValues({
         itemClasses: {
           base: [
@@ -289,7 +325,7 @@ var EditorWidget = ({ label, options = {}, value, required, uiSchema, disabled,
     languageSelectorOptions.map((item) => {
       return /* @__PURE__ */ React7.createElement("option", { key: item.value, value: item.value }, item.label);
     })
-  )), description && /* @__PURE__ */ React7.createElement("div", { className: cn("mb-2 text-xs text-[#A1A1A9] dark:text-[#717179]", descriptionClassName) }, description), /* @__PURE__ */ React7.createElement("div", { className: cn("rounded-lg overflow-hidden relative", editorBoxClassName) }, /* @__PURE__ */ React7.createElement(
+  )), description && /* @__PURE__ */ React7.createElement("div", { className: cn("mb-2 text-xs text-[#A1A1A9] dark:text-[#717179]", descriptionClassName) }, description), /* @__PURE__ */ React7.createElement("div", { className: cn("rounded-lg overflow-hidden relative border dark:border-[#2c2c2c]", editorBoxClassName) }, /* @__PURE__ */ React7.createElement(
     MonacoEditor,
     {
       options: { readOnly: readOnly || disabled, minimap: { enabled: false } },
@@ -307,6 +343,15 @@ var EditorWidget = ({ label, options = {}, value, required, uiSchema, disabled,
           const json = helper.json.safeParse(value);
           editor.setValue(JSON.stringify(json, null, jsonStrSpace));
         }
+        monaco.editor.defineTheme("myCustomTheme", {
+          base: "vs-dark",
+          inherit: true,
+          rules: [],
+          colors: {
+            "editor.background": "#09090B"
+          }
+        });
+        monaco.editor.setTheme("myCustomTheme");
       }
     }
   )), isInvalid && /* @__PURE__ */ React7.createElement("div", { className: cn("mt-2 text-xs text-[#DF3562]", errMsgClassName) }, errMsg), onRun && /* @__PURE__ */ React7.createElement(
@@ -893,11 +938,11 @@ var CollapsibleBox = ({ formKey, title, titleBoxCss, formState, submitButtonProp
   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",
+      className: "mt-5 mb-[10px] flex justify-between items-center cursor-pointer border-t-[1px solid #E5E5EA] py-[5px]",
       onClick: () => setOpened((o) => !o)
     },
     /* @__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)
+    opened ? /* @__PURE__ */ React7.createElement(ChevronUp, { size: 18, className: "text-[#717179] dark:text-[#A1A1A9]" }) : /* @__PURE__ */ React7.createElement(ChevronDown, { size: 18, className: "text-[#717179] dark:text-[#A1A1A9]" })
   ), /* @__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) => {
@@ -1006,9 +1051,25 @@ var JSONForm = (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, color, variant, radius, startContent, endContent, description } = options;
+  const {
+    className,
+    nextuiClassNames = {
+      inputWrapper: "rounded-lg shadow-none border dark:border-[#2c2c2c] !bg-transparent data-[hover=true]:!bg-default-50 group-data-[focus=true]:!bg-transparent"
+    },
+    labelPlacement = "inside",
+    size = "md",
+    minRows = 3,
+    maxRows = 8,
+    color,
+    variant,
+    radius,
+    startContent,
+    endContent,
+    description
+  } = options;
   const { requiredErrMsg, validate } = uiSchema;
   const placeholder = (_a = uiSchema["ui:options"]) == null ? void 0 : _a.placeholder;
+  const isFirstChecked = useRef(true);
   return /* @__PURE__ */ React7.createElement(
     Textarea,
     {
@@ -1031,6 +1092,10 @@ function TextareaWidget(props) {
       endContent,
       onChange: (e) => onChange(e.target.value),
       validate: () => {
+        if (isFirstChecked.current) {
+          isFirstChecked.current = false;
+          return true;
+        }
         if (value === "" && required) {
           return requiredErrMsg || "This field is required";
         }
@@ -1044,9 +1109,22 @@ function TextareaWidget(props) {
   );
 }
 function DatePickerWidget({ label, options, value, required, disabled, uiSchema, onChange }) {
-  const { className, nextuiClassNames = { calendarContent: "min-w-fit" }, dateInputClassNames, labelPlacement = "inside", size = "sm", granularity = "day", color = "default", description } = options;
+  const {
+    className,
+    nextuiClassNames = { calendarContent: "min-w-fit" },
+    dateInputClassNames = {
+      inputWrapper: "rounded-lg bg-transparent border dark:border-[#2c2c2c] hover:bg-default-50"
+    },
+    labelPlacement = "inside",
+    size = "sm",
+    granularity = "day",
+    color = "default",
+    description,
+    variant
+  } = options;
   const [date, setDate] = useState();
   const { requiredErrMsg, validate } = uiSchema;
+  const isFirstChecked = useRef(true);
   useEffect(() => {
     if (value) {
       try {
@@ -1070,6 +1148,7 @@ function DatePickerWidget({ label, options, value, required, disabled, uiSchema,
       labelPlacement,
       color,
       granularity,
+      variant,
       value: date,
       isRequired: required,
       description: description || "",
@@ -1081,6 +1160,10 @@ function DatePickerWidget({ label, options, value, required, disabled, uiSchema,
         }
       },
       validate: () => {
+        if (isFirstChecked.current) {
+          isFirstChecked.current = false;
+          return true;
+        }
         if (value === "" && required) {
           return requiredErrMsg || "This field is required";
         }
@@ -1166,6 +1249,9 @@ var ComplexFormModalStore = class {
     this.isOpen = false;
     this.title = "";
     this.className = "";
+    this.classNames = {
+      base: "dark:bg-[#09090B] border dark:border-[#2c2c2c] rounded-lg shadow-md"
+    };
     this.modalSize = "md";
     this.scrollBehavior = "normal";
     this.isDismissable = true;
@@ -1183,7 +1269,9 @@ var ComplexFormModalStore = class {
     this.formConfig = void 0;
     this.layoutConfig = void 0;
     this.className = "";
-    this.classNames = void 0;
+    this.classNames = {
+      base: "dark:bg-[#09090B] border dark:border-[#2c2c2c] rounded-lg shadow-md"
+    };
     this.modalSize = "md";
     this.scrollBehavior = "normal";
     this.isDismissable = true;
@@ -1250,6 +1338,9 @@ var FormModalStore = class {
     this.title = "";
     this.form = null;
     this.className = "";
+    this.classNames = {
+      base: "dark:bg-[#09090B] border dark:border-[#2c2c2c] rounded-lg shadow-md"
+    };
     this.modalSize = "md";
     this.scrollBehavior = "normal";
     this.closeOnOverlayClick = false;
@@ -1265,7 +1356,9 @@ var FormModalStore = class {
     this.title = "";
     this.form = null;
     this.className = "";
-    this.classNames = void 0;
+    this.classNames = {
+      base: "dark:bg-[#09090B] border dark:border-[#2c2c2c] rounded-lg shadow-md"
+    };
     this.modalSize = "md";
     this.scrollBehavior = "normal";
     this.closeOnOverlayClick = false;