@zango-core/components 0.2.0-rc.2 → 0.2.1

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

@@ -1,2 +1,2 @@
-export { Button } from './Button';
 export type { ButtonProps } from './Button';
+export { Button } from './Button';

package/dist/components/Card/Card.d.ts

@@ -1,15 +1,49 @@
 import { default as React } from 'react';
+import { GradientDirection, GradientType } from '../../utils/gradient';
 
 export interface CardProps {
+    /** Main content rendered in the card body */
     children: React.ReactNode;
+    /** Additional className for the root element */
     className?: string;
+    /** Inline styles for the root element */
     style?: React.CSSProperties;
+    /** Surface style. 'gradient' renders a gradient background instead of white. */
+    variant?: 'default' | 'gradient';
+    /**
+     * Preset gradient stops; only applies when variant is "gradient".
+     * 'soft' = brand-50→white, 'solid' = brand-500→brand-700 (default).
+     */
+    gradientType?: GradientType;
+    /** Custom gradient start color (any CSS color). Requires gradientTo; overrides gradientType. */
+    gradientFrom?: string;
+    /** Custom gradient end color (any CSS color). Requires gradientFrom; overrides gradientType. */
+    gradientTo?: string;
+    /** Gradient direction; only applies when variant is "gradient". */
+    gradientDirection?: GradientDirection;
+    /** Whether to render a border and subtle shadow */
     bordered?: boolean;
+    /** Whether to elevate the card shadow on hover */
     hoverable?: boolean;
+    /** Padding size preset */
     size?: 'default' | 'small';
+    /**
+     * Heading level (h1–h6) for the card title so it participates in the document
+     * outline. Defaults to a non-heading `<div>` to avoid injecting an out-of-order
+     * heading; set this when the title is a real section heading.
+     */
+    titleLevel?: 1 | 2 | 3 | 4 | 5 | 6;
+    /** Card header title content */
     title?: React.ReactNode;
+    /** Extra content rendered in the header on the right side */
     extra?: React.ReactNode;
+    /** Full-width cover image or media rendered above the header */
     cover?: React.ReactNode;
+    /** Action nodes rendered in a row at the card footer */
     actions?: React.ReactNode[];
 }
+/**
+ * Card is a content container with optional title, header extra, cover media, and footer actions.
+ * Supports bordered, hoverable, and size variants.
+ */
 export declare const Card: React.FC<CardProps>;

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

@@ -1,2 +1,2 @@
-export { Card } from './Card';
 export type { CardProps } from './Card';
+export { Card } from './Card';

package/dist/components/Checkbox/Checkbox.d.ts

@@ -1,8 +1,14 @@
 import { default as React } from 'react';
 
 interface CheckboxProps extends React.InputHTMLAttributes<HTMLInputElement> {
+    /** Text label rendered adjacent to the checkbox */
     label?: string;
+    /** Whether to apply error styling to the checkbox and label */
     error?: boolean;
 }
+/**
+ * Checkbox renders a styled boolean input with an optional text label and error state.
+ * Supports both controlled and uncontrolled usage; forwards refs to the underlying input element.
+ */
 declare const Checkbox: React.ForwardRefExoticComponent<CheckboxProps & React.RefAttributes<HTMLInputElement>>;
 export default Checkbox;

package/dist/components/ContextMenu/ContextMenu.d.ts

@@ -1,33 +1,65 @@
 import { default as React } from 'react';
 
 interface ContextMenuProps {
-    trigger: React.ReactNode;
+    /**
+     * Element that triggers the menu to open. Must be a single focusable React
+     * element (e.g. a `<button>`); the menu injects the ref, click/keydown
+     * handlers, and ARIA popup attributes onto it rather than wrapping it in an
+     * extra button (which would nest interactive elements).
+     */
+    trigger: React.ReactElement;
+    /** Menu items rendered inside the dropdown */
     children: React.ReactNode;
+    /** Horizontal alignment of the menu relative to the trigger */
     align?: 'left' | 'center' | 'right';
+    /** Custom className for the root container */
     className?: string;
+    /** Custom className for the menu content panel */
     contentClassName?: string;
+    /** Gap in pixels between the trigger and the menu */
     offset?: number;
+    /** Whether the menu closes when a menu item is clicked */
     closeOnClick?: boolean;
+    /** Whether the trigger and menu are non-interactive */
     disabled?: boolean;
 }
+/**
+ * Dropdown context menu with keyboard navigation and focus management.
+ * Renders a trigger element that toggles a positioned menu panel containing ContextMenuItem entries.
+ */
 export declare const ContextMenu: React.FC<ContextMenuProps>;
 interface ContextMenuItemProps {
+    /** Label content for the menu item */
     children: React.ReactNode;
+    /** Click handler invoked when the item is selected */
     onClick?: (e: React.MouseEvent) => void;
+    /** Whether the item is non-interactive */
     disabled?: boolean;
+    /** Custom className for the item button */
     className?: string;
+    /** Optional icon displayed to the left of the label */
     icon?: React.ReactNode;
+    /** Keyboard shortcut hint displayed on the right */
     shortcut?: string;
+    /** Whether to render the item in a destructive (red) style */
     danger?: boolean;
 }
+/**
+ * Individual item inside a ContextMenu. Renders as a button with optional icon, label, and shortcut hint.
+ */
 export declare const ContextMenuItem: React.FC<ContextMenuItemProps>;
 interface ContextMenuSeparatorProps {
+    /** Custom className for the separator element */
     className?: string;
 }
+/** Horizontal rule that visually separates groups of ContextMenuItem entries. */
 export declare const ContextMenuSeparator: React.FC<ContextMenuSeparatorProps>;
 interface ContextMenuLabelProps {
+    /** Text or content displayed as the group label */
     children: React.ReactNode;
+    /** Custom className for the label container */
     className?: string;
 }
+/** Non-interactive label used to title a group of ContextMenuItem entries. */
 export declare const ContextMenuLabel: React.FC<ContextMenuLabelProps>;
 export {};

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

@@ -1 +1 @@
-export { ContextMenu, ContextMenuItem, ContextMenuSeparator, ContextMenuLabel } from './ContextMenu';
+export { ContextMenu, ContextMenuItem, ContextMenuLabel, ContextMenuSeparator, } from './ContextMenu';

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

@@ -1,2 +1,2 @@
-export { Dialog, DialogHeader, DialogBody, DialogFooter } from './Dialog';
 export type { DialogProps } from './Dialog';
+export { Dialog, DialogBody, DialogFooter, DialogHeader } from './Dialog';

package/dist/components/Divider/Divider.d.ts

@@ -1,13 +1,25 @@
 import { default as React } from 'react';
 
 export interface DividerProps {
+    /** Optional text or node rendered inside the divider line */
     children?: React.ReactNode;
+    /** Custom className for the root element */
     className?: string;
+    /** Inline styles applied to the root element */
     style?: React.CSSProperties;
+    /** Direction of the divider line */
     type?: 'horizontal' | 'vertical';
+    /** Horizontal position of the inner text when children are provided */
     orientation?: 'left' | 'right' | 'center';
+    /** Extra margin applied to the side of the text opposite to the orientation */
     orientationMargin?: string | number;
+    /** Whether the line is rendered as dashed instead of solid */
     dashed?: boolean;
+    /** Whether the inner text is rendered in normal weight instead of medium */
     plain?: boolean;
 }
+/**
+ * Visual separator between sections of content. Supports horizontal and vertical orientations,
+ * dashed style, and optional inner text with configurable alignment.
+ */
 export declare const Divider: React.FC<DividerProps>;

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

@@ -1,2 +1,2 @@
-export { Divider } from './Divider';
 export type { DividerProps } from './Divider';
+export { Divider } from './Divider';

package/dist/components/Drawer/Drawer.d.ts

@@ -25,5 +25,7 @@ export interface DrawerProps {
     showCloseButton?: boolean;
     /** Custom close button content */
     closeButton?: React.ReactNode;
+    /** Accessible name for the drawer when no visible `title` is provided */
+    'aria-label'?: string;
 }
 export declare const Drawer: React.FC<DrawerProps>;

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

@@ -1,2 +1,2 @@
-export { Drawer } from './Drawer';
 export type { DrawerProps } from './Drawer';
+export { Drawer } from './Drawer';

package/dist/components/Empty/Empty.d.ts

@@ -1,10 +1,19 @@
 import { default as React } from 'react';
 
 export interface EmptyProps {
+    /** Text or node shown below the image; defaults to "No data" */
     description?: React.ReactNode;
+    /** Custom image or illustration; pass null to hide the image entirely */
     image?: React.ReactNode;
+    /** Custom className for the root container */
     className?: string;
+    /** Inline styles applied to the root container */
     style?: React.CSSProperties;
+    /** Optional action or content rendered below the description */
     children?: React.ReactNode;
 }
+/**
+ * Empty state placeholder displayed when a list or data container has no content.
+ * Shows a default illustration and description, both of which can be overridden.
+ */
 export declare const Empty: React.FC<EmptyProps>;

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

@@ -1,2 +1,2 @@
-export { Empty } from './Empty';
 export type { EmptyProps } from './Empty';
+export { Empty } from './Empty';

package/dist/components/Form/Form.d.ts

@@ -1,17 +1,27 @@
 import { default as React } from 'react';
 
 export interface FormRule {
+    /** Whether the field must have a non-empty value */
     required?: boolean;
+    /** Error message shown when this rule fails */
     message?: string;
+    /** Built-in format validator applied to the field value */
     type?: 'email' | 'url' | 'number';
+    /** Minimum numeric value or minimum string/array length depending on type */
     min?: number;
+    /** Maximum numeric value or maximum string/array length depending on type */
     max?: number;
+    /** Regular expression the value must match */
     pattern?: RegExp;
+    /** Custom async validator function; throw or reject with an Error to fail validation */
     validator?: (rule: any, value: any) => Promise<void> | void;
 }
 export interface FormProps {
+    /** Form fields and other content */
     children: React.ReactNode;
+    /** Called with all field values when the form passes validation */
     onFinish?: (values: Record<string, any>) => void;
+    /** Called with field values and error details when validation fails on submit */
     onFinishFailed?: (errorInfo: {
         values: Record<string, any>;
         errorFields: Array<{
@@ -19,28 +29,52 @@ export interface FormProps {
             errors: string[];
         }>;
     }) => void;
+    /** Layout direction for labels and controls */
     layout?: 'horizontal' | 'vertical' | 'inline';
+    /** Custom className for the form element */
     className?: string;
+    /** HTML name attribute for the form element */
     name?: string;
+    /** Initial values keyed by field name */
     initialValues?: Record<string, any>;
+    /** Form instance for external control; for Ant Design compatibility */
     form?: any;
 }
 export interface FormItemProps {
+    /** Field name used to read and write the value in form state */
     name?: string;
+    /** Label text displayed above or beside the control */
     label?: string;
+    /** Validation rules evaluated on blur and on form submit */
     rules?: FormRule[];
+    /** The form control element to wrap */
     children: React.ReactElement;
+    /** Custom className for the form item wrapper */
     className?: string;
+    /** Static help text shown below the control when there is no error */
     help?: string;
+    /** Explicit validation status; overrides the derived error state */
     validateStatus?: 'success' | 'warning' | 'error' | 'validating';
+    /** Whether to mark the field as required in the label */
     required?: boolean;
+    /** When true, renders the control without the label/error wrapper */
     noStyle?: boolean;
+    /** Prop name on the child element used to supply its value */
     valuePropName?: string;
 }
+/**
+ * Form container that manages field values, validation, and submission.
+ * Wrap form controls in FormItem to connect them to the form state.
+ */
 export declare const Form: React.FC<FormProps> & {
     Item: typeof FormItem;
 };
+/**
+ * Connects a single form control to the parent Form's state and validation.
+ * Injects value, onChange, onBlur, and ARIA attributes into its direct child.
+ */
 export declare const FormItem: React.FC<FormItemProps>;
+/** Hook that returns a stub form instance for Ant Design API compatibility. */
 export declare const useForm: () => {
     resetFields: () => void;
     setFieldsValue: () => void;

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

@@ -1,2 +1,2 @@
+export type { FormItemProps, FormProps, FormRule } from './Form';
 export { Form, FormItem, useForm } from './Form';
-export type { FormProps, FormItemProps, FormRule } from './Form';

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

@@ -1,6 +1,6 @@
-export { default as Input, type InputProps } from '../Input';
-export { default as Textarea } from '../Textarea';
 export { default as Checkbox } from '../Checkbox';
-export { default as PasswordInput } from '../PasswordInput';
+export { default as Input, type InputProps } from '../Input';
 export { default as MobileInput } from '../MobileInput';
-export { default as PhoneNumberInput, type Country, type PhoneNumberInputProps } from '../PhoneNumberInput';
+export { default as PasswordInput } from '../PasswordInput';
+export { type Country, default as PhoneNumberInput, type PhoneNumberInputProps, } from '../PhoneNumberInput';
+export { default as Textarea } from '../Textarea';

package/dist/components/InfoSection/InfoSection.d.ts

@@ -3,36 +3,71 @@ import { default as React } from 'react';
 type InfoSectionVariant = 'default' | 'card' | 'bordered';
 type InfoSectionSize = 'small' | 'medium' | 'large';
 interface InfoSectionProps {
+    /** Primary heading displayed in the section header */
     title?: React.ReactNode;
+    /** Secondary line of text shown below the title */
     subtitle?: React.ReactNode;
+    /** Additional descriptive text shown below the subtitle */
     description?: React.ReactNode;
+    /** Content rendered in the section body */
     children?: React.ReactNode;
+    /** Custom className for the root container */
     className?: string;
+    /** Custom className for the header row */
     headerClassName?: string;
+    /** Custom className for the content area */
     contentClassName?: string;
+    /** Icon displayed to the left of the title */
     icon?: React.ReactNode;
+    /** Badge element rendered inline next to the title */
     badge?: React.ReactNode;
+    /** Action buttons or controls rendered on the right side of the header */
     actions?: React.ReactNode;
+    /** Visual presentation style of the section container */
     variant?: InfoSectionVariant;
+    /** Controls spacing and text sizes throughout the section */
     size?: InfoSectionSize;
+    /** Heading level (h1–h6) for the section title so it fits the page outline (default 3) */
+    titleLevel?: 1 | 2 | 3 | 4 | 5 | 6;
 }
+/**
+ * Structured content section with an optional header containing a title, subtitle, icon, badge, and actions.
+ * Use with InfoItem and InfoGrid to display labelled data inside the section body.
+ */
 export declare const InfoSection: React.FC<InfoSectionProps>;
 type InfoItemOrientation = 'vertical' | 'horizontal';
 interface InfoItemProps {
+    /** Descriptive label for the data point */
     label: React.ReactNode;
+    /** Value displayed alongside the label */
     value: React.ReactNode;
+    /** Custom className for the root element */
     className?: string;
+    /** Custom className for the label element */
     labelClassName?: string;
+    /** Custom className for the value element */
     valueClassName?: string;
+    /** Layout of label and value relative to each other */
     orientation?: InfoItemOrientation;
 }
+/**
+ * Single label-value pair for use inside an InfoSection or InfoGrid.
+ * Supports vertical (stacked) and horizontal (side-by-side) orientations.
+ */
 export declare const InfoItem: React.FC<InfoItemProps>;
 type InfoGridGap = 'small' | 'medium' | 'large';
 interface InfoGridProps {
+    /** InfoItem elements to arrange in the grid */
     children: React.ReactNode;
+    /** Number of columns in the responsive grid */
     columns?: 1 | 2 | 3 | 4;
+    /** Custom className for the grid container */
     className?: string;
+    /** Spacing between grid cells */
     gap?: InfoGridGap;
 }
+/**
+ * Responsive CSS grid container for laying out InfoItem components in multiple columns.
+ */
 export declare const InfoGrid: React.FC<InfoGridProps>;
 export {};

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

@@ -1 +1 @@
-export { InfoSection, InfoItem, InfoGrid } from './InfoSection';
+export { InfoGrid, InfoItem, InfoSection } from './InfoSection';

package/dist/components/Input/Input.d.ts

@@ -1,13 +1,24 @@
-import { ReactNode, InputHTMLAttributes } from 'react';
+import { InputHTMLAttributes, ReactNode } from 'react';
 
 export interface InputProps extends InputHTMLAttributes<HTMLInputElement> {
+    /** Icon rendered inside the input on the left side */
     leftIcon?: ReactNode;
+    /** Icon rendered inside the input on the right side */
     rightIcon?: ReactNode;
+    /** Whether to render the input in its error state */
     error?: boolean;
+    /** Helper or error message displayed below the input */
     helperText?: string;
+    /** Size variant controlling height, padding, and font size */
     inputSize?: 'sm' | 'md' | 'lg';
+    /** Custom className for the outer wrapper div */
     containerClassName?: string;
+    /** Custom className applied to both icon wrappers */
     iconClassName?: string;
 }
+/**
+ * Text input field with optional left/right icons, error state, and helper text.
+ * Forwards refs to the underlying input element and supports all standard HTML input attributes.
+ */
 declare const Input: import('react').ForwardRefExoticComponent<InputProps & import('react').RefAttributes<HTMLInputElement>>;
 export default Input;

package/dist/components/Layout/Layout.d.ts

@@ -1,32 +1,68 @@
 import { default as React } from 'react';
 
 export interface LayoutProps {
+    /** Content rendered inside the layout */
     children: React.ReactNode;
+    /** Additional CSS class names */
     className?: string;
+    /** Inline styles applied to the layout wrapper */
     style?: React.CSSProperties;
 }
 export interface HeaderProps {
+    /** Content rendered inside the header */
     children: React.ReactNode;
+    /** Additional CSS class names */
     className?: string;
+    /** Inline styles applied to the header element */
     style?: React.CSSProperties;
 }
 export interface ContentProps {
+    /** Content rendered inside the main area */
     children: React.ReactNode;
+    /** Additional CSS class names */
     className?: string;
+    /** Inline styles applied to the main element */
     style?: React.CSSProperties;
+    /**
+     * Landmark element to render. Defaults to `<main>`. Only one `<main>` is
+     * allowed per page, so nested Layout.Content instances should pass `as="div"`.
+     */
+    as?: 'main' | 'div' | 'section';
+    /** Accessible label, useful to disambiguate multiple regions */
+    'aria-label'?: string;
 }
 export interface FooterProps {
+    /** Content rendered inside the footer */
     children: React.ReactNode;
+    /** Additional CSS class names */
     className?: string;
+    /** Inline styles applied to the footer element */
     style?: React.CSSProperties;
 }
 export interface SiderProps {
+    /** Content rendered inside the sidebar */
     children: React.ReactNode;
+    /** Additional CSS class names */
     className?: string;
+    /** Inline styles applied to the aside element */
     style?: React.CSSProperties;
+    /** Width of the sidebar when expanded */
     width?: number | string;
+    /** Whether the sidebar is in collapsed (narrow) state */
     collapsed?: boolean;
+    /**
+     * Landmark element to render. Defaults to `<aside>` (complementary). Use
+     * `as="nav"` when the sidebar holds the primary navigation.
+     */
+    as?: 'aside' | 'nav' | 'div';
+    /** Accessible label, useful to disambiguate multiple nav/aside regions */
+    'aria-label'?: string;
 }
+/**
+ * Compound page-layout component that composes Header, Content, Footer, and Sider sub-components
+ * into a full-height flex column. Use the attached sub-components (Layout.Header, Layout.Content,
+ * Layout.Footer, Layout.Sider) to build structured application shells.
+ */
 export declare const Layout: React.FC<LayoutProps> & {
     Header: React.FC<HeaderProps>;
     Content: React.FC<ContentProps>;

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

@@ -1,2 +1,2 @@
+export type { ContentProps, FooterProps, HeaderProps, LayoutProps, SiderProps } from './Layout';
 export { Layout } from './Layout';
-export type { LayoutProps, HeaderProps, ContentProps, FooterProps, SiderProps } from './Layout';

package/dist/components/Loader/Loader.d.ts

@@ -21,4 +21,3 @@ export interface LoaderProps {
     delay?: number;
 }
 export declare const Loader: React.FC<LoaderProps>;
-export declare const loaderStyles = "\n  @keyframes page-loader {\n    0% {\n      transform: translateX(-150%);\n    }\n    100% {\n      transform: translateX(250%);\n    }\n  }\n\n  @keyframes page-loader-secondary {\n    0% {\n      transform: translateX(-150%);\n    }\n    66% {\n      transform: translateX(-150%);\n    }\n    100% {\n      transform: translateX(250%);\n    }\n  }\n\n  @keyframes inline-loader {\n    0% {\n      transform: translateX(-100%);\n    }\n    100% {\n      transform: translateX(200%);\n    }\n  }\n\n  .animate-page-loader {\n    animation: page-loader 2s linear infinite;\n  }\n\n  .animate-page-loader-secondary {\n    animation: page-loader-secondary 2s linear infinite;\n  }\n\n  .animate-inline-loader {\n    animation: inline-loader 1.5s ease-in-out infinite;\n  }\n";

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

@@ -0,0 +1 @@
+export { Loader, type LoaderProps } from './Loader';

package/dist/components/MobileInput/MobileInput.d.ts

@@ -1,8 +1,17 @@
 import { default as React } from 'react';
 
 interface MobileInputProps extends Omit<React.InputHTMLAttributes<HTMLInputElement>, 'type'> {
+    /** Country dial code prefix displayed before the input (e.g. "+1") */
     countryCode?: string;
+    /** Whether to render the input in an error/invalid state */
     error?: boolean;
+    /** Helper or error message displayed below the input */
+    helperText?: string;
 }
+/**
+ * Telephone input with a static country-code prefix badge on the left.
+ * The dial code is grouped with the field so screen readers announce them
+ * together. Forwards its ref to the underlying `<input type="tel">` element.
+ */
 declare const MobileInput: React.ForwardRefExoticComponent<MobileInputProps & React.RefAttributes<HTMLInputElement>>;
 export default MobileInput;

package/dist/components/PasswordInput/PasswordInput.d.ts

@@ -1,7 +1,12 @@
 import { default as React } from 'react';
 
-interface PasswordInputProps extends Omit<React.InputHTMLAttributes<HTMLInputElement>, "type"> {
+interface PasswordInputProps extends Omit<React.InputHTMLAttributes<HTMLInputElement>, 'type'> {
+    /** Whether to render the input in an error/invalid state */
     error?: boolean;
 }
+/**
+ * Password input field with a show/hide toggle button. Renders the base Input component
+ * internally and forwards its ref to the underlying `<input>` element.
+ */
 declare const PasswordInput: React.ForwardRefExoticComponent<PasswordInputProps & React.RefAttributes<HTMLInputElement>>;
 export default PasswordInput;

package/dist/components/PhoneNumberInput/PhoneNumberInput.d.ts

@@ -1,44 +1,89 @@
 import { default as React } from 'react';
 
 export interface Country {
+    /** ISO 3166-1 alpha-2 country code (e.g. "US") */
     code: string;
+    /** Human-readable country name */
     name: string;
+    /** International dial code including leading "+" (e.g. "+1") */
     dialCode: string;
+    /** Emoji flag representation of the country */
     flag: string;
+    /** Optional number format mask where "#" represents a digit */
     format?: string;
+    /** Optional sort priority; lower values appear first in the list */
     priority?: number;
 }
 export interface PhoneNumberInputProps extends Omit<React.InputHTMLAttributes<HTMLInputElement>, 'value' | 'onChange' | 'size'> {
+    /** Controlled phone number value (digits and formatting characters) */
     value?: string;
+    /** Uncontrolled initial phone number value */
     defaultValue?: string;
+    /** Callback fired when the phone number or selected country changes */
     onChange?: (value: string, country: Country) => void;
+    /** Callback fired when the user selects a different country */
     onCountryChange?: (country: Country) => void;
+    /** Whether to show the country selector dropdown button */
     enableCountryDropdown?: boolean;
+    /** ISO country code for the initially selected country */
     defaultCountry?: string;
+    /** Country codes to pin at the top of the dropdown list */
     preferredCountries?: string[];
+    /** Country codes to remove from the dropdown list */
     excludeCountries?: string[];
+    /** When non-empty, only these country codes will appear in the dropdown */
     onlyCountries?: string[];
+    /** Whether to display emoji flags in the dropdown and selector button */
     showCountryFlags?: boolean;
+    /** Whether to auto-format the phone number using the country's format mask */
     autoFormat?: boolean;
+    /** Whether to validate the entered phone number and show an error message */
     validatePhoneNumber?: boolean;
+    /** Callback fired when phone number validity changes */
     onValidationChange?: (isValid: boolean) => void;
+    /** Custom placeholder text for the phone input */
     placeholder?: string;
+    /** Whether to auto-generate a placeholder from the selected country's format */
     autoPlaceholder?: boolean;
+    /** Preferred position of the country dropdown relative to the input */
     dropdownPosition?: 'auto' | 'top' | 'bottom';
+    /** Whether the country dropdown includes a search field */
     searchable?: boolean;
+    /** Visual size of the input */
     size?: 'sm' | 'md' | 'lg';
+    /** Whether to render the input in an error/invalid state */
     error?: boolean;
+    /** Whether the input is disabled */
     disabled?: boolean;
+    /** Whether to show a loading spinner inside the input */
     loading?: boolean;
+    /** Accessible label for the phone number input */
     ariaLabel?: string;
+    /** ID of an element that describes the phone number input */
     ariaDescribedBy?: string;
+    /** Accessible label/placeholder for the country search field (localizable) */
+    searchLabel?: string;
+    /** Message shown when the country search returns no matches (localizable) */
+    noResultsText?: string;
+    /** Additional CSS class names for the outer border wrapper */
     className?: string;
+    /** Additional CSS class names for the outermost container div */
     containerClassName?: string;
+    /** Additional CSS class names for the country dropdown panel */
     dropdownClassName?: string;
+    /** Additional CSS class names for the phone number input element */
     inputClassName?: string;
+    /** HTML name attribute for form submission */
     name?: string;
+    /** HTML id attribute for the phone number input */
     id?: string;
+    /** Whether the field is required in a form */
     required?: boolean;
 }
+/**
+ * International phone number input with a searchable country selector dropdown. Supports
+ * auto-formatting, built-in validation, preferred/excluded country lists, and three size
+ * variants. Forwards its ref to the underlying `<input type="tel">` element.
+ */
 export declare const PhoneNumberInput: React.ForwardRefExoticComponent<PhoneNumberInputProps & React.RefAttributes<HTMLInputElement>>;
 export default PhoneNumberInput;