react-better-html 1.1.43 → 1.1.45

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.d.ts

@@ -8,7 +8,7 @@ type InternalToggleInputProps<Value> = {
     infoText?: string;
     value?: Value;
     onChange?: (checked: boolean, value?: Value) => void;
-} & OmitProps<React.ComponentProps<"input">, "style" | "value" | "ref" | "onChange" | "name"> & ComponentStyle & ComponentHoverStyle;
+} & OmitProps<React.ComponentProps<"input">, "style" | "value" | "ref" | "onChange"> & ComponentStyle & ComponentHoverStyle;
 export type ToggleInputProps<Value> = ComponentPropWithRef<ToggleInputRef, OmitProps<InternalToggleInputProps<Value>, "type">>;
 type ToggleInputComponentType = <Value>(props: ToggleInputProps<Value>) => React.ReactElement;
 declare const _default: {

package/dist/components/ToggleInput.js

@@ -10,14 +10,18 @@ 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 Label_1 = __importDefault(require("./Label"));
 const BetterHtmlProvider_1 = require("./BetterHtmlProvider");
+const componentSize = 26;
+const switchComponentBallGap = 3;
+const switchComponentMouseDownDifference = 4;
 const InputElement = styled_components_1.default.input.withConfig({
     shouldForwardProp: (prop) => !["theme", "normalStyle", "hoverStyle"].includes(prop),
 }) `
    position: relative;
    appearance: none;
-   width: 26px;
-   height: 26px;
+   width: ${componentSize}px;
+   height: ${componentSize}px;
    background-color: ${(props) => props.theme.colors.backgroundContent};
    border: 1px solid ${(props) => props.theme.colors.border};
    border-radius: ${(props) => props.theme.styles.borderRadius / 2}px;
@@ -46,13 +50,15 @@ const InputElement = styled_components_1.default.input.withConfig({
    }
 `;
 const SwitchElement = styled_components_1.default.div.withConfig({
-    shouldForwardProp: (prop) => !["theme", "checked", "disabled", "normalStyle", "hoverStyle"].includes(prop),
+    shouldForwardProp: (prop) => !["theme", "checked", "disabled", "isMouseDown", "normalStyle", "hoverStyle"].includes(prop),
 }) `
+   --width: ${(props) => componentSize * 2 - props.theme.styles.gap / 2}px;
+
    position: relative;
-   width: 36px;
-   height: 20px;
+   width: var(--width);
+   height: ${componentSize}px;
    background-color: ${(props) => (props.checked ? props.theme.colors.primary : props.theme.colors.border)};
-   border-radius: 10px;
+   border-radius: 999px;
    cursor: ${(props) => (props.disabled ? "not-allowed" : "pointer")};
    opacity: ${(props) => (props.disabled ? 0.5 : 1)};
    transition: ${(props) => props.theme.styles.transition};
@@ -60,14 +66,18 @@ const SwitchElement = styled_components_1.default.div.withConfig({
    &::before {
       content: "";
       position: absolute;
-      width: 16px;
-      height: 16px;
-      background-color: white;
-      border-radius: 50%;
-      top: 2px;
-      left: 2px;
+      width: ${(props) => componentSize - switchComponentBallGap * 2 + (props.isMouseDown ? switchComponentMouseDownDifference : 0)}px;
+      height: ${componentSize - switchComponentBallGap * 2}px;
+      background-color: ${(props) => props.theme.colors.base};
+      border-radius: 999px;
+      top: ${switchComponentBallGap}px;
+      left: ${switchComponentBallGap}px;
+      transform: translateX(
+         ${(props) => props.checked
+    ? `calc(var(--width) - ${componentSize + (props.isMouseDown ? switchComponentMouseDownDifference : 0)}px)`
+    : "0px"}
+      );
       transition: ${(props) => props.theme.styles.transition};
-      transform: translateX(${(props) => (props.checked ? "16px" : "0")});
    }
 
    ${(props) => props.normalStyle}
@@ -85,19 +95,19 @@ const ToggleInputComponent = (0, react_1.forwardRef)(function ToggleInput({ labe
     const restProps = (0, hooks_1.useComponentPropsWithoutStyle)(props);
     const [internalChecked, setInternalChecked] = (0, react_1.useState)(false);
     const onChangeElement = (0, react_1.useCallback)((event) => {
-        const newValue = event.target.checked;
+        const newIsChecked = event.target.checked;
         if (controlledChecked === undefined)
-            setInternalChecked(newValue);
-        onChange?.(newValue, value);
+            setInternalChecked(newIsChecked);
+        onChange?.(newIsChecked, value);
     }, [onChange, controlledChecked, value]);
     const checked = controlledChecked ?? internalChecked;
     const onClickText = (0, react_1.useCallback)(() => {
-        const newValue = !checked;
+        const newIsChecked = !checked;
         if (controlledChecked === undefined)
-            setInternalChecked(newValue);
-        onChange?.(newValue, value);
+            setInternalChecked(newIsChecked);
+        onChange?.(newIsChecked, value);
     }, [checked, controlledChecked, onChange, value]);
-    return ((0, jsx_runtime_1.jsxs)(Div_1.default.column, { width: "100%", gap: theme.styles.gap / 2, ...styledComponentStylesWithExcluded, children: [label && ((0, jsx_runtime_1.jsxs)(Text_1.default, { as: "label", height: 16, fontSize: 14, color: errorText ? theme.colors.error : theme.colors.textSecondary, children: [label, required && ((0, jsx_runtime_1.jsxs)(Text_1.default, { as: "span", fontSize: 16, color: theme.colors.error, children: [" ", "*"] }))] })), (0, jsx_runtime_1.jsxs)(Div_1.default.row, { alignItems: "center", gap: theme.styles.gap, children: [(0, jsx_runtime_1.jsxs)(Div_1.default.row, { position: "relative", alignItems: "center", children: [(0, jsx_runtime_1.jsx)(InputElement, { theme: theme, type: props.type ?? "checkbox", checked: checked, onChange: onChangeElement, ...styledComponentStyles, ...dataProps, ...ariaProps, ...restProps }), props.type === "checkbox" ? ((0, jsx_runtime_1.jsx)(Icon_1.default, { name: "check", position: "absolute", top: "50%", left: "50%", color: theme.colors.base, size: 14, transform: `translate(-50%, -50%)${checked ? "" : " scale(0.4)"}`, opacity: checked ? 1 : 0, pointerEvents: "none", transition: theme.styles.transition })) : props.type === "radio" ? ((0, jsx_runtime_1.jsx)(Div_1.default, { position: "absolute", width: 10, height: 10, top: "50%", left: "50%", backgroundColor: theme.colors.base, borderRadius: 999, transform: `translate(-50%, -50%)${checked ? "" : " scale(0.4)"}`, opacity: checked ? 1 : 0, pointerEvents: "none" })) : undefined] }), text && ((0, jsx_runtime_1.jsx)(Text_1.default, { userSelect: "none", cursor: "pointer", onClick: onClickText, children: text }))] }), (errorText || infoText) && ((0, jsx_runtime_1.jsx)(Text_1.default, { as: "span", display: "block", fontSize: 14, color: errorText ? theme.colors.error : theme.colors.textSecondary, children: errorText || infoText }))] }));
+    return ((0, jsx_runtime_1.jsxs)(Div_1.default.column, { width: "100%", gap: theme.styles.gap / 2, ...styledComponentStylesWithExcluded, children: [label && (0, jsx_runtime_1.jsx)(Label_1.default, { text: label, required: required, isError: !!errorText }), (0, jsx_runtime_1.jsxs)(Div_1.default.row, { alignItems: "center", gap: theme.styles.gap, children: [(0, jsx_runtime_1.jsxs)(Div_1.default.row, { position: "relative", alignItems: "center", children: [(0, jsx_runtime_1.jsx)(InputElement, { theme: theme, type: props.type ?? "checkbox", checked: checked, onChange: onChangeElement, ...styledComponentStyles, ...dataProps, ...ariaProps, ...restProps }), props.type === "checkbox" ? ((0, jsx_runtime_1.jsx)(Icon_1.default, { name: "check", position: "absolute", top: "50%", left: "50%", color: theme.colors.base, size: 14, transform: `translate(-50%, -50%)${checked ? "" : " scale(0.4)"}`, opacity: checked ? 1 : 0, pointerEvents: "none", transition: theme.styles.transition })) : props.type === "radio" ? ((0, jsx_runtime_1.jsx)(Div_1.default, { position: "absolute", width: 10, height: 10, top: "50%", left: "50%", backgroundColor: theme.colors.base, borderRadius: 999, transform: `translate(-50%, -50%)${checked ? "" : " scale(0.4)"}`, opacity: checked ? 1 : 0, pointerEvents: "none" })) : undefined] }), text && ((0, jsx_runtime_1.jsx)(Text_1.default, { userSelect: "none", cursor: "pointer", onClick: onClickText, children: text }))] }), (errorText || infoText) && ((0, jsx_runtime_1.jsx)(Text_1.default, { as: "span", display: "block", fontSize: 14, color: errorText ? theme.colors.error : theme.colors.textSecondary, children: errorText || infoText }))] }));
 });
 exports.default = {
     checkbox: (0, react_1.forwardRef)(function Checkbox(props, ref) {
@@ -106,7 +116,7 @@ exports.default = {
     radiobutton: (0, react_1.forwardRef)(function RadioButton(props, ref) {
         return (0, jsx_runtime_1.jsx)(ToggleInputComponent, { type: "radio", ref: ref, ...props });
     }),
-    switch: (0, react_1.forwardRef)(function Switch({ label, errorText, infoText, disabled, onChange, checked: controlledChecked, required, ...props }, ref) {
+    switch: (0, react_1.forwardRef)(function Switch({ label, errorText, infoText, disabled, value, onChange, checked: controlledChecked, required, ...props }, ref) {
         const theme = (0, BetterHtmlProvider_1.useTheme)();
         const styledComponentStyles = (0, hooks_1.useStyledComponentStyles)(props, theme, true);
         const styledComponentStylesWithExcluded = (0, hooks_1.useComponentPropsWithExcludedStyle)(props);
@@ -114,15 +124,16 @@ exports.default = {
         const ariaProps = (0, hooks_1.useComponentPropsWithPrefix)(props, "aria");
         const restProps = (0, hooks_1.useComponentPropsWithoutStyle)(props);
         const [internalChecked, setInternalChecked] = (0, hooks_1.useBooleanState)();
+        const [isMouseDown, setIsMouseDown] = (0, hooks_1.useBooleanState)();
         const checked = controlledChecked ?? internalChecked;
         const onClickElement = (0, react_1.useCallback)(() => {
             if (disabled)
                 return;
-            const newValue = !checked;
+            const newIsChecked = !checked;
             if (controlledChecked === undefined)
-                setInternalChecked.setState(newValue);
-            onChange?.(newValue);
-        }, [disabled, checked, onChange, controlledChecked]);
-        return ((0, jsx_runtime_1.jsxs)(Div_1.default.column, { width: "100%", gap: theme.styles.gap / 2, ...styledComponentStylesWithExcluded, children: [label && ((0, jsx_runtime_1.jsxs)(Text_1.default, { as: "label", height: 16, fontSize: 14, color: errorText ? theme.colors.error : theme.colors.textSecondary, children: [label, required && ((0, jsx_runtime_1.jsxs)(Text_1.default, { as: "span", fontSize: 16, color: theme.colors.error, children: [" ", "*"] }))] })), (0, jsx_runtime_1.jsx)(Div_1.default.row, { alignItems: "center", gap: theme.styles.gap, children: (0, jsx_runtime_1.jsx)(SwitchElement, { theme: theme, checked: checked, disabled: disabled ?? false, onClick: onClickElement, ...styledComponentStyles, ...dataProps, ...ariaProps, ...restProps }) }), (errorText || infoText) && ((0, jsx_runtime_1.jsx)(Text_1.default, { as: "span", display: "block", fontSize: 14, color: errorText ? theme.colors.error : theme.colors.textSecondary, children: errorText || infoText }))] }));
+                setInternalChecked.setState(newIsChecked);
+            onChange?.(newIsChecked, value);
+        }, [disabled, checked, onChange, controlledChecked, value]);
+        return ((0, jsx_runtime_1.jsxs)(Div_1.default.column, { width: "100%", gap: theme.styles.gap / 2, ...styledComponentStylesWithExcluded, children: [label && (0, jsx_runtime_1.jsx)(Label_1.default, { text: label, required: required, isError: !!errorText }), (0, jsx_runtime_1.jsx)(Div_1.default.row, { alignItems: "center", gap: theme.styles.gap, onMouseDown: setIsMouseDown.setTrue, onMouseUp: setIsMouseDown.setFalse, onMouseOut: setIsMouseDown.setFalse, onTouchStart: setIsMouseDown.setTrue, onTouchEnd: setIsMouseDown.setFalse, onTouchCancel: setIsMouseDown.setFalse, children: (0, jsx_runtime_1.jsx)(SwitchElement, { theme: theme, checked: checked, disabled: disabled ?? false, isMouseDown: isMouseDown, onClick: onClickElement, ...styledComponentStyles, ...dataProps, ...ariaProps, ...restProps }) }), (errorText || infoText) && ((0, jsx_runtime_1.jsx)(Text_1.default, { as: "span", display: "block", fontSize: 14, color: errorText ? theme.colors.error : theme.colors.textSecondary, children: errorText || infoText }))] }));
     }),
 };

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

@@ -17,7 +17,7 @@ import Label from "./components/Label";
 import FormRow from "./components/FormRow";
 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 +25,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, 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.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"));
@@ -92,6 +92,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>;
@@ -62,6 +62,8 @@ export declare function useForm<FormFields extends Record<string, string | numbe
     getTextAreaProps: <FieldName extends keyof FormFields>(field: FieldName) => ComponentPropWithRef<HTMLTextAreaElement, TextareaFieldProps>;
     getDropdownFieldProps: <FieldName extends keyof FormFields>(field: FieldName) => OmitProps<ComponentPropWithRef<HTMLDivElement, DropdownProps<FormFields[FieldName], unknown>>, "options">;
     getCheckboxProps: <FieldName extends keyof FormFields>(field: FieldName) => ComponentPropWithRef<ToggleInputRef, ToggleInputProps<FormFields[FieldName]>>;
+    getRadioButtonProps: <FieldName extends keyof FormFields>(field: FieldName, value: FormFields[FieldName]) => ComponentPropWithRef<ToggleInputRef, ToggleInputProps<FormFields[FieldName]>>;
+    getSwitchProps: <FieldName extends keyof FormFields>(field: FieldName) => ComponentPropWithRef<ToggleInputRef, ToggleInputProps<FormFields[FieldName]>>;
     focusField: (field: keyof FormFields) => void;
     onSubmit: (event: React.FormEvent<HTMLFormElement>) => Promise<void>;
     reset: () => 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);
@@ -255,6 +256,28 @@ function useForm({ defaultValues, requiredFields, onSubmit, validate, }) {
             errorText: errors[field],
         };
     }, [values, errors, setFieldValue]);
+    const getRadioButtonProps = (0, react_1.useCallback)((field, value) => {
+        return {
+            required: requiredFields?.includes(field),
+            checked: values[field] === value,
+            name: field.toString(),
+            value,
+            onChange: (checked, newValue) => {
+                setFieldValue(field, checked ? newValue : undefined);
+            },
+            errorText: errors[field],
+        };
+    }, [values, errors, setFieldValue]);
+    const getSwitchProps = (0, react_1.useCallback)((field) => {
+        return {
+            required: requiredFields?.includes(field),
+            checked: values[field],
+            onChange: (checked) => {
+                setFieldValue(field, checked);
+            },
+            errorText: errors[field],
+        };
+    }, [values, errors, setFieldValue]);
     const focusField = (0, react_1.useCallback)((field) => {
         inputFieldRefs.current[field]?.focus();
     }, []);
@@ -290,6 +313,8 @@ function useForm({ defaultValues, requiredFields, onSubmit, validate, }) {
         getTextAreaProps,
         getDropdownFieldProps,
         getCheckboxProps,
+        getRadioButtonProps,
+        getSwitchProps,
         focusField,
         onSubmit: onSubmitFunction,
         reset,

package/package.json

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