import type { Combobox } from "@base-ui/react/combobox"; import type { Input as BaseInput } from "@base-ui/react/input"; import type { useRender } from "@base-ui/react/use-render"; import type React from "react"; import type { PhoneFieldCountryLabels } from "./context.js"; import { CountryEmpty, CountryIcon, CountryItem, CountryItemIndicator, CountryList, CountryPopup, CountryPortal, CountryPositioner, CountrySearch, CountryTrigger, CountryValue } from "./country.js"; import { Description, ErrorMessage, Group, Label } from "./field.js"; import { Input } from "./input.js"; import { Root } from "./root.js"; import type { PhoneFieldChangeDetails, PhoneFieldChangeReason, PhoneFieldCountry, PhoneFieldCountryCode, PhoneFieldCountryMap, PhoneFieldFormValue, PhoneFieldInputValue, PhoneFieldLang, PhoneFieldParseOptions, PhoneFieldState, PhoneFieldValue } from "./types.js"; export declare const PhoneField: { Root: typeof Root; Label: typeof Label; Group: typeof Group; Input: typeof Input; Description: typeof Description; Error: typeof ErrorMessage; Country: React.MemoExoticComponent<({ children, labels, ...props }: PhoneField.CountryProps) => React.JSX.Element>; CountryTrigger: typeof CountryTrigger; CountryValue: typeof CountryValue; CountryIcon: typeof CountryIcon; CountryPortal: typeof CountryPortal; CountryPositioner: typeof CountryPositioner; CountryPopup: typeof CountryPopup; CountrySearch: typeof CountrySearch; CountryEmpty: typeof CountryEmpty; CountryList: typeof CountryList; CountryItem: typeof CountryItem; CountryItemIndicator: typeof CountryItemIndicator; }; type ClassName = string | ((state: State) => string | undefined); type Style = React.CSSProperties | ((state: State) => React.CSSProperties | undefined); export declare namespace PhoneField { /** Country descriptor: iso2, name, dialCode, flag. */ type Country = PhoneFieldCountry; /** Read-only map of ISO2 to country. */ type CountryMap = PhoneFieldCountryMap; /** ISO2 country code (e.g. "US", "GB"). */ type CountryCode = PhoneFieldCountryCode; /** BCP 47 locale for country names and sorting. */ type Lang = PhoneFieldLang; /** Complete emitted value: countryIso2, countryDialCode, nationalNumber, e164, isValid. */ type Value = PhoneFieldValue; /** Source fields accepted by `value` and `defaultValue`; derived fields are rebuilt. */ type InputValue = PhoneFieldInputValue; /** Minimal untrusted payload serialized into forms. */ type FormValue = PhoneFieldFormValue; /** Options for strict string parsing and opt-in extraction. */ type ParseOptions = PhoneFieldParseOptions; /** Field state. Every key is mirrored as a `data-*` attribute on Root. */ type State = PhoneFieldState; /** Why `onValueChange` fired. */ type ChangeReason = PhoneFieldChangeReason; /** Second argument of `onValueChange`. */ type ChangeDetails = PhoneFieldChangeDetails; /** * Props for `PhoneField.Root`. Use `value`/`onValueChange` for controlled mode, * or `defaultValue`/`defaultCountry` for uncontrolled. Defaults are only read on mount. */ type RootProps = Omit, "className" | "style" | "defaultValue" | "onChange"> & { value?: InputValue | Value; defaultValue?: InputValue | Value; onValueChange?: (value: Value, details: ChangeDetails) => void; /** Initial country when no value is provided. Defaults to `"US"` or the first available country. */ defaultCountry?: CountryCode; /** Restricts the list and international-paste detection to these countries, in this order. */ countries?: readonly CountryCode[]; /** Pinned to the top of the list, in this order. */ preferredCountries?: readonly CountryCode[]; /** Locale for country names, sorting, and search. */ lang?: Lang; /** Serializes `{ countryIso2, nationalNumber }` into one FormData entry. */ name?: string; /** Associates the serialized value with a form outside Root. */ form?: string; /** Formats the number as the user types. @default true */ formatOnType?: boolean; /** Blocks digits beyond the longest possible number for the country. @default true */ limitMaxLength?: boolean; disabled?: boolean; readOnly?: boolean; required?: boolean; /** * Marks the field invalid, e.g. for a server or form-library error. Automatic * validation still applies when `false`. */ invalid?: boolean; className?: ClassName; style?: Style; }; /** Props for `PhoneField.Input`. The value is owned by `PhoneField.Root`. */ type InputProps = Omit & { /** A string, or a function of the selected country (see `getExampleNumber`). */ placeholder?: string | ((country: Country) => string | undefined); }; /** Props for `PhoneField.Country`: Base UI Combobox behavior; selection is managed by Root. */ type CountryProps = Omit, "children" | "defaultValue" | "isItemEqualToValue" | "itemToStringLabel" | "itemToStringValue" | "items" | "filteredItems" | "multiple" | "onValueChange" | "value"> & { /** Compose `Country*` parts. Omit for the default picker. */ children?: React.ReactNode; /** Default copy for CountrySearch and CountryEmpty, e.g. for translations. */ labels?: CountryLabels; }; /** Default copy used by the country picker parts. */ type CountryLabels = PhoneFieldCountryLabels; type GroupProps = Omit, "className" | "style"> & { className?: ClassName; style?: Style; }; type LabelProps = Omit, "className" | "style" | "htmlFor"> & { className?: ClassName; style?: Style; }; type DescriptionProps = Omit, "className" | "style"> & { className?: ClassName; style?: Style; }; type ErrorProps = Omit, "className" | "style" | "children"> & { className?: ClassName; style?: Style; /** Message, or a function of the field state. Defaults to a generic English message. */ children?: React.ReactNode | ((state: State) => React.ReactNode); }; type CountryTriggerProps = Combobox.Trigger.Props; type CountryValueProps = { /** Content, or a function of the selected country. Defaults to flag and dial code. */ children?: React.ReactNode | ((country: Country) => React.ReactNode); }; type CountryIconProps = Combobox.Icon.Props; type CountryPortalProps = Combobox.Portal.Props; type CountryPositionerProps = Combobox.Positioner.Props; type CountryPopupProps = Combobox.Popup.Props; type CountrySearchProps = Combobox.Input.Props; type CountryEmptyProps = Combobox.Empty.Props; type CountryListProps = Omit & { /** Renders each country. Defaults to ``. */ children?: (country: Country) => React.ReactNode; }; type CountryItemProps = Omit & { country: Country; }; type CountryItemIndicatorProps = Combobox.ItemIndicator.Props; } export {};