@arkyn/components 2.0.1-beta.0 → 2.0.1-beta.2

package/dist/components/MultiSelect/components/MultiSelectContent/index.js

@@ -0,0 +1,8 @@
+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/components/MultiSelectMark/index.d.ts

@@ -0,0 +1,9 @@
+import "./styles.css";
+type MultiSelectMarkProps = {
+    label: string;
+    value: string;
+    handleChangeValue: (value: string) => void;
+};
+declare function MultiSelectMark(props: MultiSelectMarkProps): import("react/jsx-runtime").JSX.Element;
+export { MultiSelectMark };
+//# sourceMappingURL=index.d.ts.map

package/dist/components/MultiSelect/components/MultiSelectMark/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/components/MultiSelect/components/MultiSelectMark/index.tsx"],"names":[],"mappings":"AACA,OAAO,cAAc,CAAC;AAEtB,KAAK,oBAAoB,GAAG;IAC1B,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,MAAM,CAAC;IACd,iBAAiB,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;CAC5C,CAAC;AAEF,iBAAS,eAAe,CAAC,KAAK,EAAE,oBAAoB,2CAkBnD;AAED,OAAO,EAAE,eAAe,EAAE,CAAC"}

package/dist/components/MultiSelect/components/MultiSelectMark/index.js

@@ -0,0 +1,11 @@
+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, handleChangeValue } = props;
+    return (_jsxs("div", { className: "arkynMultiSelectMark", children: [label, _jsx("button", { type: "button", onClick: (e) => {
+                    e.stopPropagation();
+                    handleChangeValue(value);
+                }, children: _jsx(X, {}) })] }));
+}
+export { MultiSelectMark };

package/dist/components/MultiSelect/components/MultiSelectOption/index.d.ts

@@ -0,0 +1,11 @@
+import "./styles.css";
+type MultiSelectOptionProps = {
+    value: string;
+    label: string;
+    size: "md" | "lg";
+    optionHasSelected: (value: string) => boolean;
+    handleChangeValue: (value: string) => void;
+};
+declare function MultiSelectOption(props: MultiSelectOptionProps): import("react/jsx-runtime").JSX.Element;
+export { MultiSelectOption };
+//# sourceMappingURL=index.d.ts.map

package/dist/components/MultiSelect/components/MultiSelectOption/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/components/MultiSelect/components/MultiSelectOption/index.tsx"],"names":[],"mappings":"AACA,OAAO,cAAc,CAAC;AAEtB,KAAK,sBAAsB,GAAG;IAC5B,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,MAAM,CAAC;IACd,IAAI,EAAE,IAAI,GAAG,IAAI,CAAC;IAClB,iBAAiB,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,OAAO,CAAC;IAC9C,iBAAiB,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;CAC5C,CAAC;AAEF,iBAAS,iBAAiB,CAAC,KAAK,EAAE,sBAAsB,2CAWvD;AAED,OAAO,EAAE,iBAAiB,EAAE,CAAC"}

package/dist/components/MultiSelect/components/MultiSelectOption/index.js

@@ -0,0 +1,10 @@
+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/components/MultiSelectOptionsContainer/index.d.ts

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

package/dist/components/MultiSelect/components/MultiSelectOptionsContainer/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/components/MultiSelect/components/MultiSelectOptionsContainer/index.tsx"],"names":[],"mappings":"AACA,OAAO,EAAe,SAAS,EAAE,MAAM,OAAO,CAAC;AAI/C,OAAO,cAAc,CAAC;AAEtB,KAAK,gCAAgC,GAAG;IACtC,SAAS,EAAE,OAAO,CAAC;IACnB,YAAY,EAAE,OAAO,CAAC;IACtB,QAAQ,EAAE,SAAS,CAAC;IACpB,QAAQ,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;CACnC,CAAC;AAEF,iBAAS,2BAA2B,CAAC,KAAK,EAAE,gCAAgC,2CAyB3E;AAED,OAAO,EAAE,2BAA2B,EAAE,CAAC"}

package/dist/components/MultiSelect/components/MultiSelectOptionsContainer/index.js

@@ -0,0 +1,16 @@
+import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Search } from "lucide-react";
+import { Input } from "../../../Input";
+import "./styles.css";
+function MultiSelectOptionsContainer(props) {
+    const { children, isFocused, isSearchable, onSearch } = props;
+    function handleSearch(e) {
+        if (!isSearchable)
+            return;
+        onSearch(e.target.value);
+    }
+    if (!isFocused)
+        return _jsx(_Fragment, {});
+    return (_jsxs("div", { className: "arkynMultiSelectOptionsContainer", children: [isSearchable && (_jsx(Input, { type: "search", name: "search-select", variant: "underline", leftIcon: Search, onChange: handleSearch })), children] }));
+}
+export { MultiSelectOptionsContainer };

package/dist/components/MultiSelect/components/MultiSelectOverlay/index.d.ts

@@ -0,0 +1,8 @@
+import "./styles.css";
+type MultiSelectOverlayProps = {
+    isFocused: boolean;
+    handleBlur: () => void;
+};
+declare function MultiSelectOverlay(props: MultiSelectOverlayProps): import("react/jsx-runtime").JSX.Element;
+export { MultiSelectOverlay };
+//# sourceMappingURL=index.d.ts.map

package/dist/components/MultiSelect/components/MultiSelectOverlay/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/components/MultiSelect/components/MultiSelectOverlay/index.tsx"],"names":[],"mappings":"AAAA,OAAO,cAAc,CAAC;AAEtB,KAAK,uBAAuB,GAAG;IAC7B,SAAS,EAAE,OAAO,CAAC;IACnB,UAAU,EAAE,MAAM,IAAI,CAAC;CACxB,CAAC;AAEF,iBAAS,kBAAkB,CAAC,KAAK,EAAE,uBAAuB,2CAIzD;AAED,OAAO,EAAE,kBAAkB,EAAE,CAAC"}

package/dist/components/MultiSelect/components/MultiSelectOverlay/index.js

@@ -0,0 +1,9 @@
+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/components/MultiSelectSpinner/index.d.ts

@@ -0,0 +1,8 @@
+import "./styles.css";
+type MultiSelectSpinnerProps = {
+    iconSize: number;
+    isLoading: boolean;
+};
+declare function MultiSelectSpinner(props: MultiSelectSpinnerProps): import("react/jsx-runtime").JSX.Element;
+export { MultiSelectSpinner };
+//# sourceMappingURL=index.d.ts.map

package/dist/components/MultiSelect/components/MultiSelectSpinner/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/components/MultiSelect/components/MultiSelectSpinner/index.tsx"],"names":[],"mappings":"AACA,OAAO,cAAc,CAAC;AAEtB,KAAK,uBAAuB,GAAG;IAC7B,QAAQ,EAAE,MAAM,CAAC;IACjB,SAAS,EAAE,OAAO,CAAC;CACpB,CAAC;AAEF,iBAAS,kBAAkB,CAAC,KAAK,EAAE,uBAAuB,2CAWzD;AAED,OAAO,EAAE,kBAAkB,EAAE,CAAC"}

package/dist/components/MultiSelect/components/MultiSelectSpinner/index.js

@@ -0,0 +1,10 @@
+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/MultiSelect/index.d.ts

@@ -0,0 +1,4 @@
+import { MultiSelectProps } from "@arkyn/types";
+declare function MultiSelect(props: MultiSelectProps): import("react/jsx-runtime").JSX.Element;
+export { MultiSelect };
+//# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/MultiSelect/index.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,gBAAgB,EAAE,MAAM,cAAc,CAAC;AAehD,iBAAS,WAAW,CAAC,KAAK,EAAE,gBAAgB,2CAyJ3C;AAED,OAAO,EAAE,WAAW,EAAE,CAAC"}

package/dist/components/MultiSelect/index.js

@@ -0,0 +1,73 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useRef, useState } from "react";
+import { morpheme } from "../../services";
+import { useFormController } from "../Form/FormController";
+import { MultiSelectChevron } from "./components/MultiSelectChevron";
+import { MultiSelectContainer } from "./components/MultiSelectContainer";
+import { MultiSelectContent } from "./components/MultiSelectContent";
+import { MultiSelectMark } from "./components/MultiSelectMark";
+import { MultiSelectOption } from "./components/MultiSelectOption";
+import { MultiSelectOptionsContainer } from "./components/MultiSelectOptionsContainer";
+import { MultiSelectOverlay } from "./components/MultiSelectOverlay";
+import { MultiSelectSpinner } from "./components/MultiSelectSpinner";
+function MultiSelect(props) {
+    const { name, options, className = "", placeholder = "Selecione...", closeOnSelect = false, defaultValue = [], isError: baseIsError, isLoading = false, readOnly = false, isSearchable = false, leftIcon: LeftIcon, onSearch, onSelect, onBlur, notFoundText = "Sem opções disponíveis", onFocus, disabled = false, prefix: basePrefix, size = "md", value, variant = "solid", } = props;
+    const formController = useFormController();
+    const baseRef = useRef(null);
+    const multiSelectRef = formController.inputRef || baseRef;
+    const multiSelectId = formController.id;
+    const isError = baseIsError || !!formController.error;
+    const iconSizes = { md: 20, lg: 20 };
+    const iconSize = iconSizes[size];
+    const prefix = morpheme(basePrefix, iconSize, "prefix");
+    const [search, setSearch] = useState("");
+    const [isFocused, setIsFocused] = useState(false);
+    const [selectedOptions, setSelectedOptions] = useState(defaultValue);
+    const forceSelectedOptions = value || selectedOptions;
+    function optionHasSelected(value) {
+        return forceSelectedOptions.includes(value);
+    }
+    function getOptionLabel(value) {
+        const option = options.find((option) => option.value === value);
+        return option?.label || "";
+    }
+    function handleContainerFocus() {
+        if (disabled || !multiSelectRef?.current || isFocused)
+            return;
+        setIsFocused(true);
+        multiSelectRef.current.focus();
+        onFocus && onFocus();
+    }
+    function handleBlur() {
+        setIsFocused(false);
+        if (onBlur && multiSelectRef.current)
+            multiSelectRef.current.blur();
+    }
+    function handleSearch(value) {
+        setSearch(value);
+        if (onSearch)
+            onSearch(value);
+    }
+    function handleChangeValue(value) {
+        if (optionHasSelected(value)) {
+            setSelectedOptions(selectedOptions.filter((v) => v !== value));
+        }
+        else
+            setSelectedOptions([...selectedOptions, value]);
+        if (onSelect)
+            onSelect(selectedOptions);
+        if (closeOnSelect)
+            handleBlur();
+    }
+    const mappedOptions = options.filter((option) => {
+        if (props.onSearch)
+            return true;
+        if (!props.isSearchable)
+            return true;
+        if (option.label.toLowerCase().includes(search.toLowerCase()))
+            return true;
+        return false;
+    });
+    return (_jsxs(MultiSelectContainer, { handleContainerFocus: handleContainerFocus, disabled: disabled, isError: isError, isFocused: isFocused, isLoading: isLoading, readOnly: readOnly, size: size, variant: variant, className: className, prefixExists: !!basePrefix, id: multiSelectId, children: [_jsx("input", { ref: multiSelectRef, name: name, value: JSON.stringify(forceSelectedOptions), type: "hidden" }), prefix, LeftIcon && _jsx(LeftIcon, { size: iconSize, strokeWidth: 2.5 }), _jsxs(MultiSelectContent, { size: size, children: [forceSelectedOptions.map((value) => (_jsx(MultiSelectMark, { label: getOptionLabel(value), value: value, handleChangeValue: handleChangeValue }, value))), forceSelectedOptions.length <= 0 && _jsx("p", { children: placeholder })] }), _jsxs(MultiSelectOptionsContainer, { isFocused: isFocused, isSearchable: isSearchable, onSearch: handleSearch, children: [mappedOptions.map(({ label, value }) => (_jsx(MultiSelectOption, { label: label, value: value, size: size, handleChangeValue: handleChangeValue, optionHasSelected: optionHasSelected }, value))), mappedOptions.length <= 0 && _jsx("p", { children: notFoundText })] }), _jsx(MultiSelectChevron, { disabled: disabled, isFocused: isFocused, readOnly: readOnly, iconSize: iconSize, isLoading: isLoading }), _jsx(MultiSelectSpinner, { iconSize: iconSize, isLoading: isLoading }), _jsx(MultiSelectOverlay, { handleBlur: handleBlur, isFocused: isFocused })] }));
+}
+export { MultiSelect };

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

@@ -0,0 +1,5 @@
+import { PaginationProps } from "@arkyn/types";
+import "./styles.css";
+declare function Pagination(props: PaginationProps): import("react/jsx-runtime").JSX.Element;
+export { Pagination };
+//# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/Pagination/index.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,eAAe,EAAE,MAAM,cAAc,CAAC;AAM/C,OAAO,cAAc,CAAC;AAUtB,iBAAS,UAAU,CAAC,KAAK,EAAE,eAAe,2CAoHzC;AAED,OAAO,EAAE,UAAU,EAAE,CAAC"}

package/dist/components/Pagination/index.js

@@ -0,0 +1,33 @@
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { useNavigate } from "@remix-run/react";
+import { ChevronLeft, ChevronRight, Ellipsis } from "lucide-react";
+import { useScopedParams } from "../../hooks/useScopedParams";
+import "./styles.css";
+function generatePagesArray(from, to) {
+    return [...new Array(to - from)]
+        .map((_, index) => {
+        return from + index + 1;
+    })
+        .filter((page) => page > 0);
+}
+function Pagination(props) {
+    const { scope, totalCountRegisters, perPageKey = "per_page", pageKey = "page", siblingsCount = 2, currentPage: baseCurrentPage = 1, registerPerPage: baseRegisterPerPage = 20, ...rest } = props;
+    const navigate = useNavigate();
+    const { getParam, getScopedSearch } = useScopedParams(scope);
+    const currentPage = Number(getParam("page")) || baseCurrentPage;
+    const registerPerPage = Number(getParam("per_page")) || baseRegisterPerPage;
+    const lastPage = Math.ceil(totalCountRegisters / registerPerPage);
+    const previosPages = currentPage > 1
+        ? generatePagesArray(currentPage - 1 - siblingsCount, currentPage - 1)
+        : [];
+    const nextPages = currentPage < lastPage
+        ? generatePagesArray(currentPage, Math.min(currentPage + siblingsCount, lastPage))
+        : [];
+    function handlePageChange(page) {
+        navigate(getScopedSearch({ page }));
+    }
+    return (_jsxs("div", { className: "arkynPagination", ...rest, children: [_jsx("button", { className: "arkynPaginationIconButton", disabled: currentPage <= 1, onClick: () => handlePageChange(currentPage - 1), children: _jsx(ChevronLeft, {}) }), currentPage > 1 + siblingsCount && (_jsxs(_Fragment, { children: [_jsx("button", { className: "arkynPaginationPageButton", onClick: () => handlePageChange(1), children: "1" }), currentPage > 2 + siblingsCount && (_jsx("button", { disabled: true, className: "arkynPaginationSpread", children: _jsx(Ellipsis, {}) }))] })), previosPages.length > 0 &&
+                previosPages.map((page, index) => (_jsx("button", { onClick: () => handlePageChange(page), className: "arkynPaginationPageButton", children: page }, index))), _jsx("button", { className: "arkynPaginationCurrent", disabled: true, children: currentPage }), nextPages.length > 0 &&
+                nextPages.map((page, index) => (_jsx("button", { onClick: () => handlePageChange(page), className: "arkynPaginationPageButton", children: page }, index))), currentPage + siblingsCount < lastPage && (_jsxs(_Fragment, { children: [currentPage + 1 + siblingsCount < lastPage && (_jsx("button", { disabled: true, className: "arkynPaginationSpread", children: _jsx(Ellipsis, {}) })), _jsx("button", { className: "arkynPaginationPageButton", onClick: () => handlePageChange(lastPage), children: lastPage })] })), _jsx("button", { className: "arkynPaginationIconButton", disabled: currentPage >= lastPage, onClick: () => handlePageChange(currentPage + 1), children: _jsx(ChevronRight, {}) })] }));
+}
+export { Pagination };

package/dist/components/PhoneInput/components/PhoneInputContainer/index.d.ts

@@ -0,0 +1,5 @@
+import { PhoneInputContainerProps } from "@arkyn/types";
+import "./styles.css";
+declare function PhoneInputContainer(props: PhoneInputContainerProps): import("react/jsx-runtime").JSX.Element;
+export { PhoneInputContainer };
+//# sourceMappingURL=index.d.ts.map

package/dist/components/PhoneInput/components/PhoneInputContainer/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/components/PhoneInput/components/PhoneInputContainer/index.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,wBAAwB,EAAE,MAAM,cAAc,CAAC;AACxD,OAAO,cAAc,CAAC;AAEtB,iBAAS,mBAAmB,CAAC,KAAK,EAAE,wBAAwB,2CA0B3D;AAED,OAAO,EAAE,mBAAmB,EAAE,CAAC"}

package/dist/components/PhoneInput/components/PhoneInputContainer/index.js

@@ -0,0 +1,11 @@
+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, id, } = 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", { id: id, className: className.trim(), onClick: onFocus, children: children }));
+}
+export { PhoneInputContainer };

package/dist/components/PhoneInput/components/PhoneInputCountriesOverlay/index.d.ts

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

package/dist/components/PhoneInput/components/PhoneInputCountriesOverlay/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/components/PhoneInput/components/PhoneInputCountriesOverlay/index.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,+BAA+B,EAAE,MAAM,cAAc,CAAC;AAC/D,OAAO,cAAc,CAAC;AAEtB,iBAAS,0BAA0B,CAAC,KAAK,EAAE,+BAA+B,2CAMzE;AAED,OAAO,EAAE,0BAA0B,EAAE,CAAC"}

package/dist/components/PhoneInput/components/PhoneInputCountriesOverlay/index.js

@@ -0,0 +1,9 @@
+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/components/PhoneInputCountryOption/index.d.ts

@@ -0,0 +1,5 @@
+import { PhoneInputCountryOptionProps } from "@arkyn/types";
+import "./styles.css";
+declare function PhoneInputCountryOption(props: PhoneInputCountryOptionProps): import("react/jsx-runtime").JSX.Element;
+export { PhoneInputCountryOption };
+//# sourceMappingURL=index.d.ts.map

package/dist/components/PhoneInput/components/PhoneInputCountryOption/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/components/PhoneInput/components/PhoneInputCountryOption/index.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,4BAA4B,EAAE,MAAM,cAAc,CAAC;AAE5D,OAAO,cAAc,CAAC;AAEtB,iBAAS,uBAAuB,CAAC,KAAK,EAAE,4BAA4B,2CAanE;AAED,OAAO,EAAE,uBAAuB,EAAE,CAAC"}

package/dist/components/PhoneInput/components/PhoneInputCountryOption/index.js

@@ -0,0 +1,10 @@
+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/components/PhoneInputCountryOptionsContainer/index.d.ts

@@ -0,0 +1,5 @@
+import { PhoneInputCountryOptionsContainerProps } from "@arkyn/types";
+import "./styles.css";
+declare function PhoneInputCountryOptionsContainer(props: PhoneInputCountryOptionsContainerProps): import("react/jsx-runtime").JSX.Element;
+export { PhoneInputCountryOptionsContainer };
+//# sourceMappingURL=index.d.ts.map

package/dist/components/PhoneInput/components/PhoneInputCountryOptionsContainer/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/components/PhoneInput/components/PhoneInputCountryOptionsContainer/index.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,sCAAsC,EAAE,MAAM,cAAc,CAAC;AAGtE,OAAO,cAAc,CAAC;AAEtB,iBAAS,iCAAiC,CACxC,KAAK,EAAE,sCAAsC,2CAyB9C;AAED,OAAO,EAAE,iCAAiC,EAAE,CAAC"}

package/dist/components/PhoneInput/components/PhoneInputCountryOptionsContainer/index.js

@@ -0,0 +1,12 @@
+import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import "./styles.css";
+function PhoneInputCountryOptionsContainer(props) {
+    const { children, isOpen, onSearch, search, placeholder } = props;
+    function handleSearch(e) {
+        onSearch(e.target.value);
+    }
+    if (!isOpen)
+        return _jsx(_Fragment, {});
+    return (_jsxs("div", { className: "arkynPhoneInputCountryOptionsContainer", 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/components/PhoneInputCountrySelector/index.d.ts

@@ -0,0 +1,5 @@
+import { PhoneInputCountrySelectorProps } from "@arkyn/types";
+import "./styles.css";
+declare function PhoneInputCountrySelector(props: PhoneInputCountrySelectorProps): import("react/jsx-runtime").JSX.Element;
+export { PhoneInputCountrySelector };
+//# sourceMappingURL=index.d.ts.map

package/dist/components/PhoneInput/components/PhoneInputCountrySelector/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/components/PhoneInput/components/PhoneInputCountrySelector/index.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,8BAA8B,EAAE,MAAM,cAAc,CAAC;AAI9D,OAAO,cAAc,CAAC;AAEtB,iBAAS,yBAAyB,CAAC,KAAK,EAAE,8BAA8B,2CAcvE;AAED,OAAO,EAAE,yBAAyB,EAAE,CAAC"}

package/dist/components/PhoneInput/components/PhoneInputCountrySelector/index.js

@@ -0,0 +1,9 @@
+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/components/PhoneInputMask/index.d.ts

@@ -0,0 +1,5 @@
+import { PhoneInputMaskProps } from "@arkyn/types";
+import "./style.css";
+declare const PhoneInputMask: import("react").ForwardRefExoticComponent<PhoneInputMaskProps & import("react").RefAttributes<HTMLInputElement>>;
+export { PhoneInputMask };
+//# sourceMappingURL=index.d.ts.map

package/dist/components/PhoneInput/components/PhoneInputMask/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/components/PhoneInput/components/PhoneInputMask/index.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,mBAAmB,EAAE,MAAM,cAAc,CAAC;AAiBnD,OAAO,aAAa,CAAC;AASrB,QAAA,MAAM,cAAc,kHAyDnB,CAAC;AAEF,OAAO,EAAE,cAAc,EAAE,CAAC"}

package/dist/components/PhoneInput/components/PhoneInputMask/index.js

@@ -0,0 +1,34 @@
+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 "./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 [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", { 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 }));
+});
+export { PhoneInputMask };

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

@@ -0,0 +1,4 @@
+import { PhoneInputProps } from "@arkyn/types";
+declare function PhoneInput(props: PhoneInputProps): import("react/jsx-runtime").JSX.Element;
+export { PhoneInput };
+//# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/PhoneInput/index.tsx"],"names":[],"mappings":"AACA,OAAO,EAAe,eAAe,EAAE,MAAM,cAAc,CAAC;AAY5D,iBAAS,UAAU,CAAC,KAAK,EAAE,eAAe,2CAiKzC;AAED,OAAO,EAAE,UAAU,EAAE,CAAC"}

package/dist/components/PhoneInput/index.js

@@ -0,0 +1,91 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { countries } from "@arkyn/templates";
+import { useRef, useState } from "react";
+import { useFormController } from "../Form/FormController";
+import { PhoneInputContainer } from "./components/PhoneInputContainer";
+import { PhoneInputCountriesOverlay } from "./components/PhoneInputCountriesOverlay";
+import { PhoneInputCountryOption } from "./components/PhoneInputCountryOption";
+import { PhoneInputCountryOptionsContainer } from "./components/PhoneInputCountryOptionsContainer";
+import { PhoneInputCountrySelector } from "./components/PhoneInputCountrySelector";
+import { PhoneInputMask } from "./components/PhoneInputMask";
+import { getDefaultFormatPhoneNumber } from "./services/getDefaultFormatPhoneNumber";
+function PhoneInput(props) {
+    const { defaultCountry, className = "", disabled = false, isError: baseIsError = false, isLoading = false, readOnly = false, size = "md", defaultValue = "", variant = "solid", name, onChange, searchCountryPlaceholder = "Pesquisar país", notFoundCountryText = "Nenhum país encontrado", ...rest } = 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 { id, inputRef, error } = useFormController();
+    const isError = baseIsError || !!error;
+    const inputPhoneMaskRef = useRef(null);
+    function handleContainerFocus() {
+        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(PhoneInputContainer, { id: id, disabled: disabled, 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: 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: showCountryOptions, onClick: handleCloseCountryOptions }), _jsx(PhoneInputMask, { ref: inputPhoneMaskRef, currentCountry: currentCountry, value: value, onChange: (e) => {
+                    setValue(e);
+                    onChange && onChange(inputValue(e));
+                }, disabled: disabled, onBlur: handleInputBlur, onFocus: handleInputFocus, size: size }), _jsx("input", { ref: inputRef, type: "hidden", name: name, value: inputValue() })] }));
+}
+export { PhoneInput };