@arkyn/components 3.0.1-beta.99 → 3.0.3

package/dist/components/multiSelect/multiSelectChevron/index.js

@@ -1,18 +0,0 @@
-import { Fragment as _Fragment, jsx as _jsx } from "react/jsx-runtime";
-import { ChevronDown } from "lucide-react";
-import "./styles.css";
-function MultiSelectChevron(props) {
-    const { iconSize, isLoading, disabled, readOnly, isFocused } = props;
-    const notAnimate = disabled || readOnly ? "notAnimate" : "";
-    const focused = isFocused ? "focused" : "";
-    const className = `arkynMultiSelectChevron ${notAnimate} ${focused}`;
-    if (isLoading)
-        return _jsx(_Fragment, {});
-    return (_jsx(ChevronDown, { className: className, strokeWidth: 2.5, style: {
-            minWidth: iconSize,
-            minHeight: iconSize,
-            maxWidth: iconSize,
-            maxHeight: iconSize,
-        } }));
-}
-export { MultiSelectChevron };

package/dist/components/multiSelect/multiSelectContainer/index.js

@@ -1,11 +0,0 @@
-import { jsx as _jsx } from "react/jsx-runtime";
-import "./styles.css";
-function MultiSelectContainer(props) {
-    const { children, handleContainerFocus, disabled, isError, isLoading, isFocused, className, readOnly, variant, size, id, prefixExists, } = props;
-    const hasPrefix = prefixExists ? "hasPrefix" : "";
-    const errored = isError ? "errored" : "";
-    const opacity = disabled || readOnly || isLoading ? "opacity" : "";
-    const focused = isFocused ? "focused" : "";
-    return (_jsx("section", { id: id, className: `arkynMultiSelectContainer ${hasPrefix} ${variant} ${size} ${opacity} ${errored} ${focused} ${className}`, onClick: handleContainerFocus, children: children }));
-}
-export { MultiSelectContainer };

package/dist/components/multiSelect/multiSelectContent/index.js

@@ -1,8 +0,0 @@
-import { jsx as _jsx } from "react/jsx-runtime";
-import "./styles.css";
-function MultiSelectContent(props) {
-    const { children, size } = props;
-    const className = `arkynMultiSelectContent ${size}`;
-    return _jsx("div", { className: className, children: children });
-}
-export { MultiSelectContent };

package/dist/components/multiSelect/multiSelectMark/index.js

@@ -1,11 +0,0 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { X } from "lucide-react";
-import "./styles.css";
-function MultiSelectMark(props) {
-    const { label, value, disabled, handleChangeValue } = props;
-    return (_jsxs("div", { className: "arkynMultiSelectMark", children: [label, _jsx("button", { disabled: disabled, type: "button", onClick: (e) => {
-                    e.stopPropagation();
-                    handleChangeValue(value);
-                }, children: _jsx(X, {}) })] }));
-}
-export { MultiSelectMark };

package/dist/components/multiSelect/multiSelectOption/index.js

@@ -1,10 +0,0 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { Check } from "lucide-react";
-import "./styles.css";
-function MultiSelectOption(props) {
-    const { label, optionHasSelected, handleChangeValue, value, size } = props;
-    const hasActive = optionHasSelected(value) ? "active" : "";
-    const className = `arkynMultiSelectOption ${size} ${hasActive}`;
-    return (_jsxs("div", { onClick: () => handleChangeValue(value), className: className, children: [label, " ", _jsx(Check, {})] }));
-}
-export { MultiSelectOption };

package/dist/components/multiSelect/multiSelectOptionsContainer/index.js

@@ -1,44 +0,0 @@
-import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { Search } from "lucide-react";
-import { useEffect, useRef, useState } from "react";
-import { useScrollLock } from "../../../hooks/useScrollLock";
-import { Input } from "../../input";
-import "./styles.css";
-function MultiSelectOptionsContainer(props) {
-    const { children, isFocused, isSearchable, search, onSearch } = props;
-    const containerRef = useRef(null);
-    const [position, setPosition] = useState("bottom");
-    useScrollLock(isFocused);
-    useEffect(() => {
-        if (!isFocused)
-            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();
-    }, [isFocused]);
-    function handleSearch(e) {
-        if (!isSearchable)
-            return;
-        onSearch(e.target.value);
-    }
-    if (!isFocused)
-        return _jsx(_Fragment, {});
-    return (_jsxs("div", { ref: containerRef, className: `arkynMultiSelectOptionsContainer ${position}`, children: [isSearchable && (_jsx(Input, { type: "search", name: "search-select", variant: "underline", leftIcon: Search, value: search, onChange: handleSearch })), children] }));
-}
-export { MultiSelectOptionsContainer };

package/dist/components/multiSelect/multiSelectOverlay/index.js

@@ -1,9 +0,0 @@
-import { Fragment as _Fragment, jsx as _jsx } from "react/jsx-runtime";
-import "./styles.css";
-function MultiSelectOverlay(props) {
-    const { isFocused, handleBlur } = props;
-    if (!isFocused)
-        return _jsx(_Fragment, {});
-    return _jsx("aside", { className: "arkynMultiSelectOverlay", onClick: handleBlur });
-}
-export { MultiSelectOverlay };

package/dist/components/multiSelect/multiSelectSpinner/index.js

@@ -1,10 +0,0 @@
-import { Fragment as _Fragment, jsx as _jsx } from "react/jsx-runtime";
-import { Loader2 } from "lucide-react";
-import "./styles.css";
-function MultiSelectSpinner(props) {
-    const { iconSize, isLoading } = props;
-    if (!isLoading)
-        return _jsx(_Fragment, {});
-    return (_jsx(Loader2, { className: "arkynMultiSelectSpinner", size: iconSize, strokeWidth: 2.5 }));
-}
-export { MultiSelectSpinner };

package/dist/components/pagination/chevronButton/index.js

@@ -1,9 +0,0 @@
-import { jsx as _jsx } from "react/jsx-runtime";
-import { ChevronLeft, ChevronRight } from "lucide-react";
-import "./styles.css";
-function ChevronButton(props) {
-    const { orientation, handlePageChange, disabled } = props;
-    const icon = { left: _jsx(ChevronLeft, {}), right: _jsx(ChevronRight, {}) };
-    return (_jsx("button", { className: "arkynChevronPageButton", disabled: disabled, onClick: handlePageChange, children: icon[orientation] }));
-}
-export { ChevronButton };

package/dist/components/pagination/currentButton/index.js

@@ -1,6 +0,0 @@
-import { jsx as _jsx } from "react/jsx-runtime";
-import "./styles.css";
-function CurrentButton({ currentPage }) {
-    return (_jsx("button", { className: "arkynPaginationCurrentButton", disabled: true, children: currentPage }));
-}
-export { CurrentButton };

package/dist/components/pagination/index.js

@@ -1,37 +0,0 @@
-import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
-import { ChevronButton } from "./chevronButton";
-import { CurrentButton } from "./currentButton";
-import { PageButton } from "./pageButton";
-import { PaginationService } from "./paginationService";
-import { Spread } from "./spread";
-import "./styles.css";
-/**
- * Pagination component for navigating through paginated data.
- *
- * @component
- * @example
- * ```tsx
- * <Pagination
- *   totalCountRegisters={100}
- *   currentPage={1}
- *   registerPerPage={10}
- *   siblingsCount={1}
- *   onChange={(page) => console.log('Page changed to:', page)}
- * />
- * ```
- *
- * @param props - The component props
- * @returns A pagination navigation component with page numbers and navigation buttons
- */
-function Pagination(props) {
-    const { totalCountRegisters: baseTotalCountRegisters, siblingsCount: baseSiblingsCount, currentPage: baseCurrentPage, registerPerPage: baseRegisterPerPage, onChange: baseOnChange, ...rest } = props;
-    const { currentPage, siblingsCount, previousPages, nextPages, lastPage, handlePageChange, handleMinusChange, handlePlusChange, } = new PaginationService({
-        totalCountRegisters: baseTotalCountRegisters,
-        currentPage: baseCurrentPage,
-        registerPerPage: baseRegisterPerPage,
-        siblingsCount: baseSiblingsCount,
-        onChange: baseOnChange,
-    });
-    return (_jsxs("div", { className: "arkynPagination", ...rest, children: [_jsx(ChevronButton, { orientation: "left", handlePageChange: handleMinusChange, disabled: currentPage <= 1 }), currentPage > 1 + siblingsCount && (_jsxs(_Fragment, { children: [_jsx(PageButton, { page: 1, handlePageChange: () => handlePageChange(1) }), currentPage > 2 + siblingsCount && _jsx(Spread, {})] })), previousPages.map((page, index) => (_jsx(PageButton, { page: page, handlePageChange: handleMinusChange }, index))), _jsx(CurrentButton, { currentPage: currentPage }), nextPages.map((page, index) => (_jsx(PageButton, { page: page, handlePageChange: handlePlusChange }, index))), currentPage + siblingsCount < lastPage && (_jsxs(_Fragment, { children: [currentPage + 1 + siblingsCount < lastPage && _jsx(Spread, {}), _jsx(PageButton, { page: lastPage, handlePageChange: () => handlePageChange(lastPage) })] })), _jsx(ChevronButton, { orientation: "right", handlePageChange: handlePlusChange, disabled: currentPage >= lastPage })] }));
-}
-export { Pagination };

package/dist/components/pagination/pageButton/index.js

@@ -1,7 +0,0 @@
-import { jsx as _jsx } from "react/jsx-runtime";
-import "./styles.css";
-function PageButton(props) {
-    const { page, handlePageChange } = props;
-    return (_jsx("button", { className: "arkynPaginationPageButton", onClick: handlePageChange, children: page }));
-}
-export { PageButton };

package/dist/components/pagination/paginationService.js

@@ -1,62 +0,0 @@
-class PaginationService {
-    currentPage;
-    totalCountRegisters;
-    registerPerPage;
-    siblingsCount;
-    lastPage;
-    onChange;
-    previousPages;
-    nextPages;
-    generatePagesArray(from, to) {
-        return [...new Array(to - from)]
-            .map((_, index) => from + index + 1)
-            .filter((page) => page > 0);
-    }
-    generatePreviousPages(currentPage, siblingsCount) {
-        if (!(currentPage > 1))
-            return [];
-        return this.generatePagesArray(currentPage - 1 - siblingsCount, currentPage - 1);
-    }
-    generateNextPages(currentPage, siblingsCount) {
-        if (!(currentPage < this.lastPage))
-            return [];
-        return this.generatePagesArray(currentPage, Math.min(currentPage + siblingsCount, this.lastPage));
-    }
-    constructor(props) {
-        this.totalCountRegisters = props.totalCountRegisters;
-        this.currentPage = props.currentPage;
-        this.registerPerPage = props?.registerPerPage || 20;
-        this.siblingsCount = props?.siblingsCount || 2;
-        this.lastPage = Math.ceil(this.totalCountRegisters / this.registerPerPage);
-        this.onChange = props?.onChange;
-        this.previousPages = this.generatePreviousPages(this.currentPage, this.siblingsCount);
-        this.nextPages = this.generateNextPages(this.currentPage, this.siblingsCount);
-    }
-    handlePageChange = (page) => {
-        if (page < 1)
-            return;
-        if (page > this.lastPage)
-            return;
-        if (this.onChange) {
-            this.currentPage = page;
-            this.onChange(this.currentPage);
-        }
-    };
-    handlePlusChange = () => {
-        if (this.currentPage >= this.lastPage)
-            return;
-        if (this.onChange) {
-            this.currentPage += 1;
-            this.onChange(this.currentPage);
-        }
-    };
-    handleMinusChange = () => {
-        if (this.currentPage <= 1)
-            return;
-        if (this.onChange) {
-            this.currentPage -= 1;
-            this.onChange(this.currentPage);
-        }
-    };
-}
-export { PaginationService };

package/dist/components/pagination/spread/index.js

@@ -1,7 +0,0 @@
-import { jsx as _jsx } from "react/jsx-runtime";
-import { Ellipsis } from "lucide-react";
-import "./styles.css";
-function Spread() {
-    return (_jsx("p", { className: "arkynPaginationSpread", children: _jsx(Ellipsis, {}) }));
-}
-export { Spread };

package/dist/components/phoneInput/index.js

@@ -1,205 +0,0 @@
-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: wrapperClassName = "", 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, { className: wrapperClassName, children: [label && (_jsx(FieldLabel, { htmlFor: phoneInputId, showAsterisk: showAsterisk, children: label })), _jsxs(PhoneInputContainer, { disabled: isDisabled, isError: isError, isLoading: isLoading, isFocused: isFocused, readOnly: readOnly, size: size, variant: variant, 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, { id: phoneInputId, 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.js

@@ -1,11 +0,0 @@
-import { jsx as _jsx } from "react/jsx-runtime";
-import "./styles.css";
-function PhoneInputContainer(props) {
-    const { children, onFocus, disabled, isError, isLoading, isFocused, className: baseClassName = "", readOnly, variant, size, } = props;
-    const errored = isError ? "errored" : "";
-    const opacity = disabled || readOnly || isLoading ? "opacity" : "";
-    const focused = isFocused ? "focused" : "";
-    const className = `arkynPhoneInputContainer ${variant} ${size} ${opacity} ${errored} ${focused} ${baseClassName}`;
-    return (_jsx("section", { className: className.trim(), onClick: onFocus, children: children }));
-}
-export { PhoneInputContainer };

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

@@ -1,9 +0,0 @@
-import { Fragment as _Fragment, jsx as _jsx } from "react/jsx-runtime";
-import "./styles.css";
-function PhoneInputCountriesOverlay(props) {
-    const { isOpen, onClick } = props;
-    if (!isOpen)
-        return _jsx(_Fragment, {});
-    return (_jsx("aside", { className: "arkynPhoneInputCountriesOverlay", onClick: onClick }));
-}
-export { PhoneInputCountriesOverlay };

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

@@ -1,10 +0,0 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { Check } from "lucide-react";
-import "./styles.css";
-function PhoneInputCountryOption(props) {
-    const { country, isActive, handleChangeValue, size } = props;
-    const hasActive = isActive ? "active" : "";
-    const className = `arkynPhoneInputCountryOption ${size} ${hasActive}`;
-    return (_jsxs("div", { onClick: () => handleChangeValue(country), className: className, children: [_jsx("img", { src: country.flag, alt: country.name, className: "flag" }), country.name, " ", _jsx("span", { children: country.code }), _jsx(Check, { className: "check" })] }));
-}
-export { PhoneInputCountryOption };

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

@@ -1,40 +0,0 @@
-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.js

@@ -1,9 +0,0 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { ChevronDown } from "lucide-react";
-import { Divider } from "../../divider";
-import "./styles.css";
-function PhoneInputCountrySelector(props) {
-    const { currentCountry, onClick } = props;
-    return (_jsxs("div", { className: "phoneInputSelectCountry", onClick: onClick, children: [_jsx("img", { className: "flag", src: currentCountry.flag, alt: currentCountry.name }), _jsx(ChevronDown, { className: "chevronDown", strokeWidth: 2.5 }), _jsx(Divider, { orientation: "vertical" })] }));
-}
-export { PhoneInputCountrySelector };

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

@@ -1,34 +0,0 @@
-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 "../../../utils/phoneInputUtilities";
-import "./style.css";
-const BaseInput = forwardRef((props, ref) => {
-    return _jsx("input", { ref: ref, ...props });
-});
-const PhoneInputMask = forwardRef((props, ref) => {
-    const { onFocus, readonly, onBlur, size, onChange, value, currentCountry, disabled, id, } = props;
-    const [isMounted, setIsMounted] = useState(false);
-    useEffect(() => {
-        if (isMounted)
-            onChange(currentCountry.mask);
-        else
-            setIsMounted(true);
-    }, [currentCountry]);
-    const className = `phoneInputMask ${size}`;
-    function handleChange(event) {
-        let value = clear(event.target.value);
-        const mask = getMask(value);
-        let nextLength = value.length;
-        if (nextLength > MAX_LENGTH)
-            return;
-        value = applyMask(value, TYPES[mask]);
-        event.target.value = value;
-        onChange(value);
-    }
-    if (currentCountry.code === "+55") {
-        return (_jsx("input", { id: id, value: value, onChange: handleChange, className: className, onFocus: onFocus, onBlur: onBlur, disabled: disabled, ref: ref }));
-    }
-    return (_jsx(InputMask, { id: id, 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 };