react-better-html 1.1.37 → 1.1.39

package/dist/components/Divider.d.ts

@@ -1,10 +1,10 @@
+import { ComponentMarginProps } from "../types/components";
 type DividerProps = {
     /** @default 1 */
     width?: number;
     /** @default border */
     backgroundColor?: string;
-    paddingBlock?: number;
-};
+} & ComponentMarginProps;
 type VerticalDividerProps = DividerProps & {
     /** @default "100%" */
     height?: number;

package/dist/components/Divider.js

@@ -9,12 +9,12 @@ const Div_1 = __importDefault(require("./Div"));
 const Text_1 = __importDefault(require("./Text"));
 const BetterHtmlProvider_1 = require("./BetterHtmlProvider");
 exports.default = {
-    vertical: (0, react_1.memo)(function Divider({ width = 1, backgroundColor, paddingBlock, height }) {
+    vertical: (0, react_1.memo)(function Divider({ width = 1, backgroundColor, height, ...props }) {
         const theme = (0, BetterHtmlProvider_1.useTheme)();
-        return ((0, jsx_runtime_1.jsx)(Div_1.default, { width: width, height: height ?? "100%", flexShrink: 0, backgroundColor: backgroundColor ?? theme.colors.border, paddingBlock: paddingBlock }));
+        return ((0, jsx_runtime_1.jsx)(Div_1.default, { width: width, height: height ?? "100%", flexShrink: 0, backgroundColor: backgroundColor ?? theme.colors.border, ...props }));
     }),
-    horizontal: (0, react_1.memo)(function Divider({ width = 1, backgroundColor, paddingBlock, text, textColor, }) {
+    horizontal: (0, react_1.memo)(function Divider({ width = 1, backgroundColor, text, textColor, ...props }) {
         const theme = (0, BetterHtmlProvider_1.useTheme)();
-        return ((0, jsx_runtime_1.jsxs)(Div_1.default.row, { alignItems: "center", gap: text ? theme.styles.space : undefined, paddingBlock: paddingBlock, children: [(0, jsx_runtime_1.jsx)(Div_1.default, { flex: 1, height: width, flexShrink: 0, backgroundColor: backgroundColor ?? theme.colors.border }), text && (0, jsx_runtime_1.jsx)(Text_1.default, { color: textColor ?? theme.colors.textSecondary, children: text }), (0, jsx_runtime_1.jsx)(Div_1.default, { flex: 1, height: width, flexShrink: 0, backgroundColor: backgroundColor ?? theme.colors.border })] }));
+        return ((0, jsx_runtime_1.jsxs)(Div_1.default.row, { alignItems: "center", gap: text ? theme.styles.space : undefined, ...props, children: [(0, jsx_runtime_1.jsx)(Div_1.default, { flex: 1, height: width, flexShrink: 0, backgroundColor: backgroundColor ?? theme.colors.border }), text && (0, jsx_runtime_1.jsx)(Text_1.default, { color: textColor ?? theme.colors.textSecondary, children: text }), (0, jsx_runtime_1.jsx)(Div_1.default, { flex: 1, height: width, flexShrink: 0, backgroundColor: backgroundColor ?? theme.colors.border })] }));
     }),
 };

package/dist/components/Dropdown.js

@@ -141,7 +141,7 @@ const DropdownComponent = (0, react_1.forwardRef)(function Dropdown({ label, err
     }, [withDebounce, onChangeSearch, debouncedSearchQuery]);
     const displayValue = withSearch && isFocused ? searchQuery : selectedOption?.label ?? "";
     const withClearButton = isOpen && selectedOption;
-    return ((0, jsx_runtime_1.jsx)(Div_1.default.column, { width: "100%", position: "relative", userSelect: "none", ...props, ref: dropdownHolderRef, children: (0, jsx_runtime_1.jsxs)(Div_1.default.row, { position: "relative", width: "100%", children: [(0, jsx_runtime_1.jsx)(InputField_1.default, { label: label, errorText: errorText, infoText: infoText, required: required, disabled: disabled, readOnly: !withSearch, value: displayValue, placeholder: withSearch ? (selectedOption ? selectedOption.label : placeholder) : placeholder, leftIcon: leftIcon, className: `react-better-html-dropdown${isOpen ? " react-better-html-dropdown-open" : ""}${inputFieldClassName ? ` ${inputFieldClassName}` : ""}`, zIndex: isOpen || isOpenLate ? 1001 : undefined, onClick: !disabled ? setIsOpen.toggle : undefined, onFocus: setIsFocused.setTrue, onBlur: setIsFocused.setFalse, onKeyDown: onKeyDownInputField, onChangeValue: withSearch ? onChangeValue : undefined, insideInputFieldComponent: (0, jsx_runtime_1.jsx)(Div_1.default, { position: "absolute", top: "100%", left: 0, width: "100%", maxHeight: 300, backgroundColor: theme.colors.backgroundContent, border: `1px solid ${isFocused ? theme.colors.primary : theme.colors.border}`, borderTop: "none", borderBottomLeftRadius: theme.styles.borderRadius, borderBottomRightRadius: theme.styles.borderRadius, boxShadow: "0px 10px 20px #00000020", zIndex: 1000, overflowY: "auto", opacity: !isOpen ? 0 : undefined, pointerEvents: !isOpen ? "none" : undefined, transform: `translateY(${!isOpen ? -10 : 0}px)`, transition: theme.styles.transition, role: "listbox", "aria-label": label, children: isLoadingDebouncedSearchQuery || debounceIsLoading ? ((0, jsx_runtime_1.jsx)(Div_1.default, { padding: `${theme.styles.space / 2}px ${theme.styles.space + theme.styles.gap}px`, children: (0, jsx_runtime_1.jsx)(Loader_1.default.text, {}) })) : filteredOptions.length ? (filteredOptions.map((option, index) => {
+    return ((0, jsx_runtime_1.jsx)(Div_1.default.column, { width: "100%", position: "relative", userSelect: "none", ...props, ref: dropdownHolderRef, children: (0, jsx_runtime_1.jsxs)(Div_1.default.row, { position: "relative", width: "100%", children: [(0, jsx_runtime_1.jsx)(InputField_1.default, { label: label, errorText: errorText, infoText: infoText, required: required, disabled: disabled, readOnly: !withSearch, value: displayValue, placeholder: withSearch ? (selectedOption ? selectedOption.label : placeholder) : placeholder, leftIcon: leftIcon, className: `react-better-html-dropdown${isOpen ? " react-better-html-dropdown-open" : ""}${isOpenLate ? " react-better-html-dropdown-open-late" : ""}${inputFieldClassName ? ` ${inputFieldClassName}` : ""}`, onClick: !disabled ? setIsOpen.toggle : undefined, onFocus: setIsFocused.setTrue, onBlur: setIsFocused.setFalse, onKeyDown: onKeyDownInputField, onChangeValue: withSearch ? onChangeValue : undefined, insideInputFieldComponent: (0, jsx_runtime_1.jsx)(Div_1.default, { position: "absolute", top: "100%", left: 0, width: "100%", maxHeight: 300, backgroundColor: theme.colors.backgroundContent, border: `1px solid ${isFocused ? theme.colors.primary : theme.colors.border}`, borderTop: "none", borderBottomLeftRadius: theme.styles.borderRadius, borderBottomRightRadius: theme.styles.borderRadius, boxShadow: "0px 10px 20px #00000020", zIndex: 1000, overflowY: "auto", opacity: !isOpen ? 0 : undefined, pointerEvents: !isOpen ? "none" : undefined, transform: `translateY(${!isOpen ? -10 : 0}px)`, transition: theme.styles.transition, role: "listbox", "aria-label": label, children: isLoadingDebouncedSearchQuery || debounceIsLoading ? ((0, jsx_runtime_1.jsx)(Div_1.default, { padding: `${theme.styles.space / 2}px ${theme.styles.space + theme.styles.gap}px`, children: (0, jsx_runtime_1.jsx)(Loader_1.default.text, {}) })) : filteredOptions.length ? (filteredOptions.map((option, index) => {
                             const isSelected = option.value === value;
                             const isDisabled = option.disabled;
                             const isFocused = index === focusedOptionIndex;

package/dist/components/FormRow.d.ts

@@ -0,0 +1,20 @@
+import { IconName } from "../types/icon";
+import { AnyOtherString } from "../types/app";
+import { ComponentMarginProps, ComponentPropWithRef } from "../types/components";
+type FormRowProps = {
+    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;
+    }>) => React.ReactElement;
+};
+declare const FormRowComponent: FormRowComponentType;
+declare const FormRow: typeof FormRowComponent & {
+    withTitle: typeof FormRowComponent.withTitle;
+};
+export default FormRow;

package/dist/components/FormRow.js

@@ -0,0 +1,26 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const hooks_1 = require("../utils/hooks");
+const Div_1 = __importDefault(require("./Div"));
+const Icon_1 = __importDefault(require("./Icon"));
+const Text_1 = __importDefault(require("./Text"));
+const BetterHtmlProvider_1 = require("./BetterHtmlProvider");
+const FormRowComponent = (0, react_1.forwardRef)(function FormRow({ gap, children, ...props }, ref) {
+    const theme = (0, BetterHtmlProvider_1.useTheme)();
+    const mediaQuery = (0, hooks_1.useMediaQuery)();
+    const breakingPoint = mediaQuery.size900;
+    const readyGap = breakingPoint ? theme.styles.gap : theme.styles.space * 2;
+    return ((0, jsx_runtime_1.jsx)(Div_1.default.row, { alignItems: "center", gap: gap ?? readyGap, invertFlexDirection: breakingPoint, ...props, ref: ref, children: children }));
+});
+FormRowComponent.withTitle = (0, react_1.forwardRef)(function WithTitle({ icon, title, description, children, ...props }, ref) {
+    const theme = (0, BetterHtmlProvider_1.useTheme)();
+    return ((0, jsx_runtime_1.jsxs)(FormRowComponent, { ...props, ref: ref, children: [(0, jsx_runtime_1.jsxs)(Div_1.default.row, { width: "100%", alignItems: "center", gap: theme.styles.space, children: [icon && (0, jsx_runtime_1.jsx)(Icon_1.default, { name: icon }), (0, jsx_runtime_1.jsxs)(Div_1.default.column, { flex: 1, gap: theme.styles.gap / 2, children: [(0, jsx_runtime_1.jsx)(Text_1.default, { as: "h3", children: title }), description && (0, jsx_runtime_1.jsx)(Text_1.default, { color: theme.colors.textSecondary, children: description })] })] }), (0, jsx_runtime_1.jsx)(Div_1.default, { width: "100%", children: children })] }));
+});
+const FormRow = (0, react_1.memo)(FormRowComponent);
+FormRow.withTitle = FormRowComponent.withTitle;
+exports.default = FormRow;

package/dist/components/InputField.js

@@ -65,6 +65,10 @@ const InputElement = styled_components_1.default.input.withConfig({
          border-bottom-left-radius: 0px;
          border-bottom-right-radius: 0px;
       }
+
+      &.react-better-html-dropdown-open-late {
+         z-index: 1001;
+      }
    }
 
    ${(props) => props.normalStyle}

package/dist/components/Modal.js

@@ -90,11 +90,31 @@ const ModalComponent = (0, react_1.forwardRef)(function Modal({ maxWidth, title,
 });
 ModalComponent.confirmation = (0, react_1.forwardRef)(function Confirmation({ continueButtonLoaderName, onContinue, onCancel, ...props }, ref) {
     const theme = (0, BetterHtmlProvider_1.useTheme)();
-    return ((0, jsx_runtime_1.jsxs)(Modal, { title: "Are you sure?", maxWidth: 660, ...props, ref: ref, children: [(0, jsx_runtime_1.jsx)(Text_1.default, { color: theme.colors.textSecondary, children: "Do you really want to continue? This action may be irreversible." }), (0, jsx_runtime_1.jsxs)(Div_1.default.row, { alignItems: "center", justifyContent: "flex-end", gap: theme.styles.gap, marginTop: theme.styles.space * 2, children: [(0, jsx_runtime_1.jsx)(Button_1.default.secondary, { text: "Cancel", onClick: onCancel }), (0, jsx_runtime_1.jsx)(Button_1.default, { text: "Continue", loaderName: continueButtonLoaderName, onClick: onContinue })] })] }));
+    const modalRef = (0, react_1.useRef)(null);
+    const onCancelElement = (0, react_1.useCallback)(() => {
+        onCancel?.();
+        modalRef.current?.close();
+    }, [onCancel]);
+    const onContinueElement = (0, react_1.useCallback)(() => {
+        onContinue?.();
+        modalRef.current?.close();
+    }, [onContinue]);
+    (0, react_1.useImperativeHandle)(ref, () => modalRef.current, []);
+    return ((0, jsx_runtime_1.jsxs)(Modal, { title: "Are you sure?", maxWidth: 660, ...props, ref: modalRef, children: [(0, jsx_runtime_1.jsx)(Text_1.default, { color: theme.colors.textSecondary, children: "Do you really want to continue? This action may be irreversible." }), (0, jsx_runtime_1.jsxs)(Div_1.default.row, { alignItems: "center", justifyContent: "flex-end", gap: theme.styles.gap, marginTop: theme.styles.space * 2, children: [(0, jsx_runtime_1.jsx)(Button_1.default.secondary, { text: "Cancel", onClick: onCancelElement }), (0, jsx_runtime_1.jsx)(Button_1.default, { text: "Continue", loaderName: continueButtonLoaderName, onClick: onContinueElement })] })] }));
 });
 ModalComponent.destructive = (0, react_1.forwardRef)(function Destructive({ deleteButtonLoaderName, onDelete, onCancel, ...props }, ref) {
     const theme = (0, BetterHtmlProvider_1.useTheme)();
-    return ((0, jsx_runtime_1.jsxs)(Modal, { title: "Are you sure?", maxWidth: 660, ...props, ref: ref, children: [(0, jsx_runtime_1.jsx)(Text_1.default, { color: theme.colors.textSecondary, children: "Do you really want to continue with the deleting of the item? This action may be irreversible." }), (0, jsx_runtime_1.jsxs)(Div_1.default.row, { alignItems: "center", justifyContent: "flex-end", gap: theme.styles.gap, marginTop: theme.styles.space * 2, children: [(0, jsx_runtime_1.jsx)(Button_1.default.secondary, { text: "Cancel", onClick: onCancel }), (0, jsx_runtime_1.jsx)(Button_1.default.destructive, { icon: "trash", text: "Delete", loaderName: deleteButtonLoaderName, onClick: onDelete })] })] }));
+    const modalRef = (0, react_1.useRef)(null);
+    const onCancelElement = (0, react_1.useCallback)(() => {
+        onCancel?.();
+        modalRef.current?.close();
+    }, [onCancel]);
+    const onDeleteElement = (0, react_1.useCallback)(() => {
+        onDelete?.();
+        modalRef.current?.close();
+    }, [onDelete]);
+    (0, react_1.useImperativeHandle)(ref, () => modalRef.current, []);
+    return ((0, jsx_runtime_1.jsxs)(Modal, { title: "Are you sure?", maxWidth: 660, ...props, ref: modalRef, children: [(0, jsx_runtime_1.jsx)(Text_1.default, { color: theme.colors.textSecondary, children: "Do you really want to continue with the deleting of the item? This action may be irreversible." }), (0, jsx_runtime_1.jsxs)(Div_1.default.row, { alignItems: "center", justifyContent: "flex-end", gap: theme.styles.gap, marginTop: theme.styles.space * 2, children: [(0, jsx_runtime_1.jsx)(Button_1.default.secondary, { text: "Cancel", onClick: onCancelElement }), (0, jsx_runtime_1.jsx)(Button_1.default.destructive, { icon: "trash", text: "Delete", loaderName: deleteButtonLoaderName, onClick: onDeleteElement })] })] }));
 });
 const Modal = (0, react_1.memo)(ModalComponent);
 Modal.confirmation = ModalComponent.confirmation;

package/dist/components/PageHeader.d.ts

@@ -0,0 +1,16 @@
+import React from "react";
+import { ComponentMarginProps } from "../types/components";
+import { TextAs } from "./Text";
+type PageHeaderProps = {
+    imageUrl?: string;
+    imageSize?: number;
+    title?: string;
+    titleAs?: TextAs;
+    description?: string;
+    textAlign?: React.CSSProperties["textAlign"];
+    rightElement?: React.ReactNode;
+    lightMode?: boolean;
+} & Pick<ComponentMarginProps, "marginBottom">;
+declare function PageHeader({ imageUrl, imageSize, title, titleAs, description, textAlign, rightElement, lightMode, marginBottom, }: PageHeaderProps): import("react/jsx-runtime").JSX.Element;
+declare const _default: React.MemoExoticComponent<typeof PageHeader>;
+export default _default;

package/dist/components/PageHeader.js

@@ -0,0 +1,18 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const hooks_1 = require("../utils/hooks");
+const Div_1 = __importDefault(require("./Div"));
+const Text_1 = __importDefault(require("./Text"));
+const Image_1 = __importDefault(require("./Image"));
+const BetterHtmlProvider_1 = require("./BetterHtmlProvider");
+function PageHeader({ imageUrl, imageSize = 60, title, titleAs, description, textAlign, rightElement, lightMode, marginBottom, }) {
+    const theme = (0, BetterHtmlProvider_1.useTheme)();
+    const mediaQuery = (0, hooks_1.useMediaQuery)();
+    return ((0, jsx_runtime_1.jsxs)(Div_1.default.row, { alignItems: "center", gap: theme.styles.space, marginBottom: marginBottom ?? theme.styles.space * 2, children: [imageUrl && (0, jsx_runtime_1.jsx)(Image_1.default.profileImage, { src: imageUrl, size: imageSize ?? (mediaQuery.size600 ? 46 : 60) }), (0, jsx_runtime_1.jsxs)(Div_1.default.column, { flex: 1, gap: theme.styles.gap / 2, children: [(0, jsx_runtime_1.jsx)(Text_1.default, { as: titleAs ?? "h1", textAlign: textAlign, color: lightMode ? theme.colors.base : theme.colors.textPrimary, children: title }), (0, jsx_runtime_1.jsx)(Text_1.default, { textAlign: textAlign, color: lightMode ? theme.colors.base : theme.colors.textSecondary, opacity: lightMode ? 0.7 : undefined, children: description })] }), rightElement] }));
+}
+exports.default = (0, react_1.memo)(PageHeader);

package/dist/components/Text.d.ts

@@ -1,8 +1,9 @@
 import { ComponentHoverStyle, ComponentPropWithRef, ComponentStyle } from "../types/components";
 import { OmitProps } from "../types/app";
+export type TextAs = "h1" | "h2" | "h3" | "h4" | "h5" | "h6" | "p" | "span" | "label";
 export type TextProps = {
     /** @default "p" */
-    as?: "h1" | "h2" | "h3" | "h4" | "h5" | "h6" | "p" | "span" | "label";
+    as?: TextAs;
 } & OmitProps<React.ComponentProps<"p">, "style"> & ComponentStyle & ComponentHoverStyle;
 type TextComponentType = {
     (props: ComponentPropWithRef<HTMLParagraphElement, TextProps>): React.ReactElement;

package/dist/index.d.ts

@@ -7,14 +7,17 @@ import Button from "./components/Button";
 import Divider from "./components/Divider";
 import Modal, { type ModalRef } from "./components/Modal";
 import PageHolder from "./components/PageHolder";
+import PageHeader from "./components/PageHeader";
 import Chip from "./components/Chip";
 import InputField from "./components/InputField";
 import Dropdown, { type DropdownOption } from "./components/Dropdown";
 import ToggleInput from "./components/ToggleInput";
 import Form from "./components/Form";
 import Label from "./components/Label";
+import FormRow from "./components/FormRow";
 import BetterHtmlProvider, { useBetterHtmlContext, useTheme, useLoader, useLoaderControls } from "./components/BetterHtmlProvider";
 import { usePageResize, useMediaQuery, useBooleanState, useDebounceState, useForm, useUrlQuery } from "./utils/hooks";
+import { generateRandomString, getBrowser, formatPhoneNumber } 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";
@@ -24,4 +27,4 @@ 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 { isMobileDevice } from "./constants";
 export * from "./plugins";
-export { BetterHtmlProvider, Div, Text, Loader, Icon, Image, Button, Divider, Modal, ModalRef, PageHolder, Chip, InputField, Dropdown, DropdownOption, ToggleInput, Form, Label, useBetterHtmlContext, useTheme, useLoader, useLoaderControls, usePageResize, useMediaQuery, useBooleanState, useDebounceState, useForm, useUrlQuery, 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, 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, };

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.useUrlQuery = exports.useForm = exports.useDebounceState = exports.useBooleanState = exports.useMediaQuery = exports.usePageResize = exports.useLoaderControls = exports.useLoader = exports.useTheme = exports.useBetterHtmlContext = exports.Label = exports.Form = exports.ToggleInput = exports.Dropdown = exports.InputField = exports.Chip = 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.formatPhoneNumber = exports.getBrowser = exports.generateRandomString = exports.useUrlQuery = exports.useForm = exports.useDebounceState = exports.useBooleanState = exports.useMediaQuery = 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"));
@@ -58,6 +58,8 @@ const Modal_1 = __importDefault(require("./components/Modal"));
 exports.Modal = Modal_1.default;
 const PageHolder_1 = __importDefault(require("./components/PageHolder"));
 exports.PageHolder = PageHolder_1.default;
+const PageHeader_1 = __importDefault(require("./components/PageHeader"));
+exports.PageHeader = PageHeader_1.default;
 const Chip_1 = __importDefault(require("./components/Chip"));
 exports.Chip = Chip_1.default;
 const InputField_1 = __importDefault(require("./components/InputField"));
@@ -70,6 +72,8 @@ const Form_1 = __importDefault(require("./components/Form"));
 exports.Form = Form_1.default;
 const Label_1 = __importDefault(require("./components/Label"));
 exports.Label = Label_1.default;
+const FormRow_1 = __importDefault(require("./components/FormRow"));
+exports.FormRow = FormRow_1.default;
 const BetterHtmlProvider_1 = __importStar(require("./components/BetterHtmlProvider"));
 exports.BetterHtmlProvider = BetterHtmlProvider_1.default;
 Object.defineProperty(exports, "useBetterHtmlContext", { enumerable: true, get: function () { return BetterHtmlProvider_1.useBetterHtmlContext; } });
@@ -83,6 +87,10 @@ Object.defineProperty(exports, "useBooleanState", { enumerable: true, get: funct
 Object.defineProperty(exports, "useDebounceState", { enumerable: true, get: function () { return hooks_1.useDebounceState; } });
 Object.defineProperty(exports, "useForm", { enumerable: true, get: function () { return hooks_1.useForm; } });
 Object.defineProperty(exports, "useUrlQuery", { enumerable: true, get: function () { return hooks_1.useUrlQuery; } });
+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; } });
 const constants_1 = require("./constants");
 Object.defineProperty(exports, "isMobileDevice", { enumerable: true, get: function () { return constants_1.isMobileDevice; } });
 __exportStar(require("./plugins"), exports);

package/dist/utils/functions.d.ts

@@ -1 +1,3 @@
-export {};
+export declare const generateRandomString: (stringLength: number) => string;
+export declare const getBrowser: () => "firefox" | "chrome" | "safari" | "edge" | "opera" | undefined;
+export declare const formatPhoneNumber: (phoneNumber: string) => string;

package/dist/utils/functions.js

@@ -1,2 +1,51 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
+exports.formatPhoneNumber = exports.getBrowser = exports.generateRandomString = void 0;
+const countries_1 = require("../constants/countries");
+const generateRandomString = (stringLength) => {
+    const characters = "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789";
+    let result = "";
+    for (let index = 0; index < stringLength; index++) {
+        result += characters.charAt(Math.floor(Math.random() * characters.length));
+    }
+    return result;
+};
+exports.generateRandomString = generateRandomString;
+const getBrowser = () => {
+    const userAgent = navigator.userAgent.toLowerCase();
+    if (userAgent.includes("firefox"))
+        return "firefox";
+    if (userAgent.includes("chrome") && !userAgent.includes("edg"))
+        return "chrome";
+    if (userAgent.includes("safari") && !userAgent.includes("chrome"))
+        return "safari";
+    if (userAgent.includes("edg"))
+        return "edge";
+    if (userAgent.includes("opr") || userAgent.includes("opera"))
+        return "opera";
+    return;
+};
+exports.getBrowser = getBrowser;
+const formatPhoneNumber = (phoneNumber) => {
+    const cleanPhoneNumber = phoneNumber.replace(/\D/g, "");
+    const country = countries_1.countries.find((country) => country.phoneNumberExtension === cleanPhoneNumber.slice(0, country.phoneNumberExtension.length));
+    if (!country)
+        return phoneNumber;
+    let phonNumberRest = cleanPhoneNumber.slice(country.phoneNumberExtension.length);
+    if (country.phoneNumberFormat) {
+        let formattedNumber = "";
+        let index = 0;
+        for (const char of country.phoneNumberFormat) {
+            if (char === "X" && index < phonNumberRest.length) {
+                formattedNumber += phonNumberRest[index];
+                index++;
+            }
+            else {
+                formattedNumber += char;
+            }
+        }
+        phonNumberRest = formattedNumber.replace(/X/g, "").trim();
+    }
+    return `+${country.phoneNumberExtension} ${phonNumberRest}`;
+};
+exports.formatPhoneNumber = formatPhoneNumber;

package/package.json

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