react-better-html 1.1.126 → 1.1.127

package/dist/index.d.mts

@@ -3,11 +3,13 @@ import * as react from 'react';
 import { ComponentType, ComponentProps, ReactNode } from 'react';
 import * as react_jsx_runtime from 'react/jsx-runtime';
 
-type PluginName = "react-router-dom";
-type BetterHtmlPlugin = {
+type PluginName = "react-router-dom" | "alerts";
+type BetterHtmlPluginConstructor<T extends object = object> = (config?: T) => BetterHtmlPlugin<T>;
+type BetterHtmlPlugin<T = object> = {
     name: PluginName;
     components?: Record<string, ComponentType<any>>;
     initialize?: () => void;
+    getConfig?: () => T;
 };
 
 type ComponentStyle = React.CSSProperties;
@@ -134,7 +136,7 @@ declare const Loader: typeof LoaderComponent & {
     text: typeof LoaderComponent.text;
 };
 
-type IconName = "XMark" | "uploadCloud" | "trash" | "chevronDown" | "chevronLeft" | "chevronRight" | "doubleChevronLeft" | "doubleChevronRight" | "eye" | "eyeDashed" | "magnifyingGlass" | "check" | "filter";
+type IconName = "XMark" | "uploadCloud" | "trash" | "chevronDown" | "chevronLeft" | "chevronRight" | "doubleChevronLeft" | "doubleChevronRight" | "eye" | "eyeDashed" | "magnifyingGlass" | "check" | "infoI" | "warningTriangle" | "filter";
 type IconData = {
     width: number;
     height: number;
@@ -879,6 +881,17 @@ type BetterHtmlConfig = {
     };
 };
 
+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;
@@ -889,6 +902,10 @@ 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 BetterHtmlProviderValue = DeepPartialRecord<BetterHtmlConfig>;
 type BetterHtmlProviderProps = {
     value?: BetterHtmlProviderValue;
@@ -896,7 +913,7 @@ type BetterHtmlProviderProps = {
     children?: React.ReactNode;
 };
 declare function BetterHtmlProvider({ value, plugins: pluginsToUse, children }: BetterHtmlProviderProps): react_jsx_runtime.JSX.Element;
-declare const _default: react.MemoExoticComponent<typeof BetterHtmlProvider>;
+declare const _default: typeof BetterHtmlProvider;
 
 type BrowserName = "firefox" | "chrome" | "safari" | "edge" | "opera";
 
@@ -923,6 +940,10 @@ 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 colorThemeControls: {
     toggleTheme: (theme?: ColorTheme) => void;
 };
@@ -931,6 +952,23 @@ declare const countries: Country[];
 
 declare const isMobileDevice: boolean;
 
-declare const reactRouterDomPlugin: BetterHtmlPlugin;
+declare const reactRouterDomPlugin: BetterHtmlPluginConstructor;
+
+type AlertsPluginOptions = {
+    /** @default "bottom" */
+    position?: "top" | "bottom";
+    /** @default "right" */
+    align?: "left" | "center" | "right";
+    /** @default "auto" */
+    defaultDuration?: AlertDuration;
+    /** @default 460 */
+    maxWidth?: number;
+    /** @default true */
+    withLoaderBar?: boolean;
+    /** @default true */
+    withCloseButton?: boolean;
+};
+declare const defaultAlertsPluginOptions: Required<AlertsPluginOptions>;
+declare const alertsPlugin: BetterHtmlPluginConstructor<AlertsPluginOptions>;
 
-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$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, Modal, type ModalProps, type ModalRef, type OmitProps, PageHeader, type PageHeaderProps, PageHolder, type PageHolderProps, type PartialRecord, type PickAllRequired, type PickValue, type PluginName, type Styles, type TabGroup, Table, type TableColumn, 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, colorThemeControls, countries, darkenColor, desaturateColor, formatPhoneNumber, generateRandomString, getBrowser, getFormErrorObject, isMobileDevice, lightenColor, loaderControls, reactRouterDomPlugin, saturateColor, useBetterHtmlContext, useBooleanState, useDebounceState, useForm, useLoader, useLoaderControls, useMediaQuery, usePageResize, usePageScroll, useTheme, useUrlQuery };
+export { type Alert, type AlertType, type AlertsPluginOptions, 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$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, Modal, type ModalProps, type ModalRef, type OmitProps, PageHeader, type PageHeaderProps, PageHolder, type PageHolderProps, type PartialRecord, type PickAllRequired, type PickValue, type PluginName, type Styles, type TabGroup, Table, type TableColumn, 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, desaturateColor, formatPhoneNumber, generateRandomString, getBrowser, getFormErrorObject, isMobileDevice, lightenColor, loaderControls, reactRouterDomPlugin, saturateColor, useAlertControls, useBetterHtmlContext, useBooleanState, useDebounceState, useForm, useLoader, useLoaderControls, useMediaQuery, usePageResize, usePageScroll, useTheme, useUrlQuery };

package/dist/index.d.ts

@@ -3,11 +3,13 @@ import * as react from 'react';
 import { ComponentType, ComponentProps, ReactNode } from 'react';
 import * as react_jsx_runtime from 'react/jsx-runtime';
 
-type PluginName = "react-router-dom";
-type BetterHtmlPlugin = {
+type PluginName = "react-router-dom" | "alerts";
+type BetterHtmlPluginConstructor<T extends object = object> = (config?: T) => BetterHtmlPlugin<T>;
+type BetterHtmlPlugin<T = object> = {
     name: PluginName;
     components?: Record<string, ComponentType<any>>;
     initialize?: () => void;
+    getConfig?: () => T;
 };
 
 type ComponentStyle = React.CSSProperties;
@@ -134,7 +136,7 @@ declare const Loader: typeof LoaderComponent & {
     text: typeof LoaderComponent.text;
 };
 
-type IconName = "XMark" | "uploadCloud" | "trash" | "chevronDown" | "chevronLeft" | "chevronRight" | "doubleChevronLeft" | "doubleChevronRight" | "eye" | "eyeDashed" | "magnifyingGlass" | "check" | "filter";
+type IconName = "XMark" | "uploadCloud" | "trash" | "chevronDown" | "chevronLeft" | "chevronRight" | "doubleChevronLeft" | "doubleChevronRight" | "eye" | "eyeDashed" | "magnifyingGlass" | "check" | "infoI" | "warningTriangle" | "filter";
 type IconData = {
     width: number;
     height: number;
@@ -879,6 +881,17 @@ type BetterHtmlConfig = {
     };
 };
 
+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;
@@ -889,6 +902,10 @@ 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 BetterHtmlProviderValue = DeepPartialRecord<BetterHtmlConfig>;
 type BetterHtmlProviderProps = {
     value?: BetterHtmlProviderValue;
@@ -896,7 +913,7 @@ type BetterHtmlProviderProps = {
     children?: React.ReactNode;
 };
 declare function BetterHtmlProvider({ value, plugins: pluginsToUse, children }: BetterHtmlProviderProps): react_jsx_runtime.JSX.Element;
-declare const _default: react.MemoExoticComponent<typeof BetterHtmlProvider>;
+declare const _default: typeof BetterHtmlProvider;
 
 type BrowserName = "firefox" | "chrome" | "safari" | "edge" | "opera";
 
@@ -923,6 +940,10 @@ 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 colorThemeControls: {
     toggleTheme: (theme?: ColorTheme) => void;
 };
@@ -931,6 +952,23 @@ declare const countries: Country[];
 
 declare const isMobileDevice: boolean;
 
-declare const reactRouterDomPlugin: BetterHtmlPlugin;
+declare const reactRouterDomPlugin: BetterHtmlPluginConstructor;
+
+type AlertsPluginOptions = {
+    /** @default "bottom" */
+    position?: "top" | "bottom";
+    /** @default "right" */
+    align?: "left" | "center" | "right";
+    /** @default "auto" */
+    defaultDuration?: AlertDuration;
+    /** @default 460 */
+    maxWidth?: number;
+    /** @default true */
+    withLoaderBar?: boolean;
+    /** @default true */
+    withCloseButton?: boolean;
+};
+declare const defaultAlertsPluginOptions: Required<AlertsPluginOptions>;
+declare const alertsPlugin: BetterHtmlPluginConstructor<AlertsPluginOptions>;
 
-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$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, Modal, type ModalProps, type ModalRef, type OmitProps, PageHeader, type PageHeaderProps, PageHolder, type PageHolderProps, type PartialRecord, type PickAllRequired, type PickValue, type PluginName, type Styles, type TabGroup, Table, type TableColumn, 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, colorThemeControls, countries, darkenColor, desaturateColor, formatPhoneNumber, generateRandomString, getBrowser, getFormErrorObject, isMobileDevice, lightenColor, loaderControls, reactRouterDomPlugin, saturateColor, useBetterHtmlContext, useBooleanState, useDebounceState, useForm, useLoader, useLoaderControls, useMediaQuery, usePageResize, usePageScroll, useTheme, useUrlQuery };
+export { type Alert, type AlertType, type AlertsPluginOptions, 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$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, Modal, type ModalProps, type ModalRef, type OmitProps, PageHeader, type PageHeaderProps, PageHolder, type PageHolderProps, type PartialRecord, type PickAllRequired, type PickValue, type PluginName, type Styles, type TabGroup, Table, type TableColumn, 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, desaturateColor, formatPhoneNumber, generateRandomString, getBrowser, getFormErrorObject, isMobileDevice, lightenColor, loaderControls, reactRouterDomPlugin, saturateColor, useAlertControls, useBetterHtmlContext, useBooleanState, useDebounceState, useForm, useLoader, useLoaderControls, useMediaQuery, usePageResize, usePageScroll, useTheme, useUrlQuery };