@arkyn/components 3.0.1-beta.5 → 3.0.1-beta.50

package/dist/components/phoneInput/index.js

@@ -0,0 +1,205 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { countries } from "@arkyn/templates";
+import { useId, useRef, useState } from "react";
+import { useForm } from "../../hooks/useForm";
+import { getDefaultFormatPhoneNumber } from "../../utils/phoneInputUtilities";
+import { FieldError } from "../fieldError";
+import { FieldLabel } from "../fieldLabel";
+import { FieldWrapper } from "../fieldWrapper";
+import { PhoneInputContainer } from "./phoneInputContainer";
+import { PhoneInputCountriesOverlay } from "./phoneInputCountriesOverlay";
+import { PhoneInputCountryOption } from "./phoneInputCountryOption";
+import { PhoneInputCountryOptionsContainer } from "./phoneInputCountryOptionsContainer";
+import { PhoneInputCountrySelector } from "./phoneInputCountrySelector";
+import { PhoneInputMask } from "./phoneInputMask";
+/**
+ * PhoneInput component - used for international phone number input with country selection and automatic formatting
+ *
+ * @param props - PhoneInput component properties
+ * @param props.name - Required field name for form handling and phone input identification
+ * @param props.label - Optional label text to display above the phone input
+ * @param props.showAsterisk - Whether to show asterisk on label for required fields
+ * @param props.errorMessage - Error message to display below the phone input
+ * @param props.size - Size variant of the phone input. Default: "md"
+ * @param props.variant - Visual variant of the phone input. Default: "solid"
+ * @param props.defaultValue - Default phone number value for the input
+ * @param props.defaultCountry - Default country ISO code to be selected. Uses country index 30 if not provided
+ * @param props.disabled - Whether the phone input is disabled. Default: false
+ * @param props.readOnly - Whether the phone input is read-only. Default: false
+ * @param props.isLoading - Whether the phone input is in loading state. Default: false
+ * @param props.className - Additional CSS classes for styling
+ * @param props.id - Optional unique identifier for the input
+ * @param props.searchCountryPlaceholder - Placeholder text for country search field. Default: "Pesquisar país"
+ * @param props.notFoundCountryText - Text displayed when no countries match the search. Default: "Nenhum país encontrado"
+ * @param props.onChange - Callback function called when phone number changes, receives the formatted value with country code
+ *
+ * @returns PhoneInput JSX element wrapped in FieldWrapper with country selector, masked input, and validation
+ *
+ * @example
+ * ```tsx
+ * // Basic phone input
+ * <PhoneInput name="phone" />
+ *
+ * // Phone input with label and default country
+ * <PhoneInput
+ *   name="contactPhone"
+ *   label="Contact Phone"
+ *   defaultCountry="US"
+ *   showAsterisk
+ * />
+ *
+ * // Phone input with validation and custom text
+ * <PhoneInput
+ *   name="businessPhone"
+ *   label="Business Phone"
+ *   errorMessage="Please enter a valid phone number"
+ *   searchCountryPlaceholder="Search country..."
+ *   notFoundCountryText="Country not found"
+ * />
+ *
+ * // Large phone input with default value
+ * <PhoneInput
+ *   name="emergencyContact"
+ *   label="Emergency Contact"
+ *   size="lg"
+ *   variant="outline"
+ *   defaultValue="+1 (555) 123-4567"
+ *   defaultCountry="US"
+ * />
+ *
+ * // Controlled phone input with callback
+ * <PhoneInput
+ *   name="userPhone"
+ *   label="Your Phone Number"
+ *   onChange={(formattedPhone) => {
+ *     console.log('Phone number:', formattedPhone);
+ *     setPhoneNumber(formattedPhone);
+ *   }}
+ *   defaultCountry="BR"
+ *   showAsterisk
+ * />
+ *
+ * // Read-only phone input for display
+ * <PhoneInput
+ *   name="displayPhone"
+ *   label="Registered Phone"
+ *   defaultValue="+55 11 99999-9999"
+ *   readOnly
+ *   variant="outline"
+ * />
+ *
+ * // Disabled phone input
+ * <PhoneInput
+ *   name="lockedPhone"
+ *   label="Phone (Locked)"
+ *   defaultValue="+1 (555) 987-6543"
+ *   disabled
+ *   className="locked-field"
+ * />
+ *
+ * // Phone input with loading state
+ * <PhoneInput
+ *   name="loadingPhone"
+ *   label="Phone Number"
+ *   isLoading
+ *   defaultCountry="CA"
+ * />
+ * ```
+ *
+ * @remarks
+ * This component provides:
+ * - Automatic phone number formatting based on selected country
+ * - Searchable country dropdown with flags and country codes
+ * - Support for international phone number formats
+ * - Integration with form validation systems
+ * - Accessibility features with proper labeling
+ *
+ * The component uses country data from @arkyn/templates and automatically formats
+ * phone numbers according to each country's specific format and mask patterns.
+ */
+function PhoneInput(props) {
+    const { defaultCountry, label, className = "", disabled = false, errorMessage: baseErrorMessage, isLoading = false, readOnly = false, size = "md", defaultValue = "", variant = "solid", showAsterisk, name, onChange, searchCountryPlaceholder = "Pesquisar país", notFoundCountryText = "Nenhum país encontrado", id, } = props;
+    const defaultData = getDefaultFormatPhoneNumber(defaultValue);
+    const [isFocused, setIsFocused] = useState(false);
+    const [search, setSearch] = useState("");
+    const [showCountryOptions, setShowCountryOptions] = useState(false);
+    const [value, setValue] = useState(defaultData.formattedNumber || "");
+    const [currentCountry, setCurrentCountry] = useState(() => {
+        if (defaultData.country)
+            return defaultData.country;
+        const country = countries.find((country) => country.iso === defaultCountry);
+        if (country)
+            return country;
+        return countries[30];
+    });
+    const { fieldErrors } = useForm();
+    const phoneInputRef = useRef(null);
+    const phoneInputId = id || useId();
+    const errorMessage = baseErrorMessage || fieldErrors?.[name];
+    const isError = !!errorMessage;
+    const isDisabled = disabled || isLoading;
+    const inputPhoneMaskRef = useRef(null);
+    function handleContainerFocus() {
+        if (isDisabled)
+            return;
+        if (isFocused || showCountryOptions)
+            return;
+        setIsFocused(true);
+        if (inputPhoneMaskRef.current)
+            inputPhoneMaskRef.current.focus();
+    }
+    function handleOpenCountryOptions() {
+        setShowCountryOptions(true);
+        setIsFocused(true);
+    }
+    function handleCloseCountryOptions() {
+        setShowCountryOptions(false);
+        setIsFocused(false);
+    }
+    function handleInputFocus() {
+        setIsFocused(true);
+    }
+    function handleInputBlur() {
+        setIsFocused(false);
+    }
+    function filterCountryFunction(country) {
+        return country.name.toLowerCase().includes(search.toLowerCase());
+    }
+    function removeNumberMasks(number) {
+        if (currentCountry.prefix) {
+            return number
+                .replace(currentCountry.prefix, "")
+                .replaceAll(" ", "")
+                .replaceAll("-", "")
+                .replaceAll("(", "")
+                .replaceAll(")", "")
+                .trim();
+        }
+        return number
+            .replaceAll(" ", "")
+            .replaceAll("-", "")
+            .replaceAll("(", "")
+            .replaceAll(")", "")
+            .trim();
+    }
+    function inputValue(props) {
+        let returnValue = currentCountry.code;
+        if (currentCountry.prefix)
+            returnValue += `-${currentCountry.prefix}`;
+        returnValue += " ";
+        returnValue += removeNumberMasks(props || value);
+        return returnValue;
+    }
+    return (_jsxs(FieldWrapper, { children: [label && _jsx(FieldLabel, { showAsterisk: showAsterisk, children: label }), _jsxs(PhoneInputContainer, { id: phoneInputId, disabled: isDisabled, isError: isError, isLoading: isLoading, isFocused: isFocused, readOnly: readOnly, size: size, variant: variant, className: className, onFocus: handleContainerFocus, children: [_jsx(PhoneInputCountrySelector, { currentCountry: currentCountry, onClick: handleOpenCountryOptions, size: size }), _jsxs(PhoneInputCountryOptionsContainer, { isOpen: isDisabled ? false : readOnly ? false : showCountryOptions, search: search, placeholder: searchCountryPlaceholder, onSearch: setSearch, children: [countries
+                                .filter((country) => filterCountryFunction(country))
+                                .map((country) => (_jsx(PhoneInputCountryOption, { country: country, handleChangeValue: () => {
+                                    setCurrentCountry(country);
+                                    setShowCountryOptions(false);
+                                    setValue(country.mask);
+                                }, isActive: country.iso === currentCountry.iso, size: size }, country.iso))), countries.filter((country) => filterCountryFunction(country))
+                                .length === 0 && _jsx("p", { children: notFoundCountryText })] }), _jsx(PhoneInputCountriesOverlay, { isOpen: isDisabled ? false : readOnly ? false : showCountryOptions, onClick: handleCloseCountryOptions }), _jsx(PhoneInputMask, { ref: inputPhoneMaskRef, readonly: readOnly, currentCountry: currentCountry, value: value, disabled: isDisabled, onBlur: handleInputBlur, onFocus: handleInputFocus, size: size, onChange: (e) => {
+                            setValue(e);
+                            onChange && onChange(inputValue(e));
+                        } }), _jsx("input", { ref: phoneInputRef, type: "hidden", name: name, value: inputValue() })] }), errorMessage && _jsx(FieldError, { children: errorMessage })] }));
+}
+export { PhoneInput };

package/dist/components/phoneInput/phoneInputContainer/index.d.ts

@@ -0,0 +1,18 @@
+import { ReactNode } from "react";
+import "./styles.css";
+type PhoneInputContainerProps = {
+    children: ReactNode;
+    onFocus: () => void;
+    isError: boolean;
+    disabled: boolean;
+    readOnly: boolean;
+    isLoading: boolean;
+    isFocused: boolean;
+    className?: string;
+    id: string;
+    variant: "solid" | "outline";
+    size: "md" | "lg";
+};
+declare function PhoneInputContainer(props: PhoneInputContainerProps): import("react/jsx-runtime").JSX.Element;
+export { PhoneInputContainer };
+//# sourceMappingURL=index.d.ts.map

package/dist/components/phoneInput/phoneInputContainer/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/phoneInput/phoneInputContainer/index.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAClC,OAAO,cAAc,CAAC;AAEtB,KAAK,wBAAwB,GAAG;IAC9B,QAAQ,EAAE,SAAS,CAAC;IACpB,OAAO,EAAE,MAAM,IAAI,CAAC;IACpB,OAAO,EAAE,OAAO,CAAC;IACjB,QAAQ,EAAE,OAAO,CAAC;IAClB,QAAQ,EAAE,OAAO,CAAC;IAClB,SAAS,EAAE,OAAO,CAAC;IACnB,SAAS,EAAE,OAAO,CAAC;IACnB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,EAAE,EAAE,MAAM,CAAC;IACX,OAAO,EAAE,OAAO,GAAG,SAAS,CAAC;IAC7B,IAAI,EAAE,IAAI,GAAG,IAAI,CAAC;CACnB,CAAC;AAEF,iBAAS,mBAAmB,CAAC,KAAK,EAAE,wBAAwB,2CA0B3D;AAED,OAAO,EAAE,mBAAmB,EAAE,CAAC"}

package/dist/components/{PhoneInput/components/PhoneInputCountriesOverlay → phoneInput/phoneInputCountriesOverlay}/index.d.ts

@@ -1,5 +1,8 @@
-import { PhoneInputCountriesOverlayProps } from "@arkyn/types";
 import "./styles.css";
+type PhoneInputCountriesOverlayProps = {
+    isOpen: boolean;
+    onClick: () => void;
+};
 declare function PhoneInputCountriesOverlay(props: PhoneInputCountriesOverlayProps): import("react/jsx-runtime").JSX.Element;
 export { PhoneInputCountriesOverlay };
 //# sourceMappingURL=index.d.ts.map

package/dist/components/phoneInput/phoneInputCountriesOverlay/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/phoneInput/phoneInputCountriesOverlay/index.tsx"],"names":[],"mappings":"AAAA,OAAO,cAAc,CAAC;AAEtB,KAAK,+BAA+B,GAAG;IACrC,MAAM,EAAE,OAAO,CAAC;IAChB,OAAO,EAAE,MAAM,IAAI,CAAC;CACrB,CAAC;AAEF,iBAAS,0BAA0B,CAAC,KAAK,EAAE,+BAA+B,2CAMzE;AAED,OAAO,EAAE,0BAA0B,EAAE,CAAC"}

package/dist/components/phoneInput/phoneInputCountryOption/index.d.ts

@@ -0,0 +1,18 @@
+import "./styles.css";
+type CountryType = {
+    name: string;
+    code: string;
+    iso: string;
+    prefix: null | string;
+    flag: string;
+    mask: string;
+};
+type PhoneInputCountryOptionProps = {
+    country: CountryType;
+    size: "md" | "lg";
+    isActive: boolean;
+    handleChangeValue: (country: CountryType) => void;
+};
+declare function PhoneInputCountryOption(props: PhoneInputCountryOptionProps): import("react/jsx-runtime").JSX.Element;
+export { PhoneInputCountryOption };
+//# sourceMappingURL=index.d.ts.map

package/dist/components/phoneInput/phoneInputCountryOption/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/phoneInput/phoneInputCountryOption/index.tsx"],"names":[],"mappings":"AACA,OAAO,cAAc,CAAC;AAEtB,KAAK,WAAW,GAAG;IACjB,IAAI,EAAE,MAAM,CAAC;IACb,IAAI,EAAE,MAAM,CAAC;IACb,GAAG,EAAE,MAAM,CAAC;IACZ,MAAM,EAAE,IAAI,GAAG,MAAM,CAAC;IACtB,IAAI,EAAE,MAAM,CAAC;IACb,IAAI,EAAE,MAAM,CAAC;CACd,CAAC;AAEF,KAAK,4BAA4B,GAAG;IAClC,OAAO,EAAE,WAAW,CAAC;IACrB,IAAI,EAAE,IAAI,GAAG,IAAI,CAAC;IAClB,QAAQ,EAAE,OAAO,CAAC;IAClB,iBAAiB,EAAE,CAAC,OAAO,EAAE,WAAW,KAAK,IAAI,CAAC;CACnD,CAAC;AAEF,iBAAS,uBAAuB,CAAC,KAAK,EAAE,4BAA4B,2CAanE;AAED,OAAO,EAAE,uBAAuB,EAAE,CAAC"}

package/dist/components/phoneInput/phoneInputCountryOptionsContainer/index.d.ts

@@ -0,0 +1,12 @@
+import { ReactNode } from "react";
+import "./styles.css";
+type PhoneInputCountryOptionsContainerProps = {
+    isOpen: boolean;
+    children: ReactNode;
+    search: string;
+    placeholder: string;
+    onSearch: (value: string) => void;
+};
+declare function PhoneInputCountryOptionsContainer(props: PhoneInputCountryOptionsContainerProps): import("react/jsx-runtime").JSX.Element;
+export { PhoneInputCountryOptionsContainer };
+//# sourceMappingURL=index.d.ts.map

package/dist/components/phoneInput/phoneInputCountryOptionsContainer/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/phoneInput/phoneInputCountryOptionsContainer/index.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAe,SAAS,EAA+B,MAAM,OAAO,CAAC;AAE5E,OAAO,cAAc,CAAC;AAEtB,KAAK,sCAAsC,GAAG;IAC5C,MAAM,EAAE,OAAO,CAAC;IAChB,QAAQ,EAAE,SAAS,CAAC;IACpB,MAAM,EAAE,MAAM,CAAC;IACf,WAAW,EAAE,MAAM,CAAC;IACpB,QAAQ,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;CACnC,CAAC;AAEF,iBAAS,iCAAiC,CACxC,KAAK,EAAE,sCAAsC,2CA6D9C;AAED,OAAO,EAAE,iCAAiC,EAAE,CAAC"}

package/dist/components/phoneInput/phoneInputCountryOptionsContainer/index.js

@@ -0,0 +1,40 @@
+import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useEffect, useRef, useState } from "react";
+import { useScrollLock } from "../../../hooks/useScrollLock";
+import "./styles.css";
+function PhoneInputCountryOptionsContainer(props) {
+    const { children, isOpen, onSearch, search, placeholder } = props;
+    const containerRef = useRef(null);
+    const [position, setPosition] = useState("bottom");
+    function handleSearch(e) {
+        onSearch(e.target.value);
+    }
+    useScrollLock(isOpen);
+    useEffect(() => {
+        if (!isOpen)
+            return;
+        const checkContainerPosition = () => {
+            if (!containerRef.current)
+                return;
+            const parentElement = containerRef.current.parentElement;
+            if (!parentElement)
+                return;
+            const parentRect = parentElement.getBoundingClientRect();
+            const viewportHeight = window.innerHeight;
+            const estimatedContainerHeight = 300;
+            const spaceBelow = viewportHeight - parentRect.bottom;
+            if (spaceBelow < estimatedContainerHeight &&
+                parentRect.top > estimatedContainerHeight) {
+                setPosition("top");
+            }
+            else {
+                setPosition("bottom");
+            }
+        };
+        checkContainerPosition();
+    }, [isOpen]);
+    if (!isOpen)
+        return _jsx(_Fragment, {});
+    return (_jsxs("div", { className: `arkynPhoneInputCountryOptionsContainer ${position}`, ref: containerRef, children: [_jsx("input", { type: "search", name: "search-select", className: "arkynPhoneInputCountryOptionsContainerSearchSelect", value: search, id: "input-search", placeholder: placeholder, onChange: handleSearch }), children] }));
+}
+export { PhoneInputCountryOptionsContainer };

package/dist/components/phoneInput/phoneInputCountrySelector/index.d.ts

@@ -0,0 +1,17 @@
+import "./styles.css";
+type CountryType = {
+    name: string;
+    code: string;
+    iso: string;
+    prefix: null | string;
+    flag: string;
+    mask: string;
+};
+type PhoneInputCountrySelectorProps = {
+    size: "md" | "lg";
+    currentCountry: CountryType;
+    onClick: () => void;
+};
+declare function PhoneInputCountrySelector(props: PhoneInputCountrySelectorProps): import("react/jsx-runtime").JSX.Element;
+export { PhoneInputCountrySelector };
+//# sourceMappingURL=index.d.ts.map

package/dist/components/phoneInput/phoneInputCountrySelector/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/phoneInput/phoneInputCountrySelector/index.tsx"],"names":[],"mappings":"AAGA,OAAO,cAAc,CAAC;AAEtB,KAAK,WAAW,GAAG;IACjB,IAAI,EAAE,MAAM,CAAC;IACb,IAAI,EAAE,MAAM,CAAC;IACb,GAAG,EAAE,MAAM,CAAC;IACZ,MAAM,EAAE,IAAI,GAAG,MAAM,CAAC;IACtB,IAAI,EAAE,MAAM,CAAC;IACb,IAAI,EAAE,MAAM,CAAC;CACd,CAAC;AAEF,KAAK,8BAA8B,GAAG;IACpC,IAAI,EAAE,IAAI,GAAG,IAAI,CAAC;IAClB,cAAc,EAAE,WAAW,CAAC;IAC5B,OAAO,EAAE,MAAM,IAAI,CAAC;CACrB,CAAC;AAEF,iBAAS,yBAAyB,CAAC,KAAK,EAAE,8BAA8B,2CAcvE;AAED,OAAO,EAAE,yBAAyB,EAAE,CAAC"}

package/dist/components/{PhoneInput/components/PhoneInputCountrySelector → phoneInput/phoneInputCountrySelector}/index.js

@@ -1,6 +1,6 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { ChevronDown } from "lucide-react";
-import { Divider } from "../../../Divider";
+import { Divider } from "../../divider";
 import "./styles.css";
 function PhoneInputCountrySelector(props) {
     const { currentCountry, onClick } = props;

package/dist/components/phoneInput/phoneInputMask/index.d.ts

@@ -0,0 +1,22 @@
+import "./style.css";
+type CountryType = {
+    name: string;
+    code: string;
+    iso: string;
+    prefix: null | string;
+    flag: string;
+    mask: string;
+};
+type PhoneInputMaskProps = {
+    onFocus: () => void;
+    onBlur: () => void;
+    disabled: boolean;
+    readonly: boolean;
+    size: "md" | "lg";
+    currentCountry: CountryType;
+    value: string;
+    onChange: (e: string) => void;
+};
+declare const PhoneInputMask: import("react").ForwardRefExoticComponent<PhoneInputMaskProps & import("react").RefAttributes<HTMLInputElement>>;
+export { PhoneInputMask };
+//# sourceMappingURL=index.d.ts.map

package/dist/components/phoneInput/phoneInputMask/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/phoneInput/phoneInputMask/index.tsx"],"names":[],"mappings":"AAiBA,OAAO,aAAa,CAAC;AAErB,KAAK,WAAW,GAAG;IACjB,IAAI,EAAE,MAAM,CAAC;IACb,IAAI,EAAE,MAAM,CAAC;IACb,GAAG,EAAE,MAAM,CAAC;IACZ,MAAM,EAAE,IAAI,GAAG,MAAM,CAAC;IACtB,IAAI,EAAE,MAAM,CAAC;IACb,IAAI,EAAE,MAAM,CAAC;CACd,CAAC;AAEF,KAAK,mBAAmB,GAAG;IACzB,OAAO,EAAE,MAAM,IAAI,CAAC;IACpB,MAAM,EAAE,MAAM,IAAI,CAAC;IACnB,QAAQ,EAAE,OAAO,CAAC;IAClB,QAAQ,EAAE,OAAO,CAAC;IAClB,IAAI,EAAE,IAAI,GAAG,IAAI,CAAC;IAClB,cAAc,EAAE,WAAW,CAAC;IAC5B,KAAK,EAAE,MAAM,CAAC;IACd,QAAQ,EAAE,CAAC,CAAC,EAAE,MAAM,KAAK,IAAI,CAAC;CAC/B,CAAC;AASF,QAAA,MAAM,cAAc,kHAkEnB,CAAC;AAEF,OAAO,EAAE,cAAc,EAAE,CAAC"}

package/dist/components/{PhoneInput/components/PhoneInputMask → phoneInput/phoneInputMask}/index.js

@@ -1,13 +1,13 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { InputMask } from "@react-input/mask";
 import { forwardRef, useEffect, useState, } from "react";
-import { applyMask, clear, getMask, MAX_LENGTH, TYPES, } from "../../services/utils";
+import { applyMask, clear, getMask, MAX_LENGTH, TYPES, } from "../../../utils/phoneInputUtilities";
 import "./style.css";
 const BaseInput = forwardRef((props, ref) => {
     return _jsx("input", { ref: ref, ...props });
 });
 const PhoneInputMask = forwardRef((props, ref) => {
-    const { onFocus, onBlur, size, onChange, value, currentCountry, disabled } = props;
+    const { onFocus, readonly, onBlur, size, onChange, value, currentCountry, disabled, } = props;
     const [isMounted, setIsMounted] = useState(false);
     useEffect(() => {
         if (isMounted)
@@ -29,6 +29,6 @@ const PhoneInputMask = forwardRef((props, ref) => {
     if (currentCountry.code === "+55") {
         return (_jsx("input", { value: value, onChange: handleChange, className: className, onFocus: onFocus, onBlur: onBlur, disabled: disabled, ref: ref }));
     }
-    return (_jsx(InputMask, { value: value, onChange: (e) => onChange(e.target.value), className: className, component: BaseInput, onFocus: onFocus, onBlur: onBlur, disabled: disabled, mask: currentCountry.mask, showMask: true, replacement: { _: /\d/ }, ref: ref }));
+    return (_jsx(InputMask, { value: value, readOnly: readonly, onChange: (e) => onChange(e.target.value), className: className, component: BaseInput, onFocus: onFocus, onBlur: onBlur, disabled: disabled, mask: currentCountry.mask, showMask: true, replacement: { _: /\d/ }, ref: ref }));
 });
 export { PhoneInputMask };

package/dist/components/popover/index.d.ts

@@ -0,0 +1,146 @@
+import { ReactNode } from "react";
+import "./styles.css";
+type OrientationProps = "bottomLeft" | "bottomRight" | "topLeft" | "topRight" | "top" | "left" | "bottom" | "right";
+type PopoverProps = {
+    children: ReactNode;
+    button: ReactNode;
+    closeOnClick?: boolean;
+    orientation?: OrientationProps;
+    className?: string;
+};
+/**
+ * Popover component - used for displaying contextual content in a floating container that appears relative to a trigger button
+ *
+ * @param props - Popover component properties
+ * @param props.children - Required content to display inside the popover when opened
+ * @param props.button - Required trigger element that opens the popover when clicked
+ * @param props.closeOnClick - Whether the popover should close when clicking on its content. Default: undefined (remains open)
+ * @param props.orientation - Position where the popover appears relative to the trigger button. Default: "bottomLeft"
+ * @param props.className - Additional CSS classes for styling the popover container
+ *
+ * @returns Popover JSX element with trigger button, animated content, and overlay for outside click handling
+ *
+ * @example
+ * ```tsx
+ * // Basic popover with default orientation
+ * <Popover
+ *   button={<button>Click me</button>}
+ * >
+ *   <div>Popover content here</div>
+ * </Popover>
+ *
+ * // Popover with custom orientation
+ * <Popover
+ *   button={<IconButton icon="menu" />}
+ *   orientation="topRight"
+ * >
+ *   <nav>
+ *     <a href="/profile">Profile</a>
+ *     <a href="/settings">Settings</a>
+ *     <a href="/logout">Logout</a>
+ *   </nav>
+ * </Popover>
+ *
+ * // Popover that closes when content is clicked
+ * <Popover
+ *   button={<Button>Select Option</Button>}
+ *   closeOnClick
+ *   orientation="bottom"
+ * >
+ *   <ul>
+ *     <li onClick={() => selectOption('option1')}>Option 1</li>
+ *     <li onClick={() => selectOption('option2')}>Option 2</li>
+ *     <li onClick={() => selectOption('option3')}>Option 3</li>
+ *   </ul>
+ * </Popover>
+ *
+ * // Popover with custom styling and left orientation
+ * <Popover
+ *   button={<Button variant="outline">Info</Button>}
+ *   orientation="left"
+ *   className="custom-popover"
+ * >
+ *   <div className="info-panel">
+ *     <h3>Additional Information</h3>
+ *     <p>This is some helpful information that appears in a popover.</p>
+ *     <Button size="sm">Learn More</Button>
+ *   </div>
+ * </Popover>
+ *
+ * // Popover with form content and top-right positioning
+ * <Popover
+ *   button={<Badge>Filter</Badge>}
+ *   orientation="topRight"
+ * >
+ *   <form className="filter-form">
+ *     <Input name="search" placeholder="Search..." />
+ *     <Select name="category" options={categories} />
+ *     <Button type="submit">Apply Filters</Button>
+ *   </form>
+ * </Popover>
+ *
+ * // Popover with complex content and bottom-right positioning
+ * <Popover
+ *   button={<Avatar src="/user.jpg" />}
+ *   orientation="bottomRight"
+ *   closeOnClick
+ * >
+ *   <div className="user-menu">
+ *     <div className="user-info">
+ *       <img src="/user.jpg" alt="User" />
+ *       <div>
+ *         <h4>John Doe</h4>
+ *         <p>john@example.com</p>
+ *       </div>
+ *     </div>
+ *     <Divider />
+ *     <MenuItem icon="user">Profile</MenuItem>
+ *     <MenuItem icon="settings">Settings</MenuItem>
+ *     <MenuItem icon="logout">Sign Out</MenuItem>
+ *   </div>
+ * </Popover>
+ *
+ * // Popover for context menu with right orientation
+ * <Popover
+ *   button={<Button variant="ghost" size="sm">⋮</Button>}
+ *   orientation="right"
+ *   closeOnClick
+ * >
+ *   <div className="context-menu">
+ *     <button onClick={() => editItem()}>Edit</button>
+ *     <button onClick={() => duplicateItem()}>Duplicate</button>
+ *     <button onClick={() => deleteItem()}>Delete</button>
+ *   </div>
+ * </Popover>
+ *
+ * // Popover with notification content and top positioning
+ * <Popover
+ *   button={<Badge count={3}>🔔</Badge>}
+ *   orientation="top"
+ * >
+ *   <div className="notifications">
+ *     <h3>Recent Notifications</h3>
+ *     <div className="notification-item">New message received</div>
+ *     <div className="notification-item">Task completed</div>
+ *     <div className="notification-item">Meeting reminder</div>
+ *     <Button variant="ghost" size="sm">View All</Button>
+ *   </div>
+ * </Popover>
+ * ```
+ *
+ * @remarks
+ * This component provides:
+ * - 8 different orientation options for flexible positioning (bottomLeft, bottomRight, topLeft, topRight, top, left, bottom, right)
+ * - Smooth fade animation using Framer Motion for opening and closing
+ * - Automatic scroll lock when popover is open to prevent background scrolling
+ * - Click-outside-to-close functionality via overlay
+ * - Optional click-on-content-to-close behavior
+ * - Full accessibility support for keyboard navigation and screen readers
+ *
+ * The popover automatically handles positioning, animations, and user interactions.
+ * It uses CSS classes for styling and can be customized through the className prop.
+ * The component is ideal for dropdowns, context menus, tooltips, and any contextual UI elements.
+ */
+declare function Popover(props: PopoverProps): import("react/jsx-runtime").JSX.Element;
+export { Popover };
+//# sourceMappingURL=index.d.ts.map

package/dist/components/popover/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/popover/index.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,SAAS,EAAY,MAAM,OAAO,CAAC;AAG5C,OAAO,cAAc,CAAC;AAEtB,KAAK,gBAAgB,GACjB,YAAY,GACZ,aAAa,GACb,SAAS,GACT,UAAU,GACV,KAAK,GACL,MAAM,GACN,QAAQ,GACR,OAAO,CAAC;AAEZ,KAAK,YAAY,GAAG;IAClB,QAAQ,EAAE,SAAS,CAAC;IACpB,MAAM,EAAE,SAAS,CAAC;IAClB,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB,WAAW,CAAC,EAAE,gBAAgB,CAAC;IAC/B,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB,CAAC;AAEF;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAoIG;AAEH,iBAAS,OAAO,CAAC,KAAK,EAAE,YAAY,2CAwCnC;AAED,OAAO,EAAE,OAAO,EAAE,CAAC"}