react-better-html 1.1.216 → 1.1.218

package/dist/index.d.ts

@@ -1,7 +1,9 @@
-import { WebTarget } from 'styled-components';
+import { Color, BetterCoreProviderConfig, DeepPartialRecord, BetterCoreConfig, OmitProps, IconName, AnyOtherString, PartialRecord, AssetName, LoaderName, PickValue, Country } from 'react-better-core';
+export { AnyOtherString, AssetName, AssetsConfig, Color, ColorName, ColorTheme, Colors, Country, DeepPartialRecord, ExcludeOptions, IconName, IconsConfig, LoaderConfig, LoaderName, OmitProps, PartialRecord, PickAllRequired, PickValue, Styles, Theme, ThemeConfig, colorThemeControls, countries, darkenColor, desaturateColor, eventPreventDefault, eventPreventStop, eventStopPropagation, formatPhoneNumber, generateRandomString, getPluralWord, lightenColor, loaderControls, saturateColor, useBooleanState, useDebounceState, useLoader, useLoaderControls, useTheme } from 'react-better-core';
 import * as react from 'react';
 import { ComponentProps, ReactNode } from 'react';
 import * as react_jsx_runtime from 'react/jsx-runtime';
+import { WebTarget } from 'styled-components';
 import { useNavigate, useLocation, useInRouterContext, useSearchParams, createSearchParams } from 'react-router-dom';
 
 type PluginName = "alerts" | "react-router-dom" | "localStorage";
@@ -22,21 +24,263 @@ 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 ComponentStyleConfig<Subcomponents extends string> = {
+    [key in Subcomponents]?: ComponentStyle & ComponentHoverStyle;
+};
+type ComponentTagReplacementConfig<Subcomponents extends string> = {
+    [key in Subcomponents]?: React.ElementType;
+};
+type AppConfig = {
+    contentMaxWidth: number;
+};
+type BetterHtmlConfig = {
+    app: AppConfig;
+    sideMenuIsCollapsed: boolean;
+    sideMenuIsOpenMobile: boolean;
+    components: {
+        button?: {
+            style?: ComponentStyleConfig<"default" | "secondary" | "destructive" | "icon" | "upload">;
+            tagReplacement?: ComponentTagReplacementConfig<"buttonComponent" | "linkComponent">;
+        };
+        sideMenu?: {
+            /** @default 300 */
+            width?: number;
+        };
+    };
+};
+
+type AlertType = "info" | "success" | "warning" | "error";
+type AlertDuration = number | "auto";
+type AlertDisplay = "default" | "prominent";
+type Alert = {
+    id: string;
+    type: AlertType;
+    /** @default "default" */
+    display?: AlertDisplay;
+    title?: string;
+    message?: string;
+    /** @default "auto" */
+    duration?: AlertDuration;
+    onClose?: (alert: Alert) => void;
+};
+
+type TabGroup = {
+    name: string;
+    selectedTab: string;
+};
+type TabsProps = {
+    tabs: string[];
+    name?: string;
+    accentColor?: Color;
+    style?: "default" | "borderRadiusTop" | "box";
+    onChange?: (tab: string) => void;
+    children?: React.ReactNode;
+} & ComponentMarginProps;
+type TabsRef = {
+    selectedTab: string;
+    selectTab: (tab: string) => void;
+};
+type TabsComponent = {
+    (props: ComponentPropWithRef<TabsRef, TabsProps>): React.ReactElement;
+    content: (props: TabsContentProps) => React.ReactElement;
+};
+declare const TabsComponent: TabsComponent;
+type TabsContentProps = {
+    tab: string;
+    tabWithDot?: boolean;
+    tabsGroupName?: string;
+    isInitialTab?: boolean;
+    children?: React.ReactNode;
+};
+declare const Tabs: typeof TabsComponent & {
+    content: typeof TabsComponent.content;
+};
+
+declare const useBetterHtmlContext: () => BetterHtmlConfig & BetterCoreConfig;
+declare const useAlertControls: () => {
+    createAlert: (alert: OmitProps<Alert, "id">) => Alert;
+    removeAlert: (alertId: string) => void;
+};
+type BetterHtmlProviderInternalConfig = DeepPartialRecord<BetterHtmlConfig>;
+type BetterProviderCommonProps = {
+    plugins?: BetterHtmlPlugin[];
+    children?: React.ReactNode;
+};
+type BetterHtmlProviderConfig = BetterCoreProviderConfig & BetterHtmlProviderInternalConfig;
+type BetterHtmlProviderProps = BetterProviderCommonProps & {
+    config?: BetterHtmlProviderConfig;
+};
+declare function BetterHtmlProvider({ config, ...props }: BetterHtmlProviderProps): react_jsx_runtime.JSX.Element;
+declare const _default$5: react.MemoExoticComponent<typeof BetterHtmlProvider>;
+
+declare const isMobileDevice: boolean;
+
+type BrowserName = "firefox" | "chrome" | "safari" | "edge" | "opera";
+
+type InputFieldProps = {
+    label?: string;
+    labelColor?: string;
+    errorText?: string;
+    infoText?: string;
+    leftIcon?: IconName | AnyOtherString;
+    rightIcon?: IconName | AnyOtherString;
+    prefix?: React.ReactNode;
+    prefixBackgroundColor?: string;
+    suffix?: React.ReactNode;
+    suffixBackgroundColor?: string;
+    insideInputFieldBeforeComponent?: React.ReactNode;
+    insideInputFieldAfterComponent?: React.ReactNode;
+    /** @default false */
+    withDebounce?: boolean;
+    /** @default 0.5s */
+    debounceDelay?: number;
+    onChangeValue?: (value: string) => void;
+    onClickRightIcon?: () => void;
+    holderRef?: React.ForwardedRef<HTMLDivElement>;
+} & OmitProps<React.ComponentProps<"input">, "style" | "ref" | "prefix"> & ComponentStyle & ComponentHoverStyle;
+type TextareaFieldProps = OmitProps<InputFieldProps, "type"> & OmitProps<React.ComponentProps<"textarea">, "style" | "ref">;
+type InputFieldComponentType = {
+    (props: ComponentPropWithRef<HTMLInputElement, InputFieldProps>): React.ReactElement;
+    multiline: (props: ComponentPropWithRef<HTMLTextAreaElement, TextareaFieldProps>) => React.ReactElement;
+    email: (props: ComponentPropWithRef<HTMLInputElement, InputFieldProps>) => React.ReactElement;
+    password: (props: ComponentPropWithRef<HTMLInputElement, OmitProps<InputFieldProps, "autoComplete"> & {
+        /** @default "current-password" */
+        autoComplete?: React.ComponentProps<"input">["autoComplete"];
+    }>) => React.ReactElement;
+    search: (props: ComponentPropWithRef<HTMLInputElement, InputFieldProps>) => React.ReactElement;
+    phoneNumber: (props: ComponentPropWithRef<HTMLInputElement, OmitProps<InputFieldProps, "type" | "prefix">>) => React.ReactElement;
+    date: (props: ComponentPropWithRef<HTMLInputElement, InputFieldProps & {
+        minDate?: Date;
+        maxDate?: Date;
+    }>) => React.ReactElement;
+    dateTime: (props: ComponentPropWithRef<HTMLInputElement, InputFieldProps & {
+        minDate?: Date;
+        maxDate?: Date;
+        /** @default today */
+        defaultDateAfterTimePick?: `${number}-${number}-${number}`;
+        /** @default "00:00" */
+        defaultTimeAfterDatePick?: `${number}:${number}`;
+    }>) => React.ReactElement;
+    time: (props: ComponentPropWithRef<HTMLInputElement, InputFieldProps>) => React.ReactElement;
+    color: (props: ComponentPropWithRef<HTMLInputElement, InputFieldProps>) => React.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;
+    color: typeof InputFieldComponent.color;
+};
+
+type ToggleInputRef = {};
+type InternalToggleInputProps<Value> = {
+    label?: string;
+    labelColor?: string;
+    text?: string;
+    textAdvanced?: React.ReactNode;
+    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$4: {
+    checkbox: ToggleInputComponentType;
+    radiobutton: ToggleInputComponentType;
+    switch: ToggleInputComponentType;
+};
+
+declare function usePageResize(): {
+    width: number;
+    height: number;
+};
+declare function usePageScroll(): {
+    scrollX: number;
+    scrollY: number;
+};
+declare function useMediaQuery(): {
+    screenWidth: number;
+    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;
+};
+type FormFieldValue = string | number | boolean;
+declare function useForm<FormFields extends Record<string | number, FormFieldValue | FormFieldValue[] | 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) => any;
+    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;
+    inputFieldRefs: Record<keyof FormFields, HTMLInputElement | undefined>;
+    textAreaRefs: Record<keyof FormFields, HTMLTextAreaElement | undefined>;
+    dropdownRefs: Record<keyof FormFields, HTMLDivElement | undefined>;
+    toggleInputRefs: Record<keyof FormFields, ToggleInputRef | undefined>;
+    validate: () => {};
+    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;
+};
+
+declare const getBrowser: () => BrowserName | undefined;
+declare const getFormErrorObject: <FormFields extends ReturnType<typeof useForm>["values"]>(formValues: FormFields) => PartialRecord<keyof FormFields, string>;
+
+declare const alertControls: {
+    createAlert: (alert: OmitProps<Alert, "id">) => Alert;
+    removeAlert: (alertId: string) => void;
+};
+declare const sideMenuControls: {
+    expand: () => void;
+    collapse: () => void;
+    toggleExpanded: () => void;
+    open: () => void;
+    close: () => void;
+    toggleOpened: () => void;
+};
+declare const filterHover: () => Record<"z05" | "z1" | "z2" | "z3", React.CSSProperties["filter"]>;
+
+declare function generateLocalStorage<LocalStorage extends object>(): {
+    setItem: <StorageName extends keyof LocalStorage>(name: StorageName, value: LocalStorage[StorageName]) => void;
+    getItem: <StorageName extends keyof LocalStorage>(name: StorageName) => LocalStorage[StorageName] | undefined;
+    removeItem: (name: keyof LocalStorage) => void;
+    removeAllItems: () => void;
+};
 
 type TextAs = "h1" | "h2" | "h3" | "h4" | "h5" | "h6" | "p" | "span" | "label";
 type TextProps<As extends TextAs = "p"> = {
@@ -56,8 +300,12 @@ declare const Text: typeof TextComponent & {
 };
 
 type PageHeaderProps = {
+    icon?: IconName | AnyOtherString;
+    image?: AssetName | AnyOtherString;
     imageUrl?: string;
     imageSize?: number;
+    /** @default false */
+    imageAzProfileImage?: boolean;
     title?: string;
     /** @default "h1" */
     titleAs?: TextAs;
@@ -111,26 +359,6 @@ declare const Div: typeof DivComponent & {
     box: typeof DivComponent.box;
 };
 
-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;
@@ -162,18 +390,6 @@ declare const Loader: typeof LoaderComponent & {
     text: typeof LoaderComponent.text;
 };
 
-type IconName = "XMark" | "uploadCloud" | "trash" | "chevronDown" | "chevronLeft" | "chevronRight" | "doubleChevronLeft" | "doubleChevronRight" | "eye" | "eyeDashed" | "magnifyingGlass" | "check" | "infoI" | "warningTriangle" | "filter";
-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 */
@@ -182,12 +398,7 @@ type IconProps = {
 type IconComponent = {
     (props: ComponentPropWithRef<SVGSVGElement, IconProps>): React.ReactElement;
 };
-declare const _default$5: IconComponent;
-
-type AssetName = "logo";
-type AssetsConfig = Record<AssetName, string> & {
-    [key: string]: string;
-};
+declare const _default$3: IconComponent;
 
 type ImageProps = {
     name?: AssetName | AnyOtherString;
@@ -202,15 +413,10 @@ type ImageComponent = {
     }>) => React.ReactElement;
 };
 declare const Image: ImageComponent;
-declare const _default$4: ImageComponent & {
+declare const _default$2: ImageComponent & {
     profileImage: typeof Image.profileImage;
 };
 
-type LoaderName = "";
-type LoaderConfig = Record<LoaderName, boolean | undefined> & {
-    [key: string]: boolean | undefined;
-};
-
 type ButtonProps<Value> = {
     text?: string;
     value?: Value;
@@ -290,7 +496,7 @@ type DividerComponentType = {
     vertical: (props: ComponentPropWithRef<HTMLDivElement, VerticalDividerProps>) => React.ReactElement;
     horizontal: (props: ComponentPropWithRef<HTMLDivElement, HorizontalDividerProps>) => React.ReactElement;
 };
-declare const _default$3: {
+declare const _default$1: {
     vertical: DividerComponentType["vertical"];
     horizontal: DividerComponentType["horizontal"];
 };
@@ -302,10 +508,12 @@ type ModalProps = {
      * @default 30% smaller than app.contentMaxWidth
      * */
     maxWidth?: number;
+    icon?: IconName | AnyOtherString;
     title?: string;
     titleColor?: React.CSSProperties["color"];
     description?: string;
     descriptionColor?: React.CSSProperties["color"];
+    headerTextAlign?: PickValue<NonNullable<React.CSSProperties["textAlign"]>, "left" | "center">;
     headerBackgroundColor?: React.CSSProperties["backgroundColor"];
     backgroundColor?: React.CSSProperties["backgroundColor"];
     /** @requires ReactRouterDomPlugin */
@@ -348,125 +556,57 @@ declare const Modal: typeof ModalComponent & {
     destructive: typeof ModalComponent.destructive;
 };
 
-type PageHolderProps = {
-    /** @default false */
-    noMaxContentWidth?: boolean;
-    backgroundColor?: React.CSSProperties["backgroundColor"];
-    backgroundImage?: React.CSSProperties["backgroundImage"];
-    children?: React.ReactNode;
-} & ComponentPaddingProps;
-type PageHolderComponentType = {
-    (props: ComponentPropWithRef<HTMLDivElement, PageHolderProps>): React.ReactElement;
-    center: (props: ComponentPropWithRef<HTMLDivElement, PageHolderProps & {
-        pageBackgroundColor?: React.CSSProperties["backgroundColor"];
-        pageBackgroundImage?: React.CSSProperties["backgroundImage"];
-        contentMaxWidth?: React.CSSProperties["maxWidth"];
-        /** @default true */
-        contentInsideBox?: boolean;
-        behindComponent?: React.ReactNode;
-        sideComponent?: React.ReactNode;
-        /** @default "right" */
-        sideComponentPosition?: "left" | "right";
-    }>) => React.ReactElement;
-};
-declare const PageHolderComponent: PageHolderComponentType;
-declare const PageHolder: typeof PageHolderComponent & {
-    center: typeof PageHolderComponent.center;
-};
-
-type ChipProps<Value = unknown> = {
-    text: string;
-    /** @default theme.colors.textPrimary */
-    color?: string;
-    /** @default backgroundSecondary */
-    backgroundColor?: string;
-    /** @default theme.styles.borderRadius / 1.3 */
-    borderRadius?: number;
-    /** @default false */
-    isCircle?: boolean;
-    value?: Value;
-    onClick?: (event: React.MouseEvent<HTMLDivElement, globalThis.MouseEvent>) => void;
-    onClickWithValue?: (value: Value) => void;
-} & Pick<DivProps, "border" | "borderColor" | "borderWidth" | "borderStyle"> & Pick<TextProps, "fontFamily" | "fontSize" | "fontWeight" | "fontStyle">;
-type ChipComponentType = {
-    <Value>(props: ComponentPropWithRef<HTMLDivElement, ChipProps<Value>>): React.ReactElement;
-    colored: <Value>(props: ComponentPropWithRef<HTMLDivElement, OmitProps<ChipProps<Value>, "color" | "backgroundColor"> & {
-        color?: string;
-        /** @default false */
-        withWhiteBackground?: boolean;
-    }>) => React.ReactElement;
-};
-declare const ChipComponent: ChipComponentType;
-declare const Chip: typeof ChipComponent & {
-    colored: typeof ChipComponent.colored;
-};
-
-type InputFieldProps = {
-    label?: string;
-    labelColor?: string;
-    errorText?: string;
-    infoText?: string;
-    leftIcon?: IconName | AnyOtherString;
-    rightIcon?: IconName | AnyOtherString;
-    prefix?: React.ReactNode;
-    prefixBackgroundColor?: string;
-    suffix?: React.ReactNode;
-    suffixBackgroundColor?: string;
-    insideInputFieldBeforeComponent?: React.ReactNode;
-    insideInputFieldAfterComponent?: React.ReactNode;
-    /** @default false */
-    withDebounce?: boolean;
-    /** @default 0.5s */
-    debounceDelay?: number;
-    onChangeValue?: (value: string) => void;
-    onClickRightIcon?: () => void;
-    holderRef?: React.ForwardedRef<HTMLDivElement>;
-} & OmitProps<React.ComponentProps<"input">, "style" | "ref" | "prefix"> & ComponentStyle & ComponentHoverStyle;
-type TextareaFieldProps = OmitProps<InputFieldProps, "type"> & OmitProps<React.ComponentProps<"textarea">, "style" | "ref">;
-type InputFieldComponentType = {
-    (props: ComponentPropWithRef<HTMLInputElement, InputFieldProps>): React.ReactElement;
-    multiline: (props: ComponentPropWithRef<HTMLTextAreaElement, TextareaFieldProps>) => React.ReactElement;
-    email: (props: ComponentPropWithRef<HTMLInputElement, InputFieldProps>) => React.ReactElement;
-    password: (props: ComponentPropWithRef<HTMLInputElement, OmitProps<InputFieldProps, "autoComplete"> & {
-        /** @default "current-password" */
-        autoComplete?: React.ComponentProps<"input">["autoComplete"];
-    }>) => React.ReactElement;
-    search: (props: ComponentPropWithRef<HTMLInputElement, InputFieldProps>) => React.ReactElement;
-    phoneNumber: (props: ComponentPropWithRef<HTMLInputElement, OmitProps<InputFieldProps, "type" | "prefix">>) => React.ReactElement;
-    date: (props: ComponentPropWithRef<HTMLInputElement, InputFieldProps & {
-        minDate?: Date;
-        maxDate?: Date;
-    }>) => React.ReactElement;
-    dateTime: (props: ComponentPropWithRef<HTMLInputElement, InputFieldProps & {
-        minDate?: Date;
-        maxDate?: Date;
-        /** @default today */
-        defaultDateAfterTimePick?: `${number}-${number}-${number}`;
-        /** @default "00:00" */
-        defaultTimeAfterDatePick?: `${number}:${number}`;
+type PageHolderProps = {
+    /** @default false */
+    noMaxContentWidth?: boolean;
+    backgroundColor?: React.CSSProperties["backgroundColor"];
+    backgroundImage?: React.CSSProperties["backgroundImage"];
+    children?: React.ReactNode;
+} & ComponentPaddingProps;
+type PageHolderComponentType = {
+    (props: ComponentPropWithRef<HTMLDivElement, PageHolderProps>): React.ReactElement;
+    center: (props: ComponentPropWithRef<HTMLDivElement, PageHolderProps & {
+        pageBackgroundColor?: React.CSSProperties["backgroundColor"];
+        pageBackgroundImage?: React.CSSProperties["backgroundImage"];
+        contentMaxWidth?: React.CSSProperties["maxWidth"];
+        /** @default true */
+        contentInsideBox?: boolean;
+        behindComponent?: React.ReactNode;
+        sideComponent?: React.ReactNode;
+        /** @default "right" */
+        sideComponentPosition?: "left" | "right";
     }>) => React.ReactElement;
-    time: (props: ComponentPropWithRef<HTMLInputElement, InputFieldProps>) => React.ReactElement;
-    color: (props: ComponentPropWithRef<HTMLInputElement, InputFieldProps>) => React.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;
-    color: typeof InputFieldComponent.color;
+declare const PageHolderComponent: PageHolderComponentType;
+declare const PageHolder: typeof PageHolderComponent & {
+    center: typeof PageHolderComponent.center;
 };
 
-type Country = {
-    code: string;
-    name: string;
-    timeZone: string;
-    phoneNumberExtension: string;
-    phoneNumberFormat?: string;
+type ChipProps<Value = unknown> = {
+    text: string;
+    /** @default theme.colors.textPrimary */
+    color?: string;
+    /** @default backgroundSecondary */
+    backgroundColor?: string;
+    /** @default theme.styles.borderRadius / 1.3 */
+    borderRadius?: number;
+    /** @default false */
+    isCircle?: boolean;
+    value?: Value;
+    onClick?: (event: React.MouseEvent<HTMLDivElement, globalThis.MouseEvent>) => void;
+    onClickWithValue?: (value: Value) => void;
+} & Pick<DivProps, "border" | "borderColor" | "borderWidth" | "borderStyle"> & Pick<TextProps, "fontFamily" | "fontSize" | "fontWeight" | "fontStyle">;
+type ChipComponentType = {
+    <Value>(props: ComponentPropWithRef<HTMLDivElement, ChipProps<Value>>): React.ReactElement;
+    colored: <Value>(props: ComponentPropWithRef<HTMLDivElement, OmitProps<ChipProps<Value>, "color" | "backgroundColor"> & {
+        color?: string;
+        /** @default false */
+        withWhiteBackground?: boolean;
+    }>) => React.ReactElement;
+};
+declare const ChipComponent: ChipComponentType;
+declare const Chip: typeof ChipComponent & {
+    colored: typeof ChipComponent.colored;
 };
 
 type DropdownOption<Value, Data = unknown> = {
@@ -535,97 +675,6 @@ declare const Dropdown: typeof DropdownComponent & {
     countries: typeof DropdownComponent.countries;
 };
 
-type ToggleInputRef = {};
-type InternalToggleInputProps<Value> = {
-    label?: string;
-    labelColor?: string;
-    text?: string;
-    textAdvanced?: React.ReactNode;
-    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$2: {
-    checkbox: ToggleInputComponentType;
-    radiobutton: ToggleInputComponentType;
-    switch: ToggleInputComponentType;
-};
-
-declare function usePageResize(): {
-    width: number;
-    height: number;
-};
-declare function usePageScroll(): {
-    scrollX: number;
-    scrollY: number;
-};
-declare function useMediaQuery(): {
-    screenWidth: number;
-    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];
-type FormFieldValue = string | number | boolean;
-declare function useForm<FormFields extends Record<string | number, FormFieldValue | FormFieldValue[] | 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) => any;
-    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;
-    inputFieldRefs: Record<keyof FormFields, HTMLInputElement | undefined>;
-    textAreaRefs: Record<keyof FormFields, HTMLTextAreaElement | undefined>;
-    dropdownRefs: Record<keyof FormFields, HTMLDivElement | undefined>;
-    toggleInputRefs: Record<keyof FormFields, ToggleInputRef | undefined>;
-    validate: () => {};
-    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">;
     name?: string;
@@ -669,7 +718,7 @@ type LabelProps = {
     htmlFor?: string;
 };
 declare function Label({ text, required, isError, color, htmlFor }: LabelProps): react_jsx_runtime.JSX.Element;
-declare const _default$1: react.MemoExoticComponent<typeof Label>;
+declare const _default: react.MemoExoticComponent<typeof Label>;
 
 type FormRowProps = {
     oneItemOnly?: boolean;
@@ -903,38 +952,6 @@ declare const Tooltip: typeof TooltipComponent & {
     sectionTitle: typeof TooltipComponent.sectionTitle;
 };
 
-type TabGroup = {
-    name: string;
-    selectedTab: string;
-};
-type TabsProps = {
-    tabs: string[];
-    name?: string;
-    accentColor?: Color;
-    style?: "default" | "borderRadiusTop" | "box";
-    onChange?: (tab: string) => void;
-    children?: React.ReactNode;
-} & ComponentMarginProps;
-type TabsRef = {
-    selectedTab: string;
-    selectTab: (tab: string) => void;
-};
-type TabsComponent = {
-    (props: ComponentPropWithRef<TabsRef, TabsProps>): React.ReactElement;
-    content: (props: TabsContentProps) => React.ReactElement;
-};
-declare const TabsComponent: TabsComponent;
-type TabsContentProps = {
-    tab: string;
-    tabWithDot?: boolean;
-    tabsGroupName?: string;
-    isInitialTab?: boolean;
-    children?: React.ReactNode;
-};
-declare const Tabs: typeof TabsComponent & {
-    content: typeof TabsComponent.content;
-};
-
 type FoldableProps = {
     isOpen?: boolean;
     defaultOpen?: boolean;
@@ -1031,127 +1048,6 @@ type PaginationComponentType = {
 declare const PaginationComponent: PaginationComponentType;
 declare const Pagination: typeof PaginationComponent & {};
 
-type AppConfig = {
-    contentMaxWidth: number;
-};
-type ComponentStyleConfig<Subcomponents extends string> = {
-    [key in Subcomponents]?: ComponentStyle & ComponentHoverStyle;
-};
-type ComponentTagReplacementConfig<Subcomponents extends string> = {
-    [key in Subcomponents]?: React.ElementType;
-};
-type BetterHtmlConfig = {
-    app: AppConfig;
-    theme: ThemeConfig;
-    colorTheme: ColorTheme;
-    icons: Partial<IconsConfig>;
-    assets: Partial<AssetsConfig>;
-    loaders: Partial<LoaderConfig>;
-    sideMenuIsCollapsed: boolean;
-    sideMenuIsOpenMobile: boolean;
-    components: {
-        button?: {
-            style?: ComponentStyleConfig<"default" | "secondary" | "destructive" | "icon" | "upload">;
-            tagReplacement?: ComponentTagReplacementConfig<"buttonComponent" | "linkComponent">;
-        };
-        sideMenu?: {
-            /** @default 300 */
-            width?: number;
-        };
-    };
-};
-
-type AlertType = "info" | "success" | "warning" | "error";
-type AlertDuration = number | "auto";
-type Alert = {
-    id: string;
-    type: AlertType;
-    title?: string;
-    message?: string;
-    duration?: AlertDuration;
-    onClose?: (alert: Alert) => void;
-};
-
-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;
-};
-declare const useAlertControls: () => {
-    createAlert: (alert: OmitProps<Alert, "id">) => Alert;
-    removeAlert: (alertId: string) => void;
-};
-type BetterHtmlProviderConfig = DeepPartialRecord<BetterHtmlConfig>;
-type BetterHtmlProviderProps = {
-    config?: BetterHtmlProviderConfig;
-    plugins?: BetterHtmlPlugin[];
-    children?: React.ReactNode;
-};
-declare function BetterHtmlProvider({ config, plugins, children }: BetterHtmlProviderProps): react_jsx_runtime.JSX.Element;
-declare const _default: 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 eventPreventDefault: (event: React.MouseEvent) => void;
-declare const eventStopPropagation: (event: React.MouseEvent) => void;
-declare const eventPreventStop: (event: React.MouseEvent) => void;
-declare const getPluralWord: (word: string, count: number) => string;
-
-declare const lightenColor: (hexColor: string, amount: number) => string;
-declare const darkenColor: (hexColor: string, amount: number) => string;
-declare const saturateColor: (hexColor: string, amount: number) => string;
-declare const desaturateColor: (hexColor: string, amount: number) => string;
-
-declare const loaderControls: {
-    startLoading: (loaderName: LoaderName | AnyOtherString) => void;
-    stopLoading: (loaderName: LoaderName | AnyOtherString) => void;
-};
-declare const alertControls: {
-    createAlert: (alert: OmitProps<Alert, "id">) => Alert;
-    removeAlert: (alertId: string) => void;
-};
-declare const sideMenuControls: {
-    expand: () => void;
-    collapse: () => void;
-    toggleExpanded: () => void;
-    open: () => void;
-    close: () => void;
-    toggleOpened: () => void;
-};
-declare const colorThemeControls: {
-    toggleTheme: (theme?: ColorTheme) => void;
-};
-declare const filterHover: () => Record<"z05" | "z1" | "z2" | "z3", React.CSSProperties["filter"]>;
-
-declare function generateLocalStorage<LocalStorage extends object>(): {
-    setItem: <StorageName extends keyof LocalStorage>(name: StorageName, value: LocalStorage[StorageName]) => void;
-    getItem: <StorageName extends keyof LocalStorage>(name: StorageName) => LocalStorage[StorageName] | undefined;
-    removeItem: (name: keyof LocalStorage) => void;
-    removeAllItems: () => void;
-};
-
-declare const countries: Country[];
-
-declare const isMobileDevice: boolean;
-
 type AlertsPluginOptions = {
     /** @default "bottom" */
     position?: "top" | "bottom";
@@ -1193,4 +1089,4 @@ type LocalStoragePluginOptions = {
 declare const defaultLocalStoragePluginOptions: Required<LocalStoragePluginOptions>;
 declare const localStoragePlugin: BetterHtmlPluginConstructor<LocalStoragePluginOptions>;
 
-export { type Alert, type AlertType, type AlertsPluginOptions, type AppConfig, type AssetName, type AssetsConfig, type BetterHtmlConfig, type BetterHtmlPlugin, _default as BetterHtmlProvider, type BetterHtmlProviderConfig, type BrowserName, Button, type ButtonProps, Chip, type ChipProps, type Color, type ColorName, type ColorTheme, ColorThemeSwitch, type ColorThemeSwitchProps, type Colors, type ComponentHoverStyle, type ComponentMarginProps, type ComponentPaddingProps, type DeepPartialRecord, Div, type DivProps, _default$3 as Divider, Dropdown, type DropdownOption, type DropdownProps, type ExcludeOptions, Foldable, type FoldableProps, type FoldableRef, Form, type FormProps, FormRow, type FormRowProps, type HorizontalDividerProps, _default$5 as Icon, type IconName, type IconProps, type IconsConfig, _default$4 as Image, type ImageProps, InputField, type InputFieldProps, _default$1 as Label, type LabelProps, Loader, type LoaderConfig, type LoaderName, type LoaderProps, type LocalStoragePluginOptions, Modal, type ModalProps, type ModalRef, type OmitProps, PageHeader, type PageHeaderProps, PageHolder, type PageHolderProps, Pagination, type PartialRecord, type PickAllRequired, type PickValue, type PluginName, type ReactRouterDomPluginOptions, SideMenu, type SideMenuItem, type Styles, type TabGroup, Table, type TableColumn, type TableFilterData, type TableListFilterListItem, type TableProps, type TableRef, Tabs, type TabsProps, type TabsRef, Text, type TextAs, type TextProps, type TextareaFieldProps, type Theme, type ThemeConfig, _default$2 as ToggleInput, type ToggleInputProps, type ToggleInputRef, Tooltip, type TooltipProps, type TooltipRef, type VerticalDividerProps, alertControls, alertsPlugin, colorThemeControls, countries, darkenColor, defaultAlertsPluginOptions, defaultLocalStoragePluginOptions, defaultReactRouterDomPluginOptions, desaturateColor, eventPreventDefault, eventPreventStop, eventStopPropagation, filterHover, formatPhoneNumber, generateLocalStorage, generateRandomString, getBrowser, getFormErrorObject, getPluralWord, isMobileDevice, lightenColor, loaderControls, localStoragePlugin, reactRouterDomPlugin, saturateColor, sideMenuControls, useAlertControls, useBetterHtmlContext, useBooleanState, useDebounceState, useForm, useLoader, useLoaderControls, useMediaQuery, usePageResize, usePageScroll, useTheme, useUrlQuery };
+export { type Alert, type AlertDisplay, type AlertDuration, type AlertType, type AlertsPluginOptions, type AppConfig, type BetterHtmlConfig, type BetterHtmlPlugin, _default$5 as BetterHtmlProvider, type BetterHtmlProviderConfig, type BrowserName, Button, type ButtonProps, Chip, type ChipProps, ColorThemeSwitch, type ColorThemeSwitchProps, type ComponentHoverStyle, type ComponentMarginProps, type ComponentPaddingProps, Div, type DivProps, _default$1 as Divider, Dropdown, type DropdownOption, type DropdownProps, Foldable, type FoldableProps, type FoldableRef, Form, type FormProps, FormRow, type FormRowProps, type HorizontalDividerProps, _default$3 as Icon, type IconProps, _default$2 as Image, type ImageProps, InputField, type InputFieldProps, _default as Label, type LabelProps, Loader, type LoaderProps, type LocalStoragePluginOptions, Modal, type ModalProps, type ModalRef, PageHeader, type PageHeaderProps, PageHolder, type PageHolderProps, Pagination, type PluginName, type ReactRouterDomPluginOptions, SideMenu, type SideMenuItem, type TabGroup, Table, type TableColumn, type TableFilterData, type TableListFilterListItem, type TableProps, type TableRef, Tabs, type TabsProps, type TabsRef, Text, type TextAs, type TextProps, type TextareaFieldProps, _default$4 as ToggleInput, type ToggleInputProps, type ToggleInputRef, Tooltip, type TooltipProps, type TooltipRef, type VerticalDividerProps, alertControls, alertsPlugin, defaultAlertsPluginOptions, defaultLocalStoragePluginOptions, defaultReactRouterDomPluginOptions, filterHover, generateLocalStorage, getBrowser, getFormErrorObject, isMobileDevice, localStoragePlugin, reactRouterDomPlugin, sideMenuControls, useAlertControls, useBetterHtmlContext, useForm, useMediaQuery, usePageResize, usePageScroll, useUrlQuery };