react-better-html 1.1.44 → 1.1.46

package/dist/components/BetterHtmlProvider.js

@@ -38,30 +38,11 @@ const useBetterHtmlContext = () => {
 exports.useBetterHtmlContext = useBetterHtmlContext;
 const useTheme = () => {
     const context = (0, react_1.useContext)(betterHtmlContext);
-    const [currentTheme, setCurrentTheme] = (0, react_1.useState)("light");
     if (context === undefined)
         throw new Error("`useTheme()` must be used within a `<BetterHtmlProvider>`. Make sure to add one at the root of your component tree.");
-    (0, react_1.useEffect)(() => {
-        const html = document.querySelector("html");
-        if (!html)
-            return;
-        const observer = new MutationObserver((mutations) => {
-            mutations.forEach((mutation) => {
-                if (mutation.type === "attributes") {
-                    setCurrentTheme(html.getAttribute("data-theme"));
-                }
-            });
-        });
-        observer.observe(html, {
-            attributes: true,
-        });
-        return () => {
-            observer.disconnect();
-        };
-    }, []);
     return {
         ...context.theme,
-        colors: context.theme.colors[currentTheme] ?? context.theme.colors.light,
+        colors: context.theme.colors[context.colorTheme] ?? context.theme.colors.light,
     };
 };
 exports.useTheme = useTheme;
@@ -109,6 +90,7 @@ function BetterHtmlProviderContent({ children }) {
 function BetterHtmlProvider({ value, plugins: pluginsToUse, children }) {
     const [loaders, setLoaders] = (0, react_1.useState)(value?.loaders ?? {});
     const [plugins] = (0, react_1.useState)(pluginsToUse ?? []);
+    const [colorTheme, setColorTheme] = (0, react_1.useState)(localStorage.getItem("theme") === "dark" ? "dark" : "light");
     const readyValue = (0, react_1.useMemo)(() => ({
         app: {
             ...app_1.appConfig,
@@ -130,6 +112,7 @@ function BetterHtmlProvider({ value, plugins: pluginsToUse, children }) {
                 },
             },
         },
+        colorTheme,
         icons: {
             ...icons_1.icons,
             ...value?.icons,
@@ -144,12 +127,30 @@ function BetterHtmlProvider({ value, plugins: pluginsToUse, children }) {
             ...value?.components,
         },
         plugins,
-    }), [value, loaders, plugins]);
+    }), [value, colorTheme, loaders, plugins]);
     (0, react_1.useEffect)(() => {
         plugins.forEach((plugin) => {
             plugin.initialize?.();
         });
     }, [plugins]);
+    (0, react_1.useEffect)(() => {
+        const html = document.querySelector("html");
+        if (!html)
+            return;
+        const observer = new MutationObserver((mutations) => {
+            mutations.forEach((mutation) => {
+                if (mutation.type === "attributes") {
+                    setColorTheme(html.getAttribute("data-theme") === "dark" ? "dark" : "light");
+                }
+            });
+        });
+        observer.observe(html, {
+            attributes: true,
+        });
+        return () => {
+            observer.disconnect();
+        };
+    }, []);
     return ((0, jsx_runtime_1.jsx)(betterHtmlContext.Provider, { value: readyValue, children: (0, jsx_runtime_1.jsx)(BetterHtmlProviderContent, { children: children }) }));
 }
 exports.default = (0, react_1.memo)(BetterHtmlProvider);

package/dist/components/ColorThemeSwitch.d.ts

@@ -0,0 +1,14 @@
+import { ComponentMarginProps } from "../types/components";
+type ColorThemeSwitchProps = {
+    withMoon?: boolean;
+    className?: string;
+} & ComponentMarginProps;
+type ColorThemeSwitchComponentType = {
+    (props: ColorThemeSwitchProps): React.ReactElement;
+    withText: (props: ColorThemeSwitchProps) => React.ReactElement;
+};
+declare const ColorThemeSwitchComponent: ColorThemeSwitchComponentType;
+declare const ColorThemeSwitch: typeof ColorThemeSwitchComponent & {
+    withText: typeof ColorThemeSwitchComponent.withText;
+};
+export default ColorThemeSwitch;

package/dist/components/ColorThemeSwitch.js

@@ -0,0 +1,54 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const hooks_1 = require("../utils/hooks");
+const Div_1 = __importDefault(require("./Div"));
+const Text_1 = __importDefault(require("./Text"));
+const ToggleInput_1 = __importDefault(require("./ToggleInput"));
+const BetterHtmlProvider_1 = require("./BetterHtmlProvider");
+const ColorThemeSwitchComponent = function ColorThemeSwitch({ withMoon, className, ...props }) {
+    const form = (0, hooks_1.useForm)({
+        defaultValues: {
+            darkMode: localStorage.getItem("theme") === "dark",
+        },
+    });
+    (0, react_1.useEffect)(() => {
+        const timeout = setTimeout(() => {
+            window.document.body.parentElement?.setAttribute("data-theme", form.values.darkMode ? "dark" : "light");
+            localStorage.setItem("theme", form.values.darkMode ? "dark" : "light");
+        }, 0.2 * 1000);
+        return () => {
+            clearTimeout(timeout);
+        };
+    }, [form.values.darkMode]);
+    (0, react_1.useEffect)(() => {
+        const html = document.querySelector("html");
+        if (!html)
+            return;
+        const observer = new MutationObserver((mutations) => {
+            mutations.forEach((mutation) => {
+                if (mutation.type === "attributes") {
+                    form.setFieldValue("darkMode", html.getAttribute("data-theme") === "dark");
+                }
+            });
+        });
+        observer.observe(html, {
+            attributes: true,
+        });
+        return () => {
+            observer.disconnect();
+        };
+    }, []);
+    return ((0, jsx_runtime_1.jsx)(ToggleInput_1.default.switch, { className: `react-better-html-color-theme-switch ${withMoon ? ` react-better-html-color-theme-switch-with-moon` : ""}${className ? ` ${className}` : ""}`, ...form.getSwitchProps("darkMode"), ...props }));
+};
+ColorThemeSwitchComponent.withText = function WithText({ withMoon, className, ...props }) {
+    const theme = (0, BetterHtmlProvider_1.useTheme)();
+    return ((0, jsx_runtime_1.jsxs)(Div_1.default.row, { width: "fit-content", alignItems: "center", gap: theme.styles.gap, userSelect: "none", ...props, children: [(0, jsx_runtime_1.jsx)(Text_1.default, { children: "Light" }), (0, jsx_runtime_1.jsx)(ColorThemeSwitchComponent, { withMoon: withMoon, className: className }), (0, jsx_runtime_1.jsx)(Text_1.default, { children: "Dark" })] }));
+};
+const ColorThemeSwitch = (0, react_1.memo)(ColorThemeSwitchComponent);
+ColorThemeSwitch.withText = ColorThemeSwitchComponent.withText;
+exports.default = ColorThemeSwitch;

package/dist/components/Dropdown.d.ts

@@ -23,11 +23,11 @@ export type DropdownProps<Value, Data> = {
     inputFieldClassName?: string;
     withSearch?: boolean;
     withDebounce?: boolean;
-    withoutClearButton?: boolean;
     /** @default 0.5s */
     debounceDelay?: number;
     debounceIsLoading?: boolean;
     debounceMinimumSymbolsRequired?: number;
+    withoutClearButton?: boolean;
     onChange?: (value: Value | undefined) => void;
     onChangeSearch?: (query: string) => void;
     renderOption?: (option: DropdownOption<Value, Data>, index: number, isSelected: boolean) => React.ReactNode;

package/dist/components/Dropdown.js

@@ -14,7 +14,7 @@ const Icon_1 = __importDefault(require("./Icon"));
 const Button_1 = __importDefault(require("./Button"));
 const Loader_1 = __importDefault(require("./Loader"));
 const BetterHtmlProvider_1 = require("./BetterHtmlProvider");
-const DropdownComponent = (0, react_1.forwardRef)(function Dropdown({ label, errorText, infoText, required, disabled, options, value: controlledValue, defaultValue, placeholder = "Select an option", leftIcon, inputFieldClassName, withSearch, withDebounce, withoutClearButton, debounceDelay = 0.5, debounceIsLoading, debounceMinimumSymbolsRequired, onChange, onChangeSearch, renderOption, ...props }, ref) {
+const DropdownComponent = (0, react_1.forwardRef)(function Dropdown({ label, errorText, infoText, required, disabled, options, value: controlledValue, defaultValue, placeholder = "Select an option", leftIcon, inputFieldClassName, withSearch, withDebounce, debounceDelay = 0.5, debounceIsLoading, debounceMinimumSymbolsRequired, withoutClearButton, onChange, onChangeSearch, renderOption, ...props }, ref) {
     const theme = (0, BetterHtmlProvider_1.useTheme)();
     const dropdownHolderRef = (0, react_1.useRef)(null);
     const inputRef = (0, react_1.useRef)(null);

package/dist/components/Form.js

@@ -18,10 +18,10 @@ function Form({ form, submitButtonText, submitButtonLoaderName, submitButtonId,
     }, [form]);
     const SubmitButtonTag = isDestructive ? Button_1.default.destructive : Button_1.default;
     const submitButtonIsDisabledFinal = submitButtonIsDisabled || submitButtonIsDisabledInternal;
-    return ((0, jsx_runtime_1.jsx)(Div_1.default, { ...props, children: (0, jsx_runtime_1.jsxs)("form", { onSubmit: onSubmit, children: [gap !== undefined ? (0, jsx_runtime_1.jsx)(Div_1.default.column, { gap: gap, children: children }) : children, submitButtonText && ((0, jsx_runtime_1.jsxs)(Div_1.default.row, { alignItems: "center", justifyContent: actionButtonsLocation === "left"
+    return ((0, jsx_runtime_1.jsx)(Div_1.default, { ...props, children: (0, jsx_runtime_1.jsxs)("form", { onSubmit: onSubmit ?? form?.onSubmit, children: [gap !== undefined ? (0, jsx_runtime_1.jsx)(Div_1.default.column, { gap: gap, children: children }) : children, submitButtonText && ((0, jsx_runtime_1.jsxs)(Div_1.default.row, { alignItems: "center", justifyContent: actionButtonsLocation === "left"
                         ? "flex-start"
                         : actionButtonsLocation === "center"
                             ? "center"
-                            : "flex-end", gap: theme.styles.gap, marginTop: theme.styles.space, children: [onClickCancel && (0, jsx_runtime_1.jsx)(Button_1.default.secondary, { text: "Cancel", onClick: onClickCancel }), (0, jsx_runtime_1.jsx)(SubmitButtonTag, { text: submitButtonText, isLoading: isSubmitting, loaderName: submitButtonLoaderName, disabled: submitButtonIsDisabledFinal, id: submitButtonId, isSubmit: true })] }))] }) }));
+                            : "flex-end", gap: theme.styles.gap, marginTop: theme.styles.space, children: [onClickCancel && (0, jsx_runtime_1.jsx)(Button_1.default.secondary, { text: "Cancel", onClick: onClickCancel }), (0, jsx_runtime_1.jsx)(SubmitButtonTag, { text: submitButtonText, isLoading: isSubmitting || form?.isSubmitting, loaderName: submitButtonLoaderName, disabled: submitButtonIsDisabledFinal, id: submitButtonId, isSubmit: true })] }))] }) }));
 }
 exports.default = (0, react_1.memo)(Form);

package/dist/components/ToggleInput.js

@@ -10,8 +10,8 @@ const hooks_1 = require("../utils/hooks");
 const Text_1 = __importDefault(require("./Text"));
 const Div_1 = __importDefault(require("./Div"));
 const Icon_1 = __importDefault(require("./Icon"));
-const BetterHtmlProvider_1 = require("./BetterHtmlProvider");
 const Label_1 = __importDefault(require("./Label"));
+const BetterHtmlProvider_1 = require("./BetterHtmlProvider");
 const componentSize = 26;
 const switchComponentBallGap = 3;
 const switchComponentMouseDownDifference = 4;
@@ -53,6 +53,7 @@ const SwitchElement = styled_components_1.default.div.withConfig({
     shouldForwardProp: (prop) => !["theme", "checked", "disabled", "isMouseDown", "normalStyle", "hoverStyle"].includes(prop),
 }) `
    --width: ${(props) => componentSize * 2 - props.theme.styles.gap / 2}px;
+   --ball-size: ${componentSize - switchComponentBallGap * 2}px;
 
    position: relative;
    width: var(--width);
@@ -80,6 +81,27 @@ const SwitchElement = styled_components_1.default.div.withConfig({
       transition: ${(props) => props.theme.styles.transition};
    }
 
+   &.react-better-html-color-theme-switch-with-moon {
+      &::after {
+         content: "";
+         position: absolute;
+         width: ${(props) => componentSize -
+    switchComponentBallGap * 2 +
+    (props.isMouseDown ? switchComponentMouseDownDifference : 0)}px;
+         height: ${componentSize - switchComponentBallGap * 2}px;
+         background-color: ${(props) => (props.checked ? props.theme.colors.primary : "transparent")};
+         border-radius: 999px;
+         top: ${switchComponentBallGap}px;
+         left: ${switchComponentBallGap}px;
+         transform: translateX(
+            ${(props) => props.checked
+    ? `calc(var(--width) - ${componentSize + (props.isMouseDown ? switchComponentMouseDownDifference * 2 : 0)}px - calc(var(--ball-size) / 3))`
+    : "0px"}
+         );
+         transition: ${(props) => props.theme.styles.transition};
+      }
+   }
+
    ${(props) => props.normalStyle}
 
    &:hover {

package/dist/constants/countries.js

@@ -672,6 +672,7 @@ exports.countries = [
         code: "IT",
         timeZone: "Europe/Rome",
         phoneNumberExtension: "39",
+        phoneNumberFormat: "XXX XXX XXXX",
     },
     {
         name: "Jamaica",

package/dist/index.d.ts

@@ -15,9 +15,10 @@ import ToggleInput from "./components/ToggleInput";
 import Form from "./components/Form";
 import Label from "./components/Label";
 import FormRow from "./components/FormRow";
+import ColorThemeSwitch from "./components/ColorThemeSwitch";
 import BetterHtmlProvider, { useBetterHtmlContext, useTheme, useLoader, useLoaderControls } from "./components/BetterHtmlProvider";
 import { usePageResize, usePageScroll, useMediaQuery, useBooleanState, useDebounceState, useForm, useUrlQuery } from "./utils/hooks";
-import { generateRandomString, getBrowser, formatPhoneNumber } from "./utils/functions";
+import { generateRandomString, getBrowser, formatPhoneNumber, getFormErrorObject } from "./utils/functions";
 import { type OmitProps, type ExcludeOptions, type PickValue, type PartialRecord, type DeepPartialRecord, type PickAllRequired } from "./types/app";
 import { type AppConfig, type BetterHtmlConfig } from "./types/config";
 import { type AssetName, type AssetsConfig } from "./types/asset";
@@ -25,6 +26,7 @@ import { type IconName, type IconsConfig } from "./types/icon";
 import { type LoaderName, type LoaderConfig } from "./types/loader";
 import { type PluginName, type BetterHtmlPlugin } from "./types/plugin";
 import { type Color, type ColorName, type ColorTheme, type Colors, type Styles, type Theme, type ThemeConfig } from "./types/theme";
+import { type BrowserName } from "./types/other";
 import { isMobileDevice } from "./constants";
 export * from "./plugins";
-export { BetterHtmlProvider, Div, Text, Loader, Icon, Image, Button, Divider, Modal, ModalRef, PageHolder, PageHeader, Chip, InputField, Dropdown, DropdownOption, ToggleInput, Form, Label, FormRow, useBetterHtmlContext, useTheme, useLoader, useLoaderControls, usePageResize, usePageScroll, useMediaQuery, useBooleanState, useDebounceState, useForm, useUrlQuery, generateRandomString, getBrowser, formatPhoneNumber, OmitProps, ExcludeOptions, PickValue, PartialRecord, DeepPartialRecord, PickAllRequired, AppConfig, BetterHtmlConfig, AssetName, AssetsConfig, IconName, IconsConfig, LoaderName, PluginName, BetterHtmlPlugin, LoaderConfig, Color, ColorName, ColorTheme, Colors, Styles, Theme, ThemeConfig, isMobileDevice, };
+export { BetterHtmlProvider, Div, Text, Loader, Icon, Image, Button, Divider, Modal, ModalRef, PageHolder, PageHeader, Chip, InputField, Dropdown, DropdownOption, ToggleInput, Form, Label, FormRow, ColorThemeSwitch, useBetterHtmlContext, useTheme, useLoader, useLoaderControls, usePageResize, usePageScroll, useMediaQuery, useBooleanState, useDebounceState, useForm, useUrlQuery, generateRandomString, getBrowser, formatPhoneNumber, getFormErrorObject, OmitProps, ExcludeOptions, PickValue, PartialRecord, DeepPartialRecord, PickAllRequired, AppConfig, BetterHtmlConfig, AssetName, AssetsConfig, IconName, IconsConfig, LoaderName, PluginName, BetterHtmlPlugin, LoaderConfig, Color, ColorName, ColorTheme, Colors, Styles, Theme, ThemeConfig, BrowserName, isMobileDevice, };

package/dist/index.js

@@ -39,7 +39,7 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.isMobileDevice = exports.formatPhoneNumber = exports.getBrowser = exports.generateRandomString = exports.useUrlQuery = exports.useForm = exports.useDebounceState = exports.useBooleanState = exports.useMediaQuery = exports.usePageScroll = exports.usePageResize = exports.useLoaderControls = exports.useLoader = exports.useTheme = exports.useBetterHtmlContext = exports.FormRow = exports.Label = exports.Form = exports.ToggleInput = exports.Dropdown = exports.InputField = exports.Chip = exports.PageHeader = exports.PageHolder = exports.Modal = exports.Divider = exports.Button = exports.Image = exports.Icon = exports.Loader = exports.Text = exports.Div = exports.BetterHtmlProvider = void 0;
+exports.isMobileDevice = exports.getFormErrorObject = exports.formatPhoneNumber = exports.getBrowser = exports.generateRandomString = exports.useUrlQuery = exports.useForm = exports.useDebounceState = exports.useBooleanState = exports.useMediaQuery = exports.usePageScroll = exports.usePageResize = exports.useLoaderControls = exports.useLoader = exports.useTheme = exports.useBetterHtmlContext = exports.ColorThemeSwitch = exports.FormRow = exports.Label = exports.Form = exports.ToggleInput = exports.Dropdown = exports.InputField = exports.Chip = exports.PageHeader = exports.PageHolder = exports.Modal = exports.Divider = exports.Button = exports.Image = exports.Icon = exports.Loader = exports.Text = exports.Div = exports.BetterHtmlProvider = void 0;
 const Div_1 = __importDefault(require("./components/Div"));
 exports.Div = Div_1.default;
 const Text_1 = __importDefault(require("./components/Text"));
@@ -74,6 +74,8 @@ const Label_1 = __importDefault(require("./components/Label"));
 exports.Label = Label_1.default;
 const FormRow_1 = __importDefault(require("./components/FormRow"));
 exports.FormRow = FormRow_1.default;
+const ColorThemeSwitch_1 = __importDefault(require("./components/ColorThemeSwitch"));
+exports.ColorThemeSwitch = ColorThemeSwitch_1.default;
 const BetterHtmlProvider_1 = __importStar(require("./components/BetterHtmlProvider"));
 exports.BetterHtmlProvider = BetterHtmlProvider_1.default;
 Object.defineProperty(exports, "useBetterHtmlContext", { enumerable: true, get: function () { return BetterHtmlProvider_1.useBetterHtmlContext; } });
@@ -92,6 +94,7 @@ const functions_1 = require("./utils/functions");
 Object.defineProperty(exports, "generateRandomString", { enumerable: true, get: function () { return functions_1.generateRandomString; } });
 Object.defineProperty(exports, "getBrowser", { enumerable: true, get: function () { return functions_1.getBrowser; } });
 Object.defineProperty(exports, "formatPhoneNumber", { enumerable: true, get: function () { return functions_1.formatPhoneNumber; } });
+Object.defineProperty(exports, "getFormErrorObject", { enumerable: true, get: function () { return functions_1.getFormErrorObject; } });
 const constants_1 = require("./constants");
 Object.defineProperty(exports, "isMobileDevice", { enumerable: true, get: function () { return constants_1.isMobileDevice; } });
 __exportStar(require("./plugins"), exports);

package/dist/types/other.d.ts

@@ -0,0 +1 @@
+export type BrowserName = "firefox" | "chrome" | "safari" | "edge" | "opera";

package/dist/types/other.js

@@ -0,0 +1,2 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });

package/dist/utils/functions.d.ts

@@ -1,3 +1,16 @@
-export declare const generateRandomString: (stringLength: number) => string;
-export declare const getBrowser: () => "firefox" | "chrome" | "safari" | "edge" | "opera" | undefined;
+import { PartialRecord } from "../types/app";
+import { BrowserName } from "../types/other";
+import { useForm } from "./hooks";
+export declare const generateRandomString: (stringLength: number, options?: {
+    /** @default true */
+    includeCapitalLetters?: boolean;
+    /** @default true */
+    includeLowerLetters?: boolean;
+    /** @default true */
+    includeNumbers?: boolean;
+    /** @default 1 */
+    dashSections?: number;
+}) => string;
+export declare const getBrowser: () => BrowserName | undefined;
 export declare const formatPhoneNumber: (phoneNumber: string) => string;
+export declare const getFormErrorObject: <FormFields extends ReturnType<typeof useForm>["values"]>(formValues: FormFields) => PartialRecord<keyof FormFields, string>;

package/dist/utils/functions.js

@@ -1,12 +1,34 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.formatPhoneNumber = exports.getBrowser = exports.generateRandomString = void 0;
+exports.getFormErrorObject = exports.formatPhoneNumber = exports.getBrowser = exports.generateRandomString = void 0;
 const countries_1 = require("../constants/countries");
-const generateRandomString = (stringLength) => {
-    const characters = "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789";
+const generateRandomString = (stringLength, options) => {
+    const capitals = "ABCDEFGHIJKLMNOPQRSTUVWXYZ";
+    const lowers = "abcdefghijklmnopqrstuvwxyz";
+    const numbers = "0123456789";
+    const includes = [];
+    if (options?.includeCapitalLetters !== false)
+        includes.push(capitals);
+    if (options?.includeLowerLetters !== false)
+        includes.push(lowers);
+    if (options?.includeNumbers !== false)
+        includes.push(numbers);
+    const characters = includes.join("");
+    const dashSections = Math.max(1, options?.dashSections ?? 1);
+    const dashSectionLength = Math.floor(stringLength / dashSections);
+    if (stringLength < dashSections)
+        return "";
     let result = "";
-    for (let index = 0; index < stringLength; index++) {
-        result += characters.charAt(Math.floor(Math.random() * characters.length));
+    let currentSectionLength = 0;
+    while (result.length < stringLength) {
+        if (currentSectionLength >= dashSectionLength) {
+            result += "-";
+            currentSectionLength = 0;
+        }
+        if (result.length < stringLength) {
+            result += characters.charAt(Math.floor(Math.random() * characters.length));
+            currentSectionLength += 1;
+        }
     }
     return result;
 };
@@ -49,3 +71,7 @@ const formatPhoneNumber = (phoneNumber) => {
     return `+${country.phoneNumberExtension} ${phonNumberRest}`;
 };
 exports.formatPhoneNumber = formatPhoneNumber;
+const getFormErrorObject = (formValues) => {
+    return {};
+};
+exports.getFormErrorObject = getFormErrorObject;

package/dist/utils/hooks.d.ts

@@ -47,7 +47,7 @@ export declare function useBooleanState(initialValue?: boolean): [
     }
 ];
 export declare function useDebounceState<Value>(initialValue: Value, delay?: number): [value: Value, debouncedValue: Value, setValue: React.Dispatch<React.SetStateAction<Value>>, isLoading: boolean];
-export declare function useForm<FormFields extends Record<string, string | number | boolean | undefined>>({ defaultValues, requiredFields, onSubmit, validate, }: {
+export declare function useForm<FormFields extends Record<string, string | number | boolean | undefined>>(options: {
     defaultValues: FormFields;
     requiredFields?: (keyof FormFields)[];
     onSubmit?: (values: FormFields) => void | Promise<void>;

package/dist/utils/hooks.js

@@ -175,7 +175,8 @@ function useDebounceState(initialValue, delay = 0.5) {
     }, [value, delay]);
     return [value, debouncedValue, setValue, isLoading];
 }
-function useForm({ defaultValues, requiredFields, onSubmit, validate, }) {
+function useForm(options) {
+    const { defaultValues, requiredFields, onSubmit, validate } = options;
     const inputFieldRefs = (0, react_1.useRef)({});
     const [inputTypes, setInputTypes] = (0, react_1.useState)({});
     const [values, setValues] = (0, react_1.useState)(defaultValues);

package/package.json

@@ -1,6 +1,6 @@
 {
    "name": "react-better-html",
-   "version": "1.1.44",
+   "version": "1.1.46",
    "description": "A component library for react that is as close to plane html as possible",
    "main": "dist/index.js",
    "files": [