@arkyn/components 3.0.1-beta.2 → 3.0.1-beta.20

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

@@ -0,0 +1,169 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useId, useRef, useState } from "react";
+import { useForm } from "../../hooks/useForm";
+import { IconRenderer } from "../../services/iconRenderer";
+import { FieldError } from "../fieldError";
+import { FieldLabel } from "../fieldLabel";
+import { FieldWrapper } from "../fieldWrapper";
+import { MultiSelectChevron } from "./multiSelectChevron";
+import { MultiSelectContainer } from "./multiSelectContainer";
+import { MultiSelectContent } from "./multiSelectContent";
+import { MultiSelectMark } from "./multiSelectMark";
+import { MultiSelectOption } from "./multiSelectOption";
+import { MultiSelectOptionsContainer } from "./multiSelectOptionsContainer";
+import { MultiSelectOverlay } from "./multiSelectOverlay";
+import { MultiSelectSpinner } from "./multiSelectSpinner";
+/**
+ * MultiSelect component - used for selecting multiple options from a dropdown list with support for search, labels, and validation
+ *
+ * @param props - MultiSelect component properties
+ * @param props.name - Required field name for form handling
+ * @param props.options - Array of options with label and value properties
+ * @param props.id - Optional unique identifier for the component
+ * @param props.value - Controlled value array of selected option values
+ * @param props.defaultValue - Default selected values. Default: []
+ * @param props.showAsterisk - Whether to show asterisk on label for required fields
+ * @param props.label - Optional label text to display above the multiselect
+ * @param props.errorMessage - Error message to display below the multiselect
+ * @param props.placeholder - Placeholder text when no options are selected. Default: "Selecione..."
+ * @param props.notFoundText - Text to display when no options match search. Default: "Sem opções disponíveis"
+ * @param props.className - Additional CSS classes to apply
+ * @param props.disabled - Whether the multiselect is disabled. Default: false
+ * @param props.readOnly - Whether the multiselect is read-only. Default: false
+ * @param props.isLoading - Controls loading state with spinner. Default: false
+ * @param props.isSearchable - Whether the multiselect supports search functionality. Default: false
+ * @param props.closeOnSelect - Whether to close dropdown after selecting an option. Default: false
+ * @param props.onSearch - Callback function called when search value changes
+ * @param props.onChange - Callback function called when selected values change
+ * @param props.onFocus - Callback function called when multiselect gains focus
+ * @param props.onBlur - Callback function called when multiselect loses focus
+ * @param props.size - MultiSelect size. Default: "md"
+ * @param props.variant - Visual variant of the multiselect. Default: "solid"
+ * @param props.prefix - Text or icon to display at the beginning of the multiselect
+ * @param props.leftIcon - Optional icon to display on the left side
+ * @param props.optionMaxHeight - Maximum height for the options dropdown
+ *
+ * @returns MultiSelect JSX element wrapped in FieldWrapper with optional label and error
+ *
+ * @example
+ * ```tsx
+ * // Basic multiselect
+ * <MultiSelect
+ *   name="categories"
+ *   options={[
+ *     { label: "Technology", value: "tech" },
+ *     { label: "Design", value: "design" },
+ *     { label: "Marketing", value: "marketing" }
+ *   ]}
+ * />
+ *
+ * // MultiSelect with label and validation
+ * <MultiSelect
+ *   name="skills"
+ *   label="Select Skills"
+ *   showAsterisk
+ *   errorMessage="Please select at least one skill"
+ *   options={skillOptions}
+ *   placeholder="Choose your skills..."
+ * />
+ *
+ * // Searchable multiselect with custom styling
+ * <MultiSelect
+ *   name="countries"
+ *   label="Countries"
+ *   isSearchable
+ *   variant="outline"
+ *   size="lg"
+ *   leftIcon={GlobeIcon}
+ *   options={countryOptions}
+ *   notFoundText="No countries found"
+ * />
+ *
+ * // Controlled multiselect with callbacks
+ * <MultiSelect
+ *   name="tags"
+ *   label="Tags"
+ *   value={selectedTags}
+ *   onChange={setSelectedTags}
+ *   onSearch={handleSearch}
+ *   closeOnSelect={false}
+ *   isLoading={isLoadingTags}
+ *   options={tagOptions}
+ * />
+ *
+ * // MultiSelect with prefix and custom behavior
+ * <MultiSelect
+ *   name="departments"
+ *   label="Departments"
+ *   prefix="Dept:"
+ *   closeOnSelect={true}
+ *   variant="underline"
+ *   defaultValue={["hr", "it"]}
+ *   options={departmentOptions}
+ * />
+ * ```
+ */
+function MultiSelect(props) {
+    const { name, options, className = "", placeholder = "Selecione...", closeOnSelect = false, defaultValue = [], errorMessage: baseErrorMessage, isLoading = false, readOnly = false, isSearchable = false, id, label, optionMaxHeight, showAsterisk, leftIcon: LeftIcon, onSearch, onChange, onBlur, notFoundText = "Sem opções disponíveis", onFocus, disabled: baseDisabled = false, prefix, size = "md", value, variant = "solid", } = props;
+    const { fieldErrors } = useForm();
+    const multiSelectRef = useRef(null);
+    const multiSelectId = id || useId();
+    const errorMessage = baseErrorMessage || fieldErrors?.[name];
+    const isError = !!errorMessage;
+    const disabled = baseDisabled || isLoading || readOnly;
+    const iconSizes = { md: 20, lg: 20 };
+    const iconSize = iconSizes[size];
+    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));
+            if (onChange)
+                onChange(selectedOptions.filter((v) => v !== value));
+        }
+        else {
+            setSelectedOptions([...selectedOptions, value]);
+            if (onChange)
+                onChange([...selectedOptions, value]);
+        }
+        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(FieldWrapper, { children: [label && _jsx(FieldLabel, { showAsterisk: showAsterisk, children: label }), _jsxs(MultiSelectContainer, { handleContainerFocus: handleContainerFocus, disabled: disabled, isError: isError, isFocused: isFocused, isLoading: isLoading, readOnly: readOnly, size: size, variant: variant, className: className, prefixExists: !!prefix, id: multiSelectId, children: [_jsx("input", { ref: multiSelectRef, name: name, value: JSON.stringify(forceSelectedOptions), type: "hidden" }), _jsx(IconRenderer, { iconSize: iconSize, icon: prefix, className: "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, disabled: disabled }, value))), forceSelectedOptions.length <= 0 && _jsx("p", { children: placeholder })] }), _jsxs(MultiSelectOptionsContainer, { isFocused: isFocused, isSearchable: isSearchable, search: search, 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 })] }), errorMessage && _jsx(FieldError, { children: errorMessage })] }));
+}
+export { MultiSelect };

package/dist/src/components/multiSelect/multiSelectChevron/index.d.ts.map

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

package/dist/src/components/multiSelect/multiSelectContainer/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/components/multiSelect/multiSelectContainer/index.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAClC,OAAO,cAAc,CAAC;AAEtB,KAAK,yBAAyB,GAAG;IAC/B,QAAQ,EAAE,SAAS,CAAC;IACpB,oBAAoB,EAAE,MAAM,IAAI,CAAC;IACjC,YAAY,EAAE,OAAO,CAAC;IACtB,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,GAAG,WAAW,CAAC;IAC3C,IAAI,EAAE,IAAI,GAAG,IAAI,CAAC;CACnB,CAAC;AAEF,iBAAS,oBAAoB,CAAC,KAAK,EAAE,yBAAyB,2CA8B7D;AAED,OAAO,EAAE,oBAAoB,EAAE,CAAC"}

package/dist/src/components/multiSelect/multiSelectContent/index.d.ts.map

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

package/dist/src/components/multiSelect/multiSelectMark/index.d.ts

@@ -0,0 +1,10 @@
+import "./styles.css";
+type MultiSelectMarkProps = {
+    label: string;
+    disabled: boolean;
+    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/src/components/multiSelect/multiSelectMark/index.d.ts.map

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

package/dist/src/components/multiSelect/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, 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/src/components/multiSelect/multiSelectOption/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/components/multiSelect/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/src/components/multiSelect/multiSelectOptionsContainer/index.d.ts

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

package/dist/src/components/multiSelect/multiSelectOptionsContainer/index.d.ts.map

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

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

@@ -0,0 +1,44 @@
+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/src/components/multiSelect/multiSelectOverlay/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/components/multiSelect/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/src/components/multiSelect/multiSelectSpinner/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/components/multiSelect/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/src/components/phoneInput/index.d.ts

@@ -0,0 +1,127 @@
+import { countries } from "@arkyn/templates";
+type PhoneInputProps = {
+    id?: string;
+    disabled?: boolean;
+    readOnly?: boolean;
+    errorMessage?: string;
+    label?: string;
+    showAsterisk?: boolean;
+    isLoading?: boolean;
+    size?: "md" | "lg";
+    variant?: "solid" | "outline";
+    className?: string;
+    defaultValue?: string;
+    notFoundCountryText?: string;
+    name: string;
+    searchCountryPlaceholder?: string;
+    defaultCountry?: (typeof countries)[number]["iso"];
+    onChange?: (e: string) => void;
+};
+/**
+ * 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.
+ */
+declare function PhoneInput(props: PhoneInputProps): import("react/jsx-runtime").JSX.Element;
+export { PhoneInput };
+//# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/phoneInput/index.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,MAAM,kBAAkB,CAAC;AA0B7C,KAAK,eAAe,GAAG;IACrB,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,IAAI,CAAC,EAAE,IAAI,GAAG,IAAI,CAAC;IACnB,OAAO,CAAC,EAAE,OAAO,GAAG,SAAS,CAAC;IAC9B,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,mBAAmB,CAAC,EAAE,MAAM,CAAC;IAC7B,IAAI,EAAE,MAAM,CAAC;IACb,wBAAwB,CAAC,EAAE,MAAM,CAAC;IAClC,cAAc,CAAC,EAAE,CAAC,OAAO,SAAS,CAAC,CAAC,MAAM,CAAC,CAAC,KAAK,CAAC,CAAC;IACnD,QAAQ,CAAC,EAAE,CAAC,CAAC,EAAE,MAAM,KAAK,IAAI,CAAC;CAChC,CAAC;AAEF;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAwGG;AAEH,iBAAS,UAAU,CAAC,KAAK,EAAE,eAAe,2CAkLzC;AAED,OAAO,EAAE,UAAU,EAAE,CAAC"}

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

@@ -0,0 +1,202 @@
+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 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(FieldWrapper, { children: [label && _jsx(FieldLabel, { showAsterisk: showAsterisk, children: label }), _jsxs(PhoneInputContainer, { id: phoneInputId, 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: phoneInputRef, type: "hidden", name: name, value: inputValue() })] }), errorMessage && _jsx(FieldError, { children: errorMessage })] }));
+}
+export { PhoneInput };

package/dist/src/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/src/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/src/components/phoneInput/phoneInputCountriesOverlay/index.d.ts

@@ -0,0 +1,8 @@
+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/src/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"}