react-better-html 1.1.72 → 1.1.74

package/dist/index.d.ts

@@ -1,34 +1,686 @@
-import Div, { type DivProps } from "./components/Div";
-import Text, { type TextProps, type TextAs } from "./components/Text";
-import Loader, { type LoaderProps } from "./components/Loader";
-import Icon, { type IconProps } from "./components/Icon";
-import Image, { type ImageProps } from "./components/Image";
-import Button, { type ButtonProps } from "./components/Button";
-import Divider, { type HorizontalDividerProps, type VerticalDividerProps } from "./components/Divider";
-import Modal, { type ModalRef, type ModalProps } from "./components/Modal";
-import PageHolder, { type PageHolderProps } from "./components/PageHolder";
-import PageHeader, { type PageHeaderProps } from "./components/PageHeader";
-import Chip, { type ChipProps } from "./components/Chip";
-import InputField, { type InputFieldProps, type TextareaFieldProps } from "./components/InputField";
-import Dropdown, { type DropdownOption, type DropdownProps } from "./components/Dropdown";
-import ToggleInput, { type ToggleInputRef, type ToggleInputProps } from "./components/ToggleInput";
-import Form, { type FormProps } from "./components/Form";
-import Label, { type LabelProps } from "./components/Label";
-import FormRow, { type FormRowProps } from "./components/FormRow";
-import ColorThemeSwitch, { type ColorThemeSwitchProps } from "./components/ColorThemeSwitch";
-import Table, { type TableColumn } from "./components/Table";
-import BetterHtmlProvider, { useBetterHtmlContext, useTheme, useLoader, useLoaderControls, type BetterHtmlProviderValue } from "./components/BetterHtmlProvider";
-import { usePageResize, usePageScroll, useMediaQuery, useBooleanState, useDebounceState, useForm, useUrlQuery } from "./utils/hooks";
-import { generateRandomString, getBrowser, formatPhoneNumber, getFormErrorObject } from "./utils/functions";
-import { loaderControls } from "./utils/variableFunctions";
-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";
-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, BetterHtmlProviderValue, Div, DivProps, Text, TextProps, TextAs, Loader, LoaderProps, Icon, IconProps, Image, ImageProps, Button, ButtonProps, Divider, HorizontalDividerProps, VerticalDividerProps, Modal, ModalProps, ModalRef, PageHolder, PageHolderProps, PageHeader, PageHeaderProps, Chip, ChipProps, InputField, InputFieldProps, TextareaFieldProps, Dropdown, DropdownOption, DropdownProps, ToggleInput, ToggleInputRef, ToggleInputProps, Form, FormProps, Label, LabelProps, FormRow, FormRowProps, ColorThemeSwitch, ColorThemeSwitchProps, Table, TableColumn, useBetterHtmlContext, useTheme, useLoader, useLoaderControls, usePageResize, usePageScroll, useMediaQuery, useBooleanState, useDebounceState, useForm, useUrlQuery, generateRandomString, getBrowser, formatPhoneNumber, getFormErrorObject, loaderControls, 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, };
+import { WebTarget } from 'styled-components';
+import * as React$1 from 'react';
+import React__default, { ComponentType, ComponentProps, ReactNode } from 'react';
+import * as react_jsx_runtime from 'react/jsx-runtime';
+
+type PluginName = "react-router-dom";
+type BetterHtmlPlugin = {
+    name: PluginName;
+    components?: Record<string, ComponentType<any>>;
+    initialize?: () => void;
+};
+
+type ComponentStyle = React.CSSProperties;
+type ComponentHoverStyle = {
+    [CSSProperty in keyof ComponentStyle as `${CSSProperty & string}Hover`]: ComponentStyle[CSSProperty];
+};
+type ComponentMarginProps = Pick<ComponentStyle, "margin" | "marginTop" | "marginBottom" | "marginLeft" | "marginRight" | "marginBlock" | "marginInline">;
+type ComponentPropWithRef<ComponentRef, ComponentProps> = ComponentProps & {
+    ref?: React.Ref<ComponentRef>;
+};
+
+/** Removes the given props from type */
+type OmitProps<T, K extends keyof T> = Omit<T, K>;
+/** Removes the given options from type */
+type ExcludeOptions<T, K extends T> = Exclude<T, K>;
+/** Picks only the selected values */
+type PickValue<T, K extends T> = K;
+/** Makes all object props optional (On the root) */
+type PartialRecord<K extends keyof any, T> = Partial<Record<K, T>>;
+/** Makes all object props optional (On the root and nested) */
+type DeepPartialRecord<T> = {
+    [K in keyof T]?: T[K] extends object ? DeepPartialRecord<T[K]> : T[K];
+};
+/** returns only the required props */
+type PickAllRequired<T, K extends keyof T> = Required<Pick<T, K>>;
+type AnyOtherString = Omit<string & {}, "">;
+
+type DivProps<Value> = {
+    value?: Value;
+    /** @default "div" */
+    as?: WebTarget;
+    /** @default false */
+    isTabAccessed?: boolean;
+    onClickWithValue?: (value: Value) => void;
+} & OmitProps<React.ComponentProps<"div">, "style" | "defaultValue"> & ComponentStyle & ComponentHoverStyle;
+type DivComponentType = {
+    <Value>(props: ComponentPropWithRef<HTMLDivElement, DivProps<Value>>): React.ReactElement;
+    row: <Value>(props: ComponentPropWithRef<HTMLDivElement, OmitProps<DivProps<Value>, "display" | "flexDirection"> & {
+        invertFlexDirection?: boolean;
+    }>) => React.ReactElement;
+    column: <Value>(props: ComponentPropWithRef<HTMLDivElement, OmitProps<DivProps<Value>, "display" | "flexDirection"> & {
+        invertFlexDirection?: boolean;
+    }>) => React.ReactElement;
+    grid: <Value>(props: ComponentPropWithRef<HTMLDivElement, OmitProps<DivProps<Value>, "display">>) => React.ReactElement;
+    box: <Value>(props: ComponentPropWithRef<HTMLDivElement, DivProps<Value>>) => React.ReactElement;
+};
+declare const DivComponent: DivComponentType;
+declare const Div: typeof DivComponent & {
+    row: typeof DivComponent.row;
+    column: typeof DivComponent.column;
+    grid: typeof DivComponent.grid;
+    box: typeof DivComponent.box;
+};
+
+type TextAs = "h1" | "h2" | "h3" | "h4" | "h5" | "h6" | "p" | "span" | "label";
+type TextProps = {
+    /** @default "p" */
+    as?: TextAs;
+} & OmitProps<React.ComponentProps<"p">, "style"> & ComponentStyle & ComponentHoverStyle;
+type TextComponentType = {
+    (props: ComponentPropWithRef<HTMLParagraphElement, TextProps>): React.ReactElement;
+    unknown: (props: ComponentPropWithRef<HTMLParagraphElement, TextProps>) => React.ReactElement;
+    oneLine: (props: ComponentPropWithRef<HTMLParagraphElement, TextProps>) => React.ReactElement;
+};
+declare const TextComponent: TextComponentType;
+declare const Text: typeof TextComponent & {
+    unknown: typeof TextComponent.unknown;
+    oneLine: typeof TextComponent.oneLine;
+};
+
+type Color = `#${string}` | "transparent";
+type ColorName = "textPrimary" | "textSecondary" | "textLink" | "label" | "primary" | "secondary" | "accent" | "success" | "info" | "warn" | "error" | "base" | "backgroundBase" | "backgroundSecondary" | "backgroundContent" | "border";
+type ColorTheme = "light" | "dark";
+type Styles = {
+    space: number;
+    gap: number;
+    borderRadius: number;
+    fontFamily: string;
+    transition: string;
+};
+type Colors = Record<ColorName, Color>;
+type Theme = {
+    styles: Styles;
+    colors: Colors;
+};
+type ThemeConfig = {
+    styles: Styles;
+    colors: Record<ColorTheme, Colors>;
+};
+
+type LoaderProps = {
+    /** @default textPrimary */
+    color?: Color;
+    /** @default 16 */
+    size?: number;
+    /** @default 5 */
+    width?: number;
+    /** @default false */
+    disabled?: boolean;
+} & OmitProps<DivProps<unknown>, "width" | "height" | "color" | "background" | "borderRadius" | "mask" | "WebkitMask" | "padding" | "animation" | "animationName">;
+type LoaderComponentType = {
+    (props: LoaderProps): React.ReactElement;
+    box: (props: OmitProps<LoaderProps, "size"> & {
+        /** @default "Loading..." */
+        text?: string;
+        /** @default 20 */
+        size?: number;
+    }) => React.ReactElement;
+    text: (props: OmitProps<LoaderProps, "size"> & {
+        /** @default "Loading..." */
+        text?: string;
+        /** @default 14 */
+        size?: number;
+    }) => React.ReactElement;
+};
+declare const LoaderComponent: LoaderComponentType;
+declare const Loader: typeof LoaderComponent & {
+    box: typeof LoaderComponent.box;
+    text: typeof LoaderComponent.text;
+};
+
+type IconName = "XMark" | "uploadCloud" | "trash" | "chevronDown" | "eye" | "eyeDashed" | "magnifyingGlass" | "check";
+type IconData = {
+    width: number;
+    height: number;
+    paths: (React.ComponentProps<"path"> & {
+        type: "fill" | "stroke";
+    })[];
+};
+type IconsConfig = Record<IconName, IconData> & {
+    [key: string]: IconData;
+};
+
+type IconProps = {
+    name: IconName | AnyOtherString;
+    /** @default 16 */
+    size?: number;
+} & OmitProps<React.ComponentProps<"svg">, "style" | "width" | "height" | "viewBox" | "fill" | "xmlns" | "name"> & ComponentStyle & ComponentHoverStyle;
+type IconComponent = {
+    (props: ComponentPropWithRef<SVGSVGElement, IconProps>): React.ReactElement;
+};
+declare const _default$8: IconComponent;
+
+type AssetName = "logo";
+type AssetsConfig = Record<AssetName, string> & {
+    [key: string]: string;
+};
+
+type ImageProps = {
+    name?: AssetName | AnyOtherString;
+} & OmitProps<React.ComponentProps<"img">, "style"> & ComponentStyle & ComponentHoverStyle;
+type ImageComponent = {
+    (props: ComponentPropWithRef<HTMLImageElement, ImageProps>): React.ReactElement;
+    profileImage: (props: ComponentPropWithRef<HTMLImageElement, OmitProps<ImageProps, "width" | "height"> & {
+        /** @default 40 */
+        size?: number;
+    }>) => React.ReactElement;
+};
+declare const Image: ImageComponent;
+declare const _default$7: ImageComponent & {
+    profileImage: typeof Image.profileImage;
+};
+
+type LoaderName = "";
+type LoaderConfig = Record<LoaderName, boolean | undefined> & {
+    [key: string]: boolean | undefined;
+};
+
+type ButtonProps<Value> = {
+    text?: string;
+    value?: Value;
+    href?: string;
+    download?: string;
+    target?: React.ComponentProps<"a">["target"];
+    icon?: IconName | AnyOtherString;
+    /** @default "left" */
+    iconPosition?: "left" | "right";
+    /** @default Same as text color */
+    iconColor?: string;
+    /** @default 16 */
+    iconSize?: number;
+    image?: AssetName | AnyOtherString;
+    /** @default "left" */
+    imagePosition?: "left" | "right";
+    /** @default 16 */
+    imageWidth?: number;
+    /** @default undefined */
+    imageHeight?: number;
+    loaderName?: LoaderName | AnyOtherString;
+    /** @default 16 */
+    loaderSize?: number;
+    /** @default false */
+    isLoading?: boolean;
+    /** @default false */
+    disabled?: boolean;
+    /** @default false */
+    isSmall?: boolean;
+    /** @default false */
+    isSubmit?: boolean;
+    onClickWithValue?: (value: Value) => void;
+} & OmitProps<React.ComponentProps<"button">, "style" | "defaultValue" | "translate" | "value"> & ComponentStyle & ComponentHoverStyle;
+type ButtonComponent = {
+    <Value>(props: ButtonProps<Value>): React.ReactElement;
+    secondary: <Value>(props: ButtonProps<Value>) => React.ReactElement;
+    destructive: <Value>(props: ButtonProps<Value>) => React.ReactElement;
+    icon: <Value>(props: OmitProps<ButtonProps<Value>, "icon" | "width" | "height" | "isSmall"> & {
+        icon: IconName | AnyOtherString;
+        /** @default 16 */
+        size?: number;
+        /** @default "#000000" */
+        backgroundButtonColor?: string;
+    }) => React.ReactElement;
+    upload: <Value>(props: OmitProps<ButtonProps<Value>, "onClick"> & {
+        accept?: ComponentProps<"input">["accept"];
+        /** @default false */
+        multiple?: boolean;
+        onUpload?: (files: FileList | null) => void;
+    }) => React.ReactElement;
+};
+declare const ButtonComponent: ButtonComponent;
+declare const Button: typeof ButtonComponent & {
+    secondary: typeof ButtonComponent.secondary;
+    destructive: typeof ButtonComponent.destructive;
+    icon: typeof ButtonComponent.icon;
+    upload: typeof ButtonComponent.upload;
+};
+
+type DividerProps = {
+    /** @default 1 */
+    width?: number;
+    /** @default border */
+    backgroundColor?: string;
+} & ComponentMarginProps;
+type VerticalDividerProps = DividerProps & {
+    /** @default "100%" */
+    height?: number;
+};
+type HorizontalDividerProps = DividerProps & {
+    text?: string;
+    /** @default textSecondary */
+    textColor?: string;
+};
+declare const _default$6: {
+    vertical: React$1.NamedExoticComponent<VerticalDividerProps>;
+    horizontal: React$1.NamedExoticComponent<HorizontalDividerProps>;
+};
+
+type ModalProps = {
+    /**
+     * If you want to have a small modal, you can use 660px as it looks good on most screens.
+     *
+     * @default 30% smaller than app.contentMaxWidth
+     * */
+    maxWidth?: number;
+    title?: string;
+    titleColor?: string;
+    description?: string;
+    descriptionColor?: string;
+    headerBackgroundColor?: string;
+    /** @requires ReactRouterDomPlugin */
+    name?: string;
+    overflow?: React.CSSProperties["overflow"];
+    onOpen?: () => void;
+    onClose?: () => void;
+    children?: React.ReactNode;
+};
+type ModalRef = {
+    open: () => void;
+    close: () => void;
+    isOpened: boolean;
+};
+type ModalComponent = {
+    (props: ComponentPropWithRef<ModalRef, ModalProps>): React.ReactElement;
+    confirmation: (props: ComponentPropWithRef<ModalRef, OmitProps<ModalProps, "maxWidth" | "children" | "overflow"> & {
+        continueButtonLoaderName?: LoaderName | AnyOtherString;
+        onContinue?: () => void;
+        onCancel?: () => void;
+    }>) => React.ReactElement;
+    destructive: (props: ComponentPropWithRef<ModalRef, OmitProps<ModalProps, "maxWidth" | "children" | "overflow"> & {
+        deleteButtonLoaderName?: LoaderName | AnyOtherString;
+        onDelete?: () => void;
+        onCancel?: () => void;
+    }>) => React.ReactElement;
+};
+declare const ModalComponent: ModalComponent;
+declare const Modal: typeof ModalComponent & {
+    confirmation: typeof ModalComponent.confirmation;
+    destructive: typeof ModalComponent.destructive;
+};
+
+type PageHolderProps = {
+    /** @default false */
+    noMaxContentWidth?: boolean;
+    children?: React.ReactNode;
+};
+declare function PageHolder({ noMaxContentWidth, children }: PageHolderProps): react_jsx_runtime.JSX.Element;
+declare const _default$5: React$1.MemoExoticComponent<typeof PageHolder>;
+
+type PageHeaderProps = {
+    imageUrl?: string;
+    imageSize?: number;
+    title?: string;
+    titleAs?: TextAs;
+    titleRightElement?: React__default.ReactNode;
+    description?: string;
+    textAlign?: React__default.CSSProperties["textAlign"];
+    rightElement?: React__default.ReactNode;
+    /** @default false */
+    lightMode?: boolean;
+} & Pick<ComponentMarginProps, "marginBottom">;
+declare function PageHeader({ imageUrl, imageSize, title, titleAs, titleRightElement, description, textAlign, rightElement, lightMode, marginBottom, }: PageHeaderProps): react_jsx_runtime.JSX.Element;
+declare const _default$4: React__default.MemoExoticComponent<typeof PageHeader>;
+
+type ChipProps = {
+    text: string;
+    /** @default theme.colors.textPrimary */
+    color?: string;
+    /** @default backgroundSecondary */
+    backgroundColor?: string;
+    /** @default theme.styles.borderRadius / 1.3 */
+    borderRadius?: number;
+};
+type ChipComponentType = {
+    (props: ComponentPropWithRef<HTMLDivElement, ChipProps>): React.ReactElement;
+    circle: (props: ComponentPropWithRef<HTMLDivElement, OmitProps<ChipProps, "borderRadius">>) => React.ReactElement;
+};
+declare const ChipComponent: ChipComponentType;
+declare const Chip: typeof ChipComponent & {
+    circle: typeof ChipComponent.circle;
+};
+
+type InputFieldProps = {
+    label?: string;
+    labelColor?: string;
+    errorText?: string;
+    infoText?: string;
+    leftIcon?: IconName | AnyOtherString;
+    rightIcon?: IconName | AnyOtherString;
+    insideInputFieldComponent?: React__default.ReactNode;
+    /** @default false */
+    withDebounce?: boolean;
+    /** @default 0.5s */
+    debounceDelay?: number;
+    onChangeValue?: (value: string) => void;
+    onClickRightIcon?: () => void;
+    holderRef?: React__default.ForwardedRef<HTMLDivElement>;
+} & OmitProps<React__default.ComponentProps<"input">, "style" | "ref"> & ComponentStyle & ComponentHoverStyle;
+type TextareaFieldProps = OmitProps<InputFieldProps, "type"> & OmitProps<React__default.ComponentProps<"textarea">, "style" | "ref">;
+type InputFieldComponentType = {
+    (props: ComponentPropWithRef<HTMLInputElement, InputFieldProps>): React__default.ReactElement;
+    multiline: (props: ComponentPropWithRef<HTMLTextAreaElement, TextareaFieldProps>) => React__default.ReactElement;
+    email: (props: ComponentPropWithRef<HTMLInputElement, InputFieldProps>) => React__default.ReactElement;
+    password: (props: ComponentPropWithRef<HTMLInputElement, InputFieldProps>) => React__default.ReactElement;
+    search: (props: ComponentPropWithRef<HTMLInputElement, InputFieldProps>) => React__default.ReactElement;
+    phoneNumber: (props: ComponentPropWithRef<HTMLInputElement, OmitProps<InputFieldProps, "type">>) => React__default.ReactElement;
+    date: (props: ComponentPropWithRef<HTMLInputElement, InputFieldProps>) => React__default.ReactElement;
+    dateTime: (props: ComponentPropWithRef<HTMLInputElement, InputFieldProps>) => React__default.ReactElement;
+    time: (props: ComponentPropWithRef<HTMLInputElement, InputFieldProps>) => React__default.ReactElement;
+};
+declare const InputFieldComponent: InputFieldComponentType;
+declare const InputField: typeof InputFieldComponent & {
+    multiline: typeof InputFieldComponent.multiline;
+    email: typeof InputFieldComponent.email;
+    password: typeof InputFieldComponent.password;
+    search: typeof InputFieldComponent.search;
+    phoneNumber: typeof InputFieldComponent.phoneNumber;
+    date: typeof InputFieldComponent.date;
+    dateTime: typeof InputFieldComponent.dateTime;
+    time: typeof InputFieldComponent.time;
+};
+
+type DropdownOption<Value, Data = unknown> = {
+    value: Value;
+    label: string;
+    /** @default false */
+    disabled?: boolean;
+    searchValues?: string[];
+    data?: Data;
+};
+type DropdownProps<Value, Data = unknown> = {
+    label?: string;
+    labelColor?: string;
+    errorText?: string;
+    infoText?: string;
+    /** @default false */
+    required?: boolean;
+    /** @default false */
+    disabled?: boolean;
+    options: DropdownOption<Value, Data>[];
+    value?: Value;
+    defaultValue?: Value;
+    placeholder?: string;
+    leftIcon?: IconName | AnyOtherString;
+    inputFieldClassName?: string;
+    /** @default false */
+    withSearch?: boolean;
+    /** @default false */
+    withDebounce?: boolean;
+    /** @default 0.5s */
+    debounceDelay?: number;
+    /** @default false */
+    debounceIsLoading?: boolean;
+    debounceMinimumSymbolsRequired?: number;
+    /** @default false */
+    withoutClearButton?: boolean;
+    onChange?: (value: Value | undefined) => void;
+    onChangeSearch?: (query: string) => void;
+    renderOption?: (option: DropdownOption<Value, Data>, index: number, isSelected: boolean) => React.ReactNode;
+} & OmitProps<DivProps<unknown>, "onChange" | "defaultChecked">;
+type DropdownComponentType = {
+    <Value, Data>(props: ComponentPropWithRef<HTMLDivElement, DropdownProps<Value, Data>>): React.ReactElement;
+};
+declare const DropdownComponent: DropdownComponentType;
+declare const Dropdown: typeof DropdownComponent & {};
+
+type ToggleInputRef = {};
+type InternalToggleInputProps<Value> = {
+    label?: string;
+    labelColor?: string;
+    text?: string;
+    errorText?: string;
+    infoText?: string;
+    value?: Value;
+    onChange?: (checked: boolean, value?: Value) => void;
+} & OmitProps<React.ComponentProps<"input">, "style" | "value" | "ref" | "onChange"> & ComponentStyle & ComponentHoverStyle;
+type ToggleInputProps<Value> = ComponentPropWithRef<ToggleInputRef, OmitProps<InternalToggleInputProps<Value>, "type">>;
+type ToggleInputComponentType = <Value>(props: ToggleInputProps<Value>) => React.ReactElement;
+declare const _default$3: {
+    checkbox: ToggleInputComponentType;
+    radiobutton: ToggleInputComponentType;
+    switch: ToggleInputComponentType;
+};
+
+declare function usePageResize(): {
+    width: number;
+    height: number;
+};
+declare function usePageScroll(): {
+    scrollX: number;
+    scrollY: number;
+};
+declare function useMediaQuery(): {
+    size320: boolean;
+    size400: boolean;
+    size500: boolean;
+    size600: boolean;
+    size700: boolean;
+    size800: boolean;
+    size900: boolean;
+    size1000: boolean;
+    size1100: boolean;
+    size1200: boolean;
+    size1300: boolean;
+    size1400: boolean;
+    size1500: boolean;
+    size1600: boolean;
+};
+declare function useBooleanState(initialValue?: boolean): [
+    state: boolean,
+    actions: {
+        setState: React.Dispatch<React.SetStateAction<boolean>>;
+        setTrue: () => void;
+        setFalse: () => void;
+        toggle: () => void;
+    }
+];
+declare function useDebounceState<Value>(initialValue: Value, delay?: number): [value: Value, debouncedValue: Value, setValue: React.Dispatch<React.SetStateAction<Value>>, isLoading: boolean];
+declare function useForm<FormFields extends Record<string | number, string | number | boolean | undefined>>(options: {
+    defaultValues: FormFields;
+    requiredFields?: (keyof FormFields)[];
+    onSubmit?: (values: FormFields) => void | Promise<void>;
+    validate?: (values: FormFields) => PartialRecord<keyof FormFields, string>;
+}): {
+    values: FormFields;
+    errors: Partial<Record<keyof FormFields, string>>;
+    isSubmitting: boolean;
+    setFieldValue: <FieldName extends keyof FormFields>(field: FieldName, value: FormFields[FieldName] | undefined) => void;
+    setFieldsValue: (values: Partial<FormFields>) => void;
+    getInputFieldProps: <FieldName extends keyof FormFields>(field: FieldName) => ComponentPropWithRef<HTMLInputElement, InputFieldProps>;
+    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;
+    requiredFields: (keyof FormFields)[] | undefined;
+    isDirty: boolean;
+    isValid: boolean;
+    canSubmit: boolean;
+};
+declare function useUrlQuery(): {
+    setQuery: (query: Record<string, string | number>, keepHistory?: boolean) => void;
+    getQuery: (name: string) => string | null;
+    removeQuery: (name: string, keepHistory?: boolean) => void;
+};
+
+type FormProps = {
+    form?: OmitProps<ReturnType<typeof useForm>, "focusField">;
+    submitButtonText?: string;
+    submitButtonLoaderName?: LoaderName | AnyOtherString;
+    submitButtonId?: string;
+    /** @default false */
+    submitButtonIsDisabled?: boolean;
+    /** @default "right" */
+    actionButtonsLocation?: "left" | "center" | "right";
+    gap?: React.CSSProperties["gap"];
+    /** @default false */
+    isSubmitting?: boolean;
+    /** @default false */
+    isDestructive?: boolean;
+    onClickCancel?: () => void;
+    onSubmit?: (value: React.FormEvent<HTMLFormElement>) => void;
+    children?: React.ReactNode;
+} & ComponentMarginProps;
+declare function Form({ form, submitButtonText, submitButtonLoaderName, submitButtonId, submitButtonIsDisabled, actionButtonsLocation, gap, isSubmitting, isDestructive, onClickCancel, onSubmit, children, ...props }: FormProps): react_jsx_runtime.JSX.Element;
+declare const _default$2: React$1.MemoExoticComponent<typeof Form>;
+
+type LabelProps = {
+    text?: string;
+    /** @default false */
+    required?: boolean;
+    /** @default false */
+    isError?: boolean;
+    color?: string;
+};
+declare function Label({ text, required, isError, color }: LabelProps): react_jsx_runtime.JSX.Element;
+declare const _default$1: React$1.MemoExoticComponent<typeof Label>;
+
+type FormRowProps = {
+    oneItemOnly?: boolean;
+    /**
+     * @description Weather to break the two items into two separate lines on mobile or not
+     * @default false
+     */
+    noBreakingPoint?: boolean;
+    gap?: React.CSSProperties["gap"];
+    children?: React.ReactNode;
+} & ComponentMarginProps;
+type FormRowComponentType = {
+    (props: ComponentPropWithRef<HTMLDivElement, FormRowProps>): React.ReactElement;
+    withTitle: (props: ComponentPropWithRef<HTMLDivElement, FormRowProps & {
+        icon?: IconName | AnyOtherString;
+        title?: string;
+        description?: string;
+        withActions?: boolean;
+        saveButtonLoaderName?: LoaderName | AnyOtherString;
+        resetButtonLoaderName?: LoaderName | AnyOtherString;
+        onClickSave?: () => void;
+        onClickReset?: () => void;
+    }>) => React.ReactElement;
+};
+declare const FormRowComponent: FormRowComponentType;
+declare const FormRow: typeof FormRowComponent & {
+    withTitle: typeof FormRowComponent.withTitle;
+};
+
+type ColorThemeSwitchProps = {
+    /** @default false */
+    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;
+};
+
+type TextColumn<DataItem> = {
+    type: "text";
+    keyName?: keyof DataItem;
+    format?: (item: DataItem, index: number) => string;
+};
+type ElementColumn<DataItem> = {
+    type: "element";
+    render?: (item: DataItem, index: number) => ReactNode;
+};
+type ImageColumn<DataItem> = {
+    type: "image";
+    keyName?: keyof DataItem;
+} & ImageProps;
+type CheckboxColumn = {
+    type: "checkbox";
+} & ToggleInputProps<boolean>;
+type TableColumn<DataItem> = {
+    label?: string;
+    width?: string | number;
+    minWidth?: string | number;
+    maxWidth?: string | number;
+    align?: "left" | "center" | "right";
+} & (TextColumn<DataItem> | ElementColumn<DataItem> | ImageColumn<DataItem> | CheckboxColumn);
+type TableProps<DataItem> = {
+    columns: TableColumn<DataItem>[];
+    data: DataItem[];
+    /** @default false */
+    isStriped?: boolean;
+    /** @default false */
+    withStickyHeader?: boolean;
+    /** @default "No data available" */
+    noDataItemsMessage?: string;
+    onClickRow?: (item: DataItem, index: number) => void;
+    onClickAllCheckboxes?: (checked: boolean) => void;
+} & ComponentMarginProps;
+type TableComponentType = {
+    <DataItem>(props: ComponentPropWithRef<HTMLDivElement, TableProps<DataItem>>): React.ReactElement;
+};
+declare const TableComponent: TableComponentType;
+declare const Table: typeof TableComponent;
+
+type AppConfig = {
+    contentMaxWidth: number;
+};
+type ComponentConfig<Subcomponents extends string> = {
+    [key in Subcomponents]?: ComponentStyle & ComponentHoverStyle;
+};
+type BetterHtmlConfig = {
+    app: AppConfig;
+    theme: ThemeConfig;
+    colorTheme: ColorTheme;
+    icons: Partial<IconsConfig>;
+    assets: Partial<AssetsConfig>;
+    loaders: Partial<LoaderConfig>;
+    components: {
+        button?: ComponentConfig<"default" | "secondary" | "destructive" | "icon" | "upload">;
+    };
+};
+
+declare const useBetterHtmlContext: () => BetterHtmlConfig;
+declare const useTheme: () => {
+    colors: Colors;
+    styles: Styles;
+};
+declare const useLoader: (loaderName?: LoaderName | AnyOtherString) => boolean;
+declare const useLoaderControls: () => {
+    startLoading: (loaderName: LoaderName | AnyOtherString) => void;
+    stopLoading: (loaderName: LoaderName | AnyOtherString) => void;
+};
+type BetterHtmlProviderValue = DeepPartialRecord<OmitProps<BetterHtmlConfig, "colorTheme">>;
+type BetterHtmlProviderProps = {
+    value?: BetterHtmlProviderValue;
+    plugins?: BetterHtmlPlugin[];
+    children?: React.ReactNode;
+};
+declare function BetterHtmlProvider({ value, plugins: pluginsToUse, children }: BetterHtmlProviderProps): react_jsx_runtime.JSX.Element;
+declare const _default: React$1.MemoExoticComponent<typeof BetterHtmlProvider>;
+
+type BrowserName = "firefox" | "chrome" | "safari" | "edge" | "opera";
+
+declare const generateRandomString: (stringLength: number, options?: {
+    /** @default true */
+    includeCapitalLetters?: boolean;
+    /** @default true */
+    includeLowerLetters?: boolean;
+    /** @default true */
+    includeNumbers?: boolean;
+    /** @default 1 */
+    dashSections?: number;
+}) => string;
+declare const getBrowser: () => BrowserName | undefined;
+declare const formatPhoneNumber: (phoneNumber: string) => string;
+declare const getFormErrorObject: <FormFields extends ReturnType<typeof useForm>["values"]>(formValues: FormFields) => PartialRecord<keyof FormFields, string>;
+
+declare const loaderControls: {
+    startLoading: (loaderName: LoaderName | AnyOtherString) => void;
+    stopLoading: (loaderName: LoaderName | AnyOtherString) => void;
+};
+
+declare const isMobileDevice: boolean;
+
+declare const reactRouterDomPlugin: BetterHtmlPlugin;
+
+export { type AppConfig, type AssetName, type AssetsConfig, type BetterHtmlConfig, type BetterHtmlPlugin, _default as BetterHtmlProvider, type BetterHtmlProviderValue, type BrowserName, Button, type ButtonProps, Chip, type ChipProps, type Color, type ColorName, type ColorTheme, ColorThemeSwitch, type ColorThemeSwitchProps, type Colors, type DeepPartialRecord, Div, type DivProps, _default$6 as Divider, Dropdown, type DropdownOption, type DropdownProps, type ExcludeOptions, _default$2 as Form, type FormProps, FormRow, type FormRowProps, type HorizontalDividerProps, _default$8 as Icon, type IconName, type IconProps, type IconsConfig, _default$7 as Image, type ImageProps, InputField, type InputFieldProps, _default$1 as Label, type LabelProps, Loader, type LoaderConfig, type LoaderName, type LoaderProps, Modal, type ModalProps, type ModalRef, type OmitProps, _default$4 as PageHeader, type PageHeaderProps, _default$5 as PageHolder, type PageHolderProps, type PartialRecord, type PickAllRequired, type PickValue, type PluginName, type Styles, Table, type TableColumn, Text, type TextAs, type TextProps, type TextareaFieldProps, type Theme, type ThemeConfig, _default$3 as ToggleInput, type ToggleInputProps, type ToggleInputRef, type VerticalDividerProps, formatPhoneNumber, generateRandomString, getBrowser, getFormErrorObject, isMobileDevice, loaderControls, reactRouterDomPlugin, useBetterHtmlContext, useBooleanState, useDebounceState, useForm, useLoader, useLoaderControls, useMediaQuery, usePageResize, usePageScroll, useTheme, useUrlQuery };