react-better-html 1.1.33 → 1.1.35

package/dist/components/Button.d.ts

@@ -8,6 +8,7 @@ export type ButtonProps<Value> = {
     href?: string;
     text?: string;
     value?: Value;
+    download?: string;
     icon?: IconName | AnyOtherString;
     /** @default "left" */
     iconPosition?: "left" | "right";

package/dist/components/Button.js

@@ -104,7 +104,7 @@ const ButtonElement = styled_components_1.default.button.withConfig({
       ${(props) => props.hoverStyle}
    }
 `;
-const ButtonComponent = function Button({ href, text, value, icon, iconPosition = "left", iconColor, iconSize, image, imagePosition = "left", imageWidth, imageHeight, loaderName, loaderSize, isLoading, disabled, isSmall, isSubmit, onClick, onClickWithValue, ...props }) {
+const ButtonComponent = function Button({ href, text, value, download, icon, iconPosition = "left", iconColor, iconSize, image, imagePosition = "left", imageWidth, imageHeight, loaderName, loaderSize, isLoading, disabled, isSmall, isSubmit, onClick, onClickWithValue, ...props }) {
     const theme = (0, BetterHtmlProvider_1.useTheme)();
     const isLoadingHook = (0, BetterHtmlProvider_1.useLoader)(loaderName);
     const betterHtmlContext = (0, BetterHtmlProvider_1.useBetterHtmlContext)();
@@ -122,7 +122,7 @@ const ButtonComponent = function Button({ href, text, value, icon, iconPosition
     }, [onClick, onClickWithValue, value]);
     const iconComponent = icon ? ((0, jsx_runtime_1.jsx)(Div_1.default.row, { height: 20, alignItems: "center", justifyContent: "center", children: (0, jsx_runtime_1.jsx)(Icon_1.default, { name: icon, color: iconColor ?? props.color ?? theme.colors.base, size: iconSize ?? parseInt(styledComponentStyles.normalStyle.fontSize?.toString() ?? "16") }) })) : undefined;
     const imageComponent = image ? ((0, jsx_runtime_1.jsx)(Image_1.default, { name: image, color: iconColor ?? props.color ?? theme.colors.base, width: imageWidth ?? parseInt(styledComponentStyles.normalStyle.fontSize?.toString() ?? "16"), height: imageHeight })) : undefined;
-    return ((0, jsx_runtime_1.jsxs)(ButtonElement, { as: (href ? "a" : "button"), theme: theme, isSmall: isSmall, withText: text !== undefined, isLoading: isLoadingElement, disabled: disabled, href: href, type: isSubmit && !isLoadingElement ? "submit" : "button", onClick: !disabled && !isLoadingElement ? onClickElement : undefined, ...styledComponentStyles, ...dataProps, ...ariaProps, ...restProps, children: [(0, jsx_runtime_1.jsxs)(Div_1.default.row, { alignItems: "center", justifyContent: "center", gap: 10, pointerEvents: "none", opacity: isLoadingElement ? 0 : 1, transition: theme.styles.transition, children: [iconPosition === "left" && iconComponent, imagePosition === "left" && imageComponent, text, iconPosition === "right" && iconComponent, imagePosition === "right" && imageComponent] }), (0, jsx_runtime_1.jsx)(Div_1.default.row, { position: "absolute", width: "100%", height: "100%", top: 0, left: 0, pointerEvents: "none", alignItems: "center", justifyContent: "center", opacity: isLoadingElement ? 1 : 0, transition: theme.styles.transition, children: (0, jsx_runtime_1.jsx)(Loader_1.default, { color: props.color ?? theme.colors.base, size: loaderSize, disabled: !isLoadingElement }) })] }));
+    return ((0, jsx_runtime_1.jsxs)(ButtonElement, { as: (href ? "a" : "button"), theme: theme, isSmall: isSmall, withText: text !== undefined, isLoading: isLoadingElement, disabled: disabled, href: href, download: download, type: isSubmit && !isLoadingElement ? "submit" : "button", onClick: !disabled && !isLoadingElement ? onClickElement : undefined, ...styledComponentStyles, ...dataProps, ...ariaProps, ...restProps, children: [(0, jsx_runtime_1.jsxs)(Div_1.default.row, { alignItems: "center", justifyContent: "center", gap: 10, pointerEvents: "none", opacity: isLoadingElement ? 0 : 1, transition: theme.styles.transition, children: [iconPosition === "left" && iconComponent, imagePosition === "left" && imageComponent, text, iconPosition === "right" && iconComponent, imagePosition === "right" && imageComponent] }), (0, jsx_runtime_1.jsx)(Div_1.default.row, { position: "absolute", width: "100%", height: "100%", top: 0, left: 0, pointerEvents: "none", alignItems: "center", justifyContent: "center", opacity: isLoadingElement ? 1 : 0, transition: theme.styles.transition, children: (0, jsx_runtime_1.jsx)(Loader_1.default, { color: props.color ?? theme.colors.base, size: loaderSize, disabled: !isLoadingElement }) })] }));
 };
 ButtonComponent.secondary = function Secondary({ className, ...props }) {
     const theme = (0, BetterHtmlProvider_1.useTheme)();

package/dist/components/Dropdown.d.ts

@@ -3,8 +3,8 @@ import { AnyOtherString, OmitProps } from "../types/app";
 import { IconName } from "../types/icon";
 import { DivProps } from "./Div";
 export type DropdownOption<Value, Data = unknown> = {
-    label: string;
     value: Value;
+    label: string;
     disabled?: boolean;
     searchValues?: string[];
     data?: Data;
@@ -17,10 +17,13 @@ export type DropdownProps<Value, Data> = {
     disabled?: boolean;
     options: DropdownOption<Value, Data>[];
     value?: Value;
+    defaultValue?: Value;
     placeholder?: string;
     leftIcon?: IconName | AnyOtherString;
+    inputFieldClassName?: string;
     withSearch?: boolean;
     withDebounce?: boolean;
+    withoutClearButton?: boolean;
     /** @default 0.5s */
     debounceDelay?: number;
     debounceIsLoading?: boolean;
@@ -28,7 +31,7 @@ export type DropdownProps<Value, Data> = {
     onChange?: (value: Value | undefined) => void;
     onChangeSearch?: (query: string) => void;
     renderOption?: (option: DropdownOption<Value, Data>, index: number, isSelected: boolean) => React.ReactNode;
-} & OmitProps<DivProps<unknown>, "onChange">;
+} & OmitProps<DivProps<unknown>, "onChange" | "defaultChecked">;
 type DropdownComponentType = {
     <Value, Data>(props: ComponentPropWithRef<HTMLDivElement, DropdownProps<Value, Data>>): React.ReactElement;
 };

package/dist/components/Dropdown.js

@@ -14,7 +14,7 @@ const Icon_1 = __importDefault(require("./Icon"));
 const Button_1 = __importDefault(require("./Button"));
 const Loader_1 = __importDefault(require("./Loader"));
 const BetterHtmlProvider_1 = require("./BetterHtmlProvider");
-const DropdownComponent = (0, react_1.forwardRef)(function Dropdown({ label, errorText, infoText, required, disabled, options, value: controlledValue, placeholder = "Select an option", leftIcon, withSearch, withDebounce, debounceDelay = 0.5, debounceIsLoading, debounceMinimumSymbolsRequired, onChange, onChangeSearch, renderOption, ...props }, ref) {
+const DropdownComponent = (0, react_1.forwardRef)(function Dropdown({ label, errorText, infoText, required, disabled, options, value: controlledValue, defaultValue, placeholder = "Select an option", leftIcon, inputFieldClassName, withSearch, withDebounce, withoutClearButton, debounceDelay = 0.5, debounceIsLoading, debounceMinimumSymbolsRequired, onChange, onChangeSearch, renderOption, ...props }, ref) {
     const theme = (0, BetterHtmlProvider_1.useTheme)();
     const dropdownHolderRef = (0, react_1.useRef)(null);
     const inputRef = (0, react_1.useRef)(null);
@@ -24,7 +24,7 @@ const DropdownComponent = (0, react_1.forwardRef)(function Dropdown({ label, err
     const [searchQuery, setSearchQuery] = (0, react_1.useState)("");
     const [_, debouncedSearchQuery, setDebouncedSearchQuery, isLoadingDebouncedSearchQuery] = (0, hooks_2.useDebounceState)("", debounceDelay);
     const [focusedOptionIndex, setFocusedOptionIndex] = (0, react_1.useState)();
-    const [internalValue, setInternalValue] = (0, react_1.useState)();
+    const [internalValue, setInternalValue] = (0, react_1.useState)(defaultValue);
     const value = controlledValue ?? internalValue;
     const filteredOptions = (0, react_1.useMemo)(() => {
         if (!searchQuery)
@@ -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" : ""}`, 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" : ""}${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) => {
                             const isSelected = option.value === value;
                             const isDisabled = option.disabled;
                             const isFocused = index === focusedOptionIndex;
@@ -153,7 +153,7 @@ const DropdownComponent = (0, react_1.forwardRef)(function Dropdown({ label, err
                         })) : ((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)(Text_1.default.unknown, { textAlign: "left", children: debounceMinimumSymbolsRequired !== undefined &&
                                     searchQuery.length < debounceMinimumSymbolsRequired
                                     ? `Enter at least ${debounceMinimumSymbolsRequired} characters`
-                                    : "No options" }) })) }), role: "combobox", "aria-expanded": isOpen, "aria-controls": "dropdown-list", "aria-haspopup": "listbox", "aria-label": label, ref: inputRef }), (0, jsx_runtime_1.jsxs)(Div_1.default.row, { position: "absolute", top: 46 / 2 + (label ? 16 + theme.styles.gap / 2 : 0), right: theme.styles.space + 1, alignItems: "center", gap: theme.styles.gap, transform: "translateY(-50%)", pointerEvents: "none", filter: disabled ? "brightness(0.9)" : undefined, opacity: disabled ? 0.6 : undefined, zIndex: isOpen || isOpenLate ? 1001 : undefined, children: [(0, jsx_runtime_1.jsx)(Button_1.default.icon, { icon: "XMark", position: "relative", size: 10, iconSize: 14, opacity: !withClearButton ? 0 : undefined, pointerEvents: withClearButton ? "all" : undefined, onClick: onClickClearButton, disabled: !withClearButton }), (0, jsx_runtime_1.jsx)(Icon_1.default, { name: "chevronDown", position: "relative", size: 16, color: theme.colors.textSecondary, transform: `rotate(${isOpen ? 180 : 0}deg)`, transition: theme.styles.transition, pointerEvents: "none" })] })] }) }));
+                                    : "No options" }) })) }), role: "combobox", "aria-expanded": isOpen, "aria-controls": "dropdown-list", "aria-haspopup": "listbox", "aria-label": label, ref: inputRef }), (0, jsx_runtime_1.jsxs)(Div_1.default.row, { position: "absolute", top: 46 / 2 + (label ? 16 + theme.styles.gap / 2 : 0), right: theme.styles.space + 1, alignItems: "center", gap: theme.styles.gap, transform: "translateY(-50%)", pointerEvents: "none", filter: disabled ? "brightness(0.9)" : undefined, opacity: disabled ? 0.6 : undefined, zIndex: isOpen || isOpenLate ? 1001 : undefined, children: [!withoutClearButton && ((0, jsx_runtime_1.jsx)(Button_1.default.icon, { icon: "XMark", position: "relative", size: 10, iconSize: 14, opacity: !withClearButton ? 0 : undefined, pointerEvents: withClearButton ? "all" : undefined, onClick: onClickClearButton, disabled: !withClearButton })), (0, jsx_runtime_1.jsx)(Icon_1.default, { name: "chevronDown", position: "relative", size: 16, color: theme.colors.textSecondary, transform: `rotate(${isOpen ? 180 : 0}deg)`, transition: theme.styles.transition, pointerEvents: "none" })] })] }) }));
 });
 const Dropdown = (0, react_1.memo)(DropdownComponent);
 exports.default = Dropdown;

package/dist/components/InputField.d.ts

@@ -21,6 +21,7 @@ type InputFieldComponentType = {
     email: (props: ComponentPropWithRef<HTMLInputElement, InputFieldProps>) => React.ReactElement;
     password: (props: ComponentPropWithRef<HTMLInputElement, InputFieldProps>) => React.ReactElement;
     search: (props: ComponentPropWithRef<HTMLInputElement, InputFieldProps>) => React.ReactElement;
+    phoneNumber: (props: ComponentPropWithRef<HTMLInputElement, OmitProps<InputFieldProps, "type">>) => React.ReactElement;
 };
 declare const InputFieldComponent: InputFieldComponentType;
 export type TextareaFieldProps = OmitProps<InputFieldProps, "type"> & OmitProps<React.ComponentProps<"textarea">, "style" | "ref">;
@@ -29,5 +30,6 @@ declare const InputField: typeof InputFieldComponent & {
     email: typeof InputFieldComponent.email;
     password: typeof InputFieldComponent.password;
     search: typeof InputFieldComponent.search;
+    phoneNumber: typeof InputFieldComponent.phoneNumber;
 };
 export default InputField;

package/dist/components/InputField.js

@@ -6,11 +6,15 @@ Object.defineProperty(exports, "__esModule", { value: true });
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("react");
 const styled_components_1 = __importDefault(require("styled-components"));
+const countries_1 = require("../constants/countries");
 const hooks_1 = require("../utils/hooks");
 const Text_1 = __importDefault(require("./Text"));
 const Div_1 = __importDefault(require("./Div"));
 const Icon_1 = __importDefault(require("./Icon"));
 const Button_1 = __importDefault(require("./Button"));
+const Label_1 = __importDefault(require("./Label"));
+const Dropdown_1 = __importDefault(require("./Dropdown"));
+const Image_1 = __importDefault(require("./Image"));
 const BetterHtmlProvider_1 = require("./BetterHtmlProvider");
 const InputElement = styled_components_1.default.input.withConfig({
     shouldForwardProp: (prop) => !["theme", "withLeftIcon", "withRightIcon", "normalStyle", "hoverStyle"].includes(prop),
@@ -43,6 +47,17 @@ const InputElement = styled_components_1.default.input.withConfig({
       cursor: not-allowed;
    }
 
+   &.react-better-html-phone-number-holder {
+      border-right: none;
+      border-top-right-radius: 0px;
+      border-bottom-right-radius: 0px;
+   }
+
+   &.react-better-html-phone-number {
+      border-top-left-radius: 0px;
+      border-bottom-left-radius: 0px;
+   }
+
    &.react-better-html-dropdown {
       padding-right: ${(props) => props.theme.styles.space + 16 + props.theme.styles.space - 1}px;
 
@@ -114,7 +129,7 @@ const InputFieldComponent = (0, react_1.forwardRef)(function InputField({ label,
             return;
         onChangeValue?.(debouncedValue);
     }, [withDebounce, onChangeValue, debouncedValue]);
-    return ((0, jsx_runtime_1.jsxs)(Div_1.default.column, { width: "100%", gap: theme.styles.gap / 2, ...styledComponentStylesWithExcluded, children: [label && ((0, jsx_runtime_1.jsxs)(Text_1.default, { as: "label", height: 16, fontSize: 14, color: errorText ? theme.colors.error : theme.colors.textSecondary, children: [label, required && ((0, jsx_runtime_1.jsxs)(Text_1.default, { as: "span", fontSize: 16, color: theme.colors.error, children: [" ", "*"] }))] })), (0, jsx_runtime_1.jsxs)(Div_1.default, { position: "relative", width: "100%", children: [leftIcon && ((0, jsx_runtime_1.jsx)(Icon_1.default, { name: leftIcon, position: "absolute", top: 46 / 2, left: theme.styles.space + 1, transform: "translateY(-50%)", pointerEvents: "none", zIndex: 1002 })), (0, jsx_runtime_1.jsx)(InputElement, { theme: theme, withLeftIcon: leftIcon !== undefined, withRightIcon: rightIcon !== undefined, required: required, placeholder: placeholder ?? label, onChange: onChangeElement, ...styledComponentStylesWithoutExcluded, ...dataProps, ...ariaProps, ...restProps, ref: ref }), rightIcon ? (onClickRightIcon ? ((0, jsx_runtime_1.jsx)(Button_1.default.icon, { icon: rightIcon, position: "absolute", top: 46 / 2, right: theme.styles.space + 1 - theme.styles.space / 2, transform: "translateY(-50%)", onClick: onClickRightIcon })) : ((0, jsx_runtime_1.jsx)(Icon_1.default, { name: rightIcon, position: "absolute", top: 46 / 2, right: theme.styles.space + 1, transform: "translateY(-50%)", pointerEvents: "none" }))) : undefined, insideInputFieldComponent] }), (errorText || infoText) && ((0, jsx_runtime_1.jsx)(Text_1.default, { as: "span", display: "block", fontSize: 14, color: errorText ? theme.colors.error : theme.colors.textSecondary, children: errorText || infoText }))] }));
+    return ((0, jsx_runtime_1.jsxs)(Div_1.default.column, { width: "100%", gap: theme.styles.gap / 2, ...styledComponentStylesWithExcluded, children: [label && (0, jsx_runtime_1.jsx)(Label_1.default, { text: label, required: required, isError: !!errorText }), (0, jsx_runtime_1.jsxs)(Div_1.default, { position: "relative", width: "100%", children: [leftIcon && ((0, jsx_runtime_1.jsx)(Icon_1.default, { name: leftIcon, position: "absolute", top: 46 / 2, left: theme.styles.space + 1, transform: "translateY(-50%)", pointerEvents: "none", zIndex: 1002 })), (0, jsx_runtime_1.jsx)(InputElement, { theme: theme, withLeftIcon: leftIcon !== undefined, withRightIcon: rightIcon !== undefined, required: required, placeholder: placeholder ?? label, onChange: onChangeElement, ...styledComponentStylesWithoutExcluded, ...dataProps, ...ariaProps, ...restProps, ref: ref }), rightIcon ? (onClickRightIcon ? ((0, jsx_runtime_1.jsx)(Button_1.default.icon, { icon: rightIcon, position: "absolute", top: 46 / 2, right: theme.styles.space + 1 - theme.styles.space / 2, transform: "translateY(-50%)", onClick: onClickRightIcon })) : ((0, jsx_runtime_1.jsx)(Icon_1.default, { name: rightIcon, position: "absolute", top: 46 / 2, right: theme.styles.space + 1, transform: "translateY(-50%)", pointerEvents: "none" }))) : undefined, insideInputFieldComponent] }), (errorText || infoText) && ((0, jsx_runtime_1.jsx)(Text_1.default, { as: "span", display: "block", fontSize: 14, color: errorText ? theme.colors.error : theme.colors.textSecondary, children: errorText || infoText }))] }));
 });
 InputFieldComponent.multiline = (0, react_1.forwardRef)(function Textarea({ label, errorText, infoText, onChange, onChangeValue, required, ...props }, ref) {
     const theme = (0, BetterHtmlProvider_1.useTheme)();
@@ -126,7 +141,7 @@ InputFieldComponent.multiline = (0, react_1.forwardRef)(function Textarea({ labe
         onChange?.(event);
         onChangeValue?.(event.target.value);
     }, [onChange, onChangeValue]);
-    return ((0, jsx_runtime_1.jsxs)(Div_1.default.column, { gap: theme.styles.gap / 2, children: [label && ((0, jsx_runtime_1.jsxs)(Text_1.default, { as: "label", fontSize: 14, color: errorText ? theme.colors.error : theme.colors.textSecondary, children: [label, required && ((0, jsx_runtime_1.jsxs)(Text_1.default, { as: "span", fontSize: 16, color: theme.colors.error, children: [" ", "*"] }))] })), (0, jsx_runtime_1.jsx)(TextareaElement, { theme: theme, required: required, onChange: onChangeElement, ...styledComponentStyles, ...dataProps, ...ariaProps, ...restProps, ref: ref }), (errorText || infoText) && ((0, jsx_runtime_1.jsx)(Text_1.default, { as: "span", display: "block", marginTop: theme.styles.gap / 2, color: errorText ? theme.colors.error : theme.colors.textSecondary, fontSize: 14, children: errorText || infoText }))] }));
+    return ((0, jsx_runtime_1.jsxs)(Div_1.default.column, { gap: theme.styles.gap / 2, children: [label && (0, jsx_runtime_1.jsx)(Label_1.default, { text: label, required: required, isError: !!errorText }), (0, jsx_runtime_1.jsx)(TextareaElement, { theme: theme, required: required, onChange: onChangeElement, ...styledComponentStyles, ...dataProps, ...ariaProps, ...restProps, ref: ref }), (errorText || infoText) && ((0, jsx_runtime_1.jsx)(Text_1.default, { as: "span", display: "block", marginTop: theme.styles.gap / 2, color: errorText ? theme.colors.error : theme.colors.textSecondary, fontSize: 14, children: errorText || infoText }))] }));
 });
 InputFieldComponent.email = (0, react_1.forwardRef)(function Email({ ...props }, ref) {
     return ((0, jsx_runtime_1.jsx)(InputFieldComponent, { type: "email", placeholder: "your@email.here", autoComplete: "email", autoCorrect: "off", autoCapitalize: "off", ref: ref, ...props }));
@@ -138,9 +153,46 @@ InputFieldComponent.password = (0, react_1.forwardRef)(function Email({ ...props
 InputFieldComponent.search = (0, react_1.forwardRef)(function Email({ ...props }, ref) {
     return (0, jsx_runtime_1.jsx)(InputFieldComponent, { leftIcon: "magnifyingGlass", placeholder: "Search...", ref: ref, ...props });
 });
+InputFieldComponent.phoneNumber = (0, react_1.forwardRef)(function Email({ value, onChangeValue, ...props }, ref) {
+    const theme = (0, BetterHtmlProvider_1.useTheme)();
+    const [dropdownValue, setDropdownValue] = (0, react_1.useState)();
+    const [inputFieldValue, setInputFieldValue] = (0, react_1.useState)(value?.toString() ?? "");
+    const renderOption = (0, react_1.useCallback)((option, index, isSelected) => ((0, jsx_runtime_1.jsxs)(Div_1.default.row, { alignItems: "center", gap: theme.styles.gap, children: [(0, jsx_runtime_1.jsx)(Image_1.default, { src: `https://flagcdn.com/w80/${option.data?.code.toString().toLowerCase()}.webp`, width: 20 }), (0, jsx_runtime_1.jsx)(Text_1.default, { children: option.label })] })), []);
+    const onChangeValueElement = (0, react_1.useCallback)((value) => {
+        const readyValue = value.replace(/\D/g, "");
+        setInputFieldValue(readyValue);
+        onChangeValue?.(dropdownValue ? `+${dropdownValue}${readyValue}` : readyValue);
+    }, [onChangeValue, dropdownValue]);
+    const options = (0, react_1.useMemo)(() => countries_1.countries.map((country) => ({
+        value: country.phoneNumberExtension,
+        label: `+${country.phoneNumberExtension}`,
+        data: country,
+    })), []);
+    const defaultValue = (0, react_1.useMemo)(() => {
+        const thisTimeZone = Intl.DateTimeFormat().resolvedOptions().timeZone;
+        const initialDefaultValue = options.find((option) => option.data?.timeZone === thisTimeZone)?.value ?? "";
+        setDropdownValue(initialDefaultValue);
+        return initialDefaultValue;
+    }, [options]);
+    (0, react_1.useEffect)(() => {
+        if (value === undefined || value === null)
+            return;
+        const newValue = value.toString();
+        const country = countries_1.countries.find((country) => country.phoneNumberExtension ===
+            newValue.slice(newValue.startsWith("+") ? 1 : 0, country.phoneNumberExtension.length + (newValue.startsWith("+") ? 1 : 0)));
+        if (!country) {
+            setInputFieldValue(newValue);
+            return;
+        }
+        setDropdownValue(country.phoneNumberExtension);
+        setInputFieldValue(newValue.slice(country?.phoneNumberExtension.length + 1));
+    }, [value]);
+    return ((0, jsx_runtime_1.jsxs)(Div_1.default.row, { children: [(0, jsx_runtime_1.jsx)(Dropdown_1.default, { options: options, renderOption: renderOption, width: 130, withSearch: true, placeholder: "+00", inputFieldClassName: "react-better-html-phone-number-holder", defaultValue: defaultValue, value: dropdownValue, onChange: setDropdownValue, withoutClearButton: true }), (0, jsx_runtime_1.jsx)(InputFieldComponent, { placeholder: "Phone number", className: "react-better-html-phone-number", value: inputFieldValue, onChangeValue: onChangeValueElement, ref: ref, ...props })] }));
+});
 const InputField = (0, react_1.memo)(InputFieldComponent);
 InputField.multiline = InputFieldComponent.multiline;
 InputField.email = InputFieldComponent.email;
 InputField.password = InputFieldComponent.password;
 InputField.search = InputFieldComponent.search;
+InputField.phoneNumber = InputFieldComponent.phoneNumber;
 exports.default = InputField;

package/dist/components/Label.d.ts

@@ -0,0 +1,8 @@
+type LabelProps = {
+    text?: string;
+    required?: boolean;
+    isError?: boolean;
+};
+declare function Label({ text, required, isError }: LabelProps): import("react/jsx-runtime").JSX.Element;
+declare const _default: import("react").MemoExoticComponent<typeof Label>;
+export default _default;

package/dist/components/Label.js

@@ -0,0 +1,14 @@
+"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 Text_1 = __importDefault(require("./Text"));
+const BetterHtmlProvider_1 = require("./BetterHtmlProvider");
+function Label({ text, required, isError }) {
+    const theme = (0, BetterHtmlProvider_1.useTheme)();
+    return ((0, jsx_runtime_1.jsxs)(Text_1.default, { as: "label", height: 16, fontSize: 14, color: isError ? theme.colors.error : theme.colors.textSecondary, children: [text, required && ((0, jsx_runtime_1.jsxs)(Text_1.default, { as: "span", fontSize: 16, color: theme.colors.error, children: [" ", "*"] }))] }));
+}
+exports.default = (0, react_1.memo)(Label);

package/dist/constants/countries.d.ts

@@ -0,0 +1,2 @@
+import { Country } from "../types/countries";
+export declare const countries: Country[];