@dappworks/kit 0.4.129 → 0.4.130

package/dist/chunk-5SFAINN6.mjs

@@ -0,0 +1,104 @@
+import { _ } from './chunk-MGU3KYGC.mjs';
+
+// themes/default.json
+var default_default = {
+  Modal: {
+    classNames: {
+      base: ""
+    }
+  },
+  InputWidget: {
+    classNames: {
+      inputWrapper: ""
+    }
+  },
+  TextareaWidget: {
+    classNames: {
+      inputWrapper: ""
+    }
+  },
+  DatePickerWidget: {
+    dateInputClassNames: {
+      inputWrapper: ""
+    }
+  },
+  SelectWidget: {
+    classNames: {
+      popoverContent: "rounded-lg shadow-md border dark:border-[#3e3e3e]"
+    }
+  },
+  MultipleSelectWidget: {
+    classNames: {
+      base: "w-full",
+      trigger: "min-h-12 py-1",
+      popoverContent: "rounded-lg shadow-md border dark:border-[#3e3e3e]"
+    }
+  },
+  CheckboxWidget: {
+    classNames: {
+      base: "m-0 flex items-center justify-start w-full cursor-pointer rounded-lg gap-2 p-[13px] bg-content2"
+    }
+  },
+  Card: {
+    className: ""
+  }
+};
+
+// themes/primary.json
+var primary_default = {
+  Modal: {
+    classNames: {
+      base: "dark:bg-[#09090B] border dark:border-[#2c2c2c] rounded-lg shadow-md"
+    }
+  },
+  InputWidget: {
+    classNames: {
+      inputWrapper: "rounded-lg shadow-none border dark:border-[#2c2c2c] !bg-transparent data-[hover=true]:!bg-default-50 group-data-[focus=true]:!bg-transparent"
+    }
+  },
+  TextareaWidget: {
+    classNames: {
+      inputWrapper: "rounded-lg shadow-none border dark:border-[#2c2c2c] !bg-transparent data-[hover=true]:!bg-default-50 group-data-[focus=true]:!bg-transparent"
+    }
+  },
+  DatePickerWidget: {
+    dateInputClassNames: {
+      inputWrapper: "rounded-lg bg-transparent border dark:border-[#2c2c2c] hover:bg-default-50"
+    }
+  },
+  SelectWidget: {
+    classNames: {
+      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]"
+    }
+  },
+  MultipleSelectWidget: {
+    classNames: {
+      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]"
+    }
+  },
+  CheckboxWidget: {
+    classNames: {
+      base: "m-0 flex items-center justify-start w-full cursor-pointer rounded-lg gap-2 p-[13px] bg-transparent border dark:border-[#2c2c2c]"
+    }
+  },
+  Card: {
+    className: "dark:bg-[#09090B]"
+  }
+};
+
+// themes/index.ts
+var getStyle = (theme, key) => {
+  switch (theme) {
+    case "default":
+      return _.get(default_default, key);
+    case "primary":
+      return _.get(primary_default, key);
+  }
+};
+
+export { getStyle };
+//# sourceMappingURL=out.js.map
+//# sourceMappingURL=chunk-5SFAINN6.mjs.map

package/dist/chunk-5SFAINN6.mjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../themes/default.json","../themes/primary.json","../themes/index.ts"],"names":[],"mappings":";;;;;AAAA;AAAA,EACE,OAAS;AAAA,IACP,YAAc;AAAA,MACZ,MAAQ;AAAA,IACV;AAAA,EACF;AAAA,EACA,aAAe;AAAA,IACb,YAAc;AAAA,MACZ,cAAgB;AAAA,IAClB;AAAA,EACF;AAAA,EACA,gBAAkB;AAAA,IAChB,YAAc;AAAA,MACZ,cAAgB;AAAA,IAClB;AAAA,EACF;AAAA,EACA,kBAAoB;AAAA,IAClB,qBAAuB;AAAA,MACrB,cAAgB;AAAA,IAClB;AAAA,EACF;AAAA,EACA,cAAgB;AAAA,IACd,YAAc;AAAA,MACZ,gBAAkB;AAAA,IACpB;AAAA,EACF;AAAA,EACA,sBAAwB;AAAA,IACtB,YAAc;AAAA,MACZ,MAAQ;AAAA,MACR,SAAW;AAAA,MACX,gBAAkB;AAAA,IACpB;AAAA,EACF;AAAA,EACA,gBAAkB;AAAA,IAChB,YAAc;AAAA,MACZ,MAAQ;AAAA,IACV;AAAA,EACF;AAAA,EACA,MAAQ;AAAA,IACN,WAAa;AAAA,EACf;AACF;;;ACzCA;AAAA,EACE,OAAS;AAAA,IACP,YAAc;AAAA,MACZ,MAAQ;AAAA,IACV;AAAA,EACF;AAAA,EACA,aAAe;AAAA,IACb,YAAc;AAAA,MACZ,cAAgB;AAAA,IAClB;AAAA,EACF;AAAA,EACA,gBAAkB;AAAA,IAChB,YAAc;AAAA,MACZ,cAAgB;AAAA,IAClB;AAAA,EACF;AAAA,EACA,kBAAoB;AAAA,IAClB,qBAAuB;AAAA,MACrB,cAAgB;AAAA,IAClB;AAAA,EACF;AAAA,EACA,cAAgB;AAAA,IACd,YAAc;AAAA,MACZ,SAAW;AAAA,MACX,gBAAkB;AAAA,IACpB;AAAA,EACF;AAAA,EACA,sBAAwB;AAAA,IACtB,YAAc;AAAA,MACZ,MAAQ;AAAA,MACR,SAAW;AAAA,MACX,gBAAkB;AAAA,IACpB;AAAA,EACF;AAAA,EACA,gBAAkB;AAAA,IAChB,YAAc;AAAA,MACZ,MAAQ;AAAA,IACV;AAAA,EACF;AAAA,EACA,MAAQ;AAAA,IACN,WAAa;AAAA,EACf;AACF;;;ACpCO,IAAM,WAAW,CAAC,OAAkB,QAAgB;AACzD,UAAQ,OAAO;AAAA,IACb,KAAK;AACH,aAAO,EAAE,IAAI,iBAAc,GAAG;AAAA,IAChC,KAAK;AACH,aAAO,EAAE,IAAI,iBAAc,GAAG;AAAA,EAClC;AACF","sourcesContent":["{\n  \"Modal\": {\n    \"classNames\": {\n      \"base\": \"\"\n    }\n  },\n  \"InputWidget\": {\n    \"classNames\": {\n      \"inputWrapper\": \"\"\n    }\n  },\n  \"TextareaWidget\": {\n    \"classNames\": {\n      \"inputWrapper\": \"\"\n    }\n  },\n  \"DatePickerWidget\": {\n    \"dateInputClassNames\": {\n      \"inputWrapper\": \"\"\n    }\n  },\n  \"SelectWidget\": {\n    \"classNames\": {\n      \"popoverContent\": \"rounded-lg shadow-md border dark:border-[#3e3e3e]\"\n    }\n  },\n  \"MultipleSelectWidget\": {\n    \"classNames\": {\n      \"base\": \"w-full\",\n      \"trigger\": \"min-h-12 py-1\",\n      \"popoverContent\": \"rounded-lg shadow-md border dark:border-[#3e3e3e]\"\n    }\n  },\n  \"CheckboxWidget\": {\n    \"classNames\": {\n      \"base\": \"m-0 flex items-center justify-start w-full cursor-pointer rounded-lg gap-2 p-[13px] bg-content2\"\n    }\n  },\n  \"Card\": {\n    \"className\": \"\"\n  }\n}\n","{\n  \"Modal\": {\n    \"classNames\": {\n      \"base\": \"dark:bg-[#09090B] border dark:border-[#2c2c2c] rounded-lg shadow-md\"\n    }\n  },\n  \"InputWidget\": {\n    \"classNames\": {\n      \"inputWrapper\": \"rounded-lg shadow-none border dark:border-[#2c2c2c] !bg-transparent data-[hover=true]:!bg-default-50 group-data-[focus=true]:!bg-transparent\"\n    }\n  },\n  \"TextareaWidget\": {\n    \"classNames\": {\n      \"inputWrapper\": \"rounded-lg shadow-none border dark:border-[#2c2c2c] !bg-transparent data-[hover=true]:!bg-default-50 group-data-[focus=true]:!bg-transparent\"\n    }\n  },\n  \"DatePickerWidget\": {\n    \"dateInputClassNames\": {\n      \"inputWrapper\": \"rounded-lg bg-transparent border dark:border-[#2c2c2c] hover:bg-default-50\"\n    }\n  },\n  \"SelectWidget\": {\n    \"classNames\": {\n      \"trigger\": \"rounded-lg bg-transparent shadow-none border dark:border-[#2c2c2c] data-[hover=true]:bg-default-50\",\n      \"popoverContent\": \"rounded-lg shadow-md border border-[#F4F4F5] dark:border-[#3e3e3e]\"\n    }\n  },\n  \"MultipleSelectWidget\": {\n    \"classNames\": {\n      \"base\": \"w-full\",\n      \"trigger\": \"min-h-12 py-1 rounded-lg bg-transparent shadow-none border dark:border-[#2c2c2c] data-[hover=true]:bg-default-50\",\n      \"popoverContent\": \"rounded-lg shadow-md border dark:border-[#3e3e3e]\"\n    }\n  },\n  \"CheckboxWidget\": {\n    \"classNames\": {\n      \"base\": \"m-0 flex items-center justify-start w-full cursor-pointer rounded-lg gap-2 p-[13px] bg-transparent border dark:border-[#2c2c2c]\"\n    }\n  },\n  \"Card\": {\n    \"className\": \"dark:bg-[#09090B]\"\n  }\n}\n","import { _ } from \"../lib/lodash\";\nimport defaultTheme from \"./default.json\";\nimport primaryTheme from \"./primary.json\";\n\nexport type ThemeType = \"default\" | \"primary\";\n\nexport const getStyle = (theme: ThemeType, key: string) => {\n  switch (theme) {\n    case \"default\":\n      return _.get(defaultTheme, key);\n    case \"primary\":\n      return _.get(primaryTheme, key);\n  }\n};\n"]}

package/dist/form.d.mts

@@ -3,6 +3,7 @@ import { ButtonProps, TabsProps, CheckboxProps, SlotsToClasses, InputSlots, Inpu
 import { UiSchema, RJSFSchema, WidgetProps, Widget } from '@rjsf/utils';
 import * as _rjsf_validator_ajv8_lib_validator from '@rjsf/validator-ajv8/lib/validator';
 import Form, { IChangeEvent } from '@rjsf/core';
+import { T as ThemeType } from './index-38be834f.js';
 import { EditorProps } from '@monaco-editor/react';
 import { S as Store, R as RootStore } from './root-766ae985.js';
 import EventEmitter from 'events';
@@ -115,6 +116,7 @@ type FormKey<T = FormDataType> = keyof T;
 type FormDataOfKey<T = FormDataType> = T[FormKey<T>];
 type JSONFormProps<T = FormDataType> = {
     className?: string;
+    theme?: ThemeType;
     formData: T;
     formConfig?: FormConfigType<T>;
     layoutConfig?: LayoutConfigType<T, LayoutType>;
@@ -304,6 +306,7 @@ declare class ComplexFormModalStore<T extends FormDataType> implements Store {
     layoutConfig?: LayoutConfigType<T, LayoutType>;
     className: string;
     classNames?: SlotsToClasses<ModalSlots>;
+    theme: ThemeType;
     modalSize: 'sm' | 'md' | 'lg' | 'xl' | '2xl' | 'full' | 'xs' | '3xl' | '4xl' | '5xl';
     scrollBehavior?: 'normal' | 'inside' | 'outside';
     isDismissable: boolean;
@@ -333,6 +336,7 @@ declare class FormModalStore<T = {
     form: JSONSchemaFormState<T>;
     className: string;
     classNames?: SlotsToClasses<ModalSlots>;
+    theme: ThemeType;
     modalSize: 'sm' | 'md' | 'lg' | 'xl' | '2xl' | 'full' | 'xs' | '3xl' | '4xl' | '5xl';
     scrollBehavior?: 'normal' | 'inside' | 'outside';
     closeOnOverlayClick: boolean;
@@ -345,17 +349,18 @@ declare class FormModalStore<T = {
 declare function getFormData<T = {
     [key: string]: any;
 }>(v: Partial<FormModalStore>): Promise<T>;
-declare function getFormState<T>({ data, metadata, onSet, onSubmit, }: {
+declare function getFormState<T>({ data, metadata, onSet, onSubmit, theme, }: {
     data: T;
     metadata?: {
         [key: string]: any;
     } & Partial<JSONSchemaFormState<any>>;
     onSet?: (v: T, form: JSONSchemaFormState<T, UiSchema>) => T;
     onSubmit?: (data: T) => void;
+    theme: ThemeType;
 }): JSONSchemaFormState<T, UiSchema>;
 declare function getSimpleFormData<T>(data: T, metadata: {
     [key: string]: any;
-} & Partial<JSONSchemaFormState<any>>, config: Partial<FormModalStore>, onSet?: (v: T, form: JSONSchemaFormState<T, UiSchema>) => T): Promise<T>;
+} & Partial<JSONSchemaFormState<any>>, config: Partial<FormModalStore>, onSet?: (v: T, form: JSONSchemaFormState<T, UiSchema>) => T, theme?: ThemeType): Promise<T>;
 
 type JSONViewType = {
     className?: string;

package/dist/form.mjs

@@ -1,3 +1,4 @@
+import { getStyle } from './chunk-5SFAINN6.mjs';
 import { useStore } from './chunk-DZMNL4BZ.mjs';
 import { RootStore } from './chunk-HRWHDF2F.mjs';
 import { helper } from './chunk-Q3AD5RHQ.mjs';
@@ -27,22 +28,24 @@ function CheckboxWidget({
 }) {
   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]"
-    },
+    nextuiClassNames,
     size = "sm",
     color = "primary",
     description,
     descriptionClassName
   } = options;
-  const { validate } = uiSchema;
+  const { validate, theme } = uiSchema;
   const [errMsg, setErrMsg] = useState("");
   const isInvalid = !!errMsg;
+  const classNames = useMemo(() => {
+    const themeStyle = getStyle(theme || "default", "CheckboxWidget");
+    return __spreadValues(__spreadValues({}, themeStyle.classNames), nextuiClassNames);
+  }, [theme, nextuiClassNames]);
   return /* @__PURE__ */ React7.createElement(React7.Fragment, null, /* @__PURE__ */ React7.createElement(
     Checkbox,
     {
       className: cn("w-full", className),
-      classNames: nextuiClassNames,
+      classNames,
       defaultSelected: value,
       isDisabled: disabled,
       icon: /* @__PURE__ */ React7.createElement(Check, { className: "bg-white dark:bg-black" }),
@@ -69,9 +72,7 @@ function InputWidget(props) {
   const { onChange, options, label, value, required, disabled, uiSchema } = props;
   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"
-    },
+    nextuiClassNames,
     labelPlacement = "inside",
     size = "sm",
     inputType = "text",
@@ -82,14 +83,18 @@ function InputWidget(props) {
     endContent,
     description
   } = options;
-  const { requiredErrMsg, validate } = uiSchema;
+  const { requiredErrMsg, validate, theme } = uiSchema;
   const placeholder = (_a = uiSchema["ui:options"]) == null ? void 0 : _a.placeholder;
   const isFirstChecked = useRef(true);
+  const classNames = useMemo(() => {
+    const themeStyle = getStyle(theme || "default", "InputWidget");
+    return __spreadValues(__spreadValues({}, themeStyle.classNames), nextuiClassNames);
+  }, [theme, nextuiClassNames]);
   return /* @__PURE__ */ React7.createElement(
     Input,
     {
       className: cn("w-full", className),
-      classNames: nextuiClassNames,
+      classNames,
       label,
       placeholder,
       value,
@@ -127,10 +132,7 @@ function SelectWidget(props) {
   const { onChange, options, label, value, required, disabled, uiSchema } = props;
   const {
     className,
-    nextuiClassNames = {
-      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]"
-    },
+    nextuiClassNames,
     listboxProps = {
       itemClasses: {
         base: [
@@ -153,8 +155,12 @@ function SelectWidget(props) {
     radius,
     description
   } = options;
-  const { selectOptions = [], requiredErrMsg, validate } = uiSchema;
+  const { selectOptions = [], requiredErrMsg, validate, theme } = uiSchema;
   const placeholder = (_a = uiSchema["ui:options"]) == null ? void 0 : _a.placeholder;
+  const classNames = useMemo(() => {
+    const themeStyle = getStyle(theme || "default", "MultipleSelectWidget");
+    return __spreadValues(__spreadValues({}, themeStyle.classNames), nextuiClassNames);
+  }, [theme, nextuiClassNames]);
   const [errMsg, setErrMsg] = useState("");
   const isInvalid = !!errMsg;
   const checkValue = useCallback((value2) => {
@@ -174,7 +180,7 @@ function SelectWidget(props) {
     {
       label: label == null ? void 0 : label.trim(),
       className: cn("w-full", className),
-      classNames: nextuiClassNames,
+      classNames,
       labelPlacement,
       placeholder,
       size,
@@ -201,14 +207,10 @@ function SelectWidget(props) {
 function MultipleSelectWidget(props) {
   var _a;
   const { onChange, options, label, value, required, uiSchema = {} } = props;
-  const { selectOptions = [], requiredErrMsg, validate } = uiSchema;
+  const { selectOptions = [], requiredErrMsg, validate, theme } = uiSchema;
   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]"
-    },
+    nextuiClassNames,
     labelPlacement = "inside",
     listboxProps = {},
     size = "sm",
@@ -220,6 +222,10 @@ function MultipleSelectWidget(props) {
   const selectedKeys = useMemo(() => {
     return value ? value.split(",") : [];
   }, [value]);
+  const classNames = useMemo(() => {
+    const themeStyle = getStyle(theme || "default", "MultipleSelectWidget");
+    return __spreadValues(__spreadValues({}, themeStyle.classNames), nextuiClassNames);
+  }, [theme, nextuiClassNames]);
   const [errMsg, setErrMsg] = useState("");
   const isInvalid = !!errMsg;
   const checkValue = useCallback((value2) => {
@@ -255,7 +261,7 @@ function MultipleSelectWidget(props) {
         checkValue(_v);
       },
       items: selectOptions,
-      classNames: nextuiClassNames,
+      classNames,
       listboxProps: __spreadValues({
         itemClasses: {
           base: [
@@ -456,7 +462,7 @@ var JSONValue = class extends JSONSchemaValue {
 };
 
 // components/JSONForm/Layouts/format.tsx
-var getFormState = (props, formLayout = {}) => {
+var getFormState = (props, formLayout = {}, theme = "default") => {
   const { formData, formConfig, onSet, onChange } = props;
   const formStates = {};
   Object.keys(formData).forEach((key) => {
@@ -514,6 +520,7 @@ var getFormState = (props, formLayout = {}) => {
         value[k] = JSON.stringify(v, null, 2);
         formConfigData[k]["ui:widget"] = EditorWidget;
       }
+      formConfigData[k]["theme"] = theme;
       return p;
     }, {});
     const schema = {
@@ -919,9 +926,10 @@ var grid_default = Grid;
 
 // components/JSONForm/Layouts/gridLayout.tsx
 var GridLayout = (props) => {
-  const { layoutConfig, onBatchSubmit, batchSubmitButtonProps, onReady } = props;
+  const { layoutConfig, onBatchSubmit, batchSubmitButtonProps, onReady, theme } = props;
   const _a = layoutConfig, { $type, $gridColumn } = _a, formLayout = __objRest(_a, ["$type", "$gridColumn"]);
-  const formStates = getFormState(props, formLayout);
+  const formStates = getFormState(props, formLayout, theme);
+  const cardStyle = getStyle(theme || "default", "Card");
   useEffect(() => {
     if (formStates && onReady) {
       onReady(formStates);
@@ -930,7 +938,7 @@ var GridLayout = (props) => {
   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__ */ 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] dark:bg-[#09090B]", 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 }))));
+    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]", cardStyle.className, 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 }) => {
@@ -946,9 +954,9 @@ var CollapsibleBox = ({ formKey, title, titleBoxCss, formState, submitButtonProp
   ), /* @__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;
+  const { layoutConfig = {}, onBatchSubmit, batchSubmitButtonProps, onReady, theme } = props;
   const _a = layoutConfig, formLayout = __objRest(_a, ["$type"]);
-  const formStates = getFormState(props, formLayout);
+  const formStates = getFormState(props, formLayout, theme);
   useEffect(() => {
     if (formStates && onReady) {
       onReady(formStates);
@@ -972,9 +980,9 @@ var ListLayout = (props) => {
   }), (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;
+  const { layoutConfig = {}, onBatchSubmit, batchSubmitButtonProps, onReady, theme } = props;
   const _a = layoutConfig, formLayout = __objRest(_a, ["$type"]);
-  const formStates = getFormState(props, formLayout);
+  const formStates = getFormState(props, formLayout, theme);
   useEffect(() => {
     if (formStates && onReady) {
       onReady(formStates);
@@ -986,7 +994,7 @@ var SimpleLayout = (props) => {
   })), (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;
+  const { layoutConfig = {}, onBatchSubmit, batchSubmitButtonProps, onReady, theme } = props;
   const _a = layoutConfig, {
     $type,
     $tabsProps = {
@@ -996,7 +1004,7 @@ var TabLayout = (props) => {
     "$type",
     "$tabsProps"
   ]);
-  const formStates = useMemo(() => getFormState(props, formLayout), [props.formData, props.formConfig, props.layoutConfig]);
+  const formStates = useMemo(() => getFormState(props, formLayout, theme), [props.formData, props.formConfig, props.layoutConfig]);
   const formKeys = Object.keys(formStates);
   const [selectedTab, setSelectedTab] = useState(formKeys[0] || "");
   useEffect(() => {
@@ -1067,14 +1075,18 @@ function TextareaWidget(props) {
     endContent,
     description
   } = options;
-  const { requiredErrMsg, validate } = uiSchema;
+  const { requiredErrMsg, validate, theme } = uiSchema;
   const placeholder = (_a = uiSchema["ui:options"]) == null ? void 0 : _a.placeholder;
   const isFirstChecked = useRef(true);
+  const classNames = useMemo(() => {
+    const themeStyle = getStyle(theme || "default", "InputWidget");
+    return __spreadValues(__spreadValues({}, themeStyle.classNames), nextuiClassNames);
+  }, [theme, nextuiClassNames]);
   return /* @__PURE__ */ React7.createElement(
     Textarea,
     {
       className: cn("w-full", className),
-      classNames: nextuiClassNames,
+      classNames,
       label,
       placeholder,
       value,
@@ -1112,9 +1124,7 @@ function DatePickerWidget({ label, options, value, required, disabled, uiSchema,
   const {
     className,
     nextuiClassNames = { calendarContent: "min-w-fit" },
-    dateInputClassNames = {
-      inputWrapper: "rounded-lg bg-transparent border dark:border-[#2c2c2c] hover:bg-default-50"
-    },
+    dateInputClassNames,
     labelPlacement = "inside",
     size = "sm",
     granularity = "day",
@@ -1123,8 +1133,12 @@ function DatePickerWidget({ label, options, value, required, disabled, uiSchema,
     variant
   } = options;
   const [date, setDate] = useState();
-  const { requiredErrMsg, validate } = uiSchema;
+  const { requiredErrMsg, validate, theme } = uiSchema;
   const isFirstChecked = useRef(true);
+  const dateInputStyle = useMemo(() => {
+    const themeStyle = getStyle(theme || "default", "DatePickerWidget");
+    return __spreadValues(__spreadValues({}, themeStyle.dateInputClassNames), dateInputClassNames);
+  }, [theme, dateInputClassNames]);
   useEffect(() => {
     if (value) {
       try {
@@ -1142,7 +1156,7 @@ function DatePickerWidget({ label, options, value, required, disabled, uiSchema,
       showMonthAndYearPickers: true,
       className: cn("w-full", className),
       classNames: nextuiClassNames,
-      dateInputClassNames,
+      dateInputClassNames: dateInputStyle,
       label,
       size,
       labelPlacement,
@@ -1225,6 +1239,7 @@ var JSONViewModal = observer(() => {
       /* @__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,
         {
+          theme: complexFormModal.theme,
           formData,
           formConfig: complexFormModal.formConfig,
           layoutConfig,
@@ -1249,14 +1264,14 @@ 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.theme = "default";
     this.modalSize = "md";
     this.scrollBehavior = "normal";
     this.isDismissable = true;
     this.event = new EventEmitter();
-    Object.assign(this, args);
+    const modalStyle = getStyle((args == null ? void 0 : args.theme) || "default", "Modal");
+    const classNames = __spreadValues(__spreadValues({}, modalStyle.classNames), args == null ? void 0 : args.classNames);
+    Object.assign(this, args, { classNames });
     makeAutoObservable(this);
   }
   setData(v) {
@@ -1268,10 +1283,6 @@ var ComplexFormModalStore = class {
     this.formData = void 0;
     this.formConfig = void 0;
     this.layoutConfig = void 0;
-    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;
@@ -1284,8 +1295,11 @@ var ComplexFormModalStore = class {
 };
 async function getComplexFormData(v) {
   return new Promise((resolve, reject) => {
+    const modalStyle = getStyle((v == null ? void 0 : v.theme) || "default", "Modal");
+    const classNames = __spreadValues(__spreadValues({}, modalStyle.classNames), v == null ? void 0 : v.classNames);
     const complexFormModal = RootStore.Get(ComplexFormModalStore);
     complexFormModal.setData(__spreadProps(__spreadValues({}, v), {
+      classNames,
       isOpen: true
     }));
     complexFormModal.event.on("batchSubmit", (formData) => {
@@ -1338,14 +1352,14 @@ 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.theme = "default";
     this.modalSize = "md";
     this.scrollBehavior = "normal";
     this.closeOnOverlayClick = false;
     this.event = new EventEmitter();
-    Object.assign(this, args);
+    const modalStyle = getStyle((args == null ? void 0 : args.theme) || "default", "Modal");
+    const classNames = __spreadValues(__spreadValues({}, modalStyle.classNames), args == null ? void 0 : args.classNames);
+    Object.assign(this, args, { classNames });
     makeAutoObservable(this);
   }
   setData(v) {
@@ -1355,10 +1369,6 @@ var FormModalStore = class {
     this.isOpen = false;
     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;
@@ -1368,8 +1378,11 @@ var FormModalStore = class {
 };
 async function getFormData(v) {
   return new Promise((resolve, reject) => {
+    const modalStyle = getStyle((v == null ? void 0 : v.theme) || "default", "Modal");
+    const classNames = __spreadValues(__spreadValues({}, modalStyle.classNames), v == null ? void 0 : v.classNames);
     const formModal = RootStore.Get(FormModalStore);
     formModal.setData(__spreadProps(__spreadValues({}, v), {
+      classNames,
       isOpen: true
     }));
     formModal.event.on("afterSubmit", (formData) => {
@@ -1390,7 +1403,8 @@ function getFormState2({
   data,
   metadata = {},
   onSet = (v, form) => v,
-  onSubmit
+  onSubmit,
+  theme = "default"
 }) {
   const value = {};
   const required = [];
@@ -1445,6 +1459,7 @@ function getFormState2({
       required.push(k);
       delete metadata[k].required;
     }
+    metadata[k]["theme"] = theme;
     return p;
   }, {});
   const schema = {
@@ -1479,8 +1494,8 @@ function getFormState2({
 }
 async function getSimpleFormData(data, metadata = {}, config, onSet = (v, form) => {
   return v;
-}) {
-  const form = getFormState2({ data, metadata, onSet });
+}, theme = "default") {
+  const form = getFormState2({ data, metadata, onSet, theme });
   return getFormData(__spreadProps(__spreadValues({}, config), {
     //@ts-ignore
     form