import type { Meta, StoryObj } from '@storybook/react';
import { PHIDField } from './phid-field.js';
/**
 * ## Autocomplete field component
 *
 * `PHIDField` is a specialized form component for handling PHIDs (Powerhouse IDs) with advanced
 * autocomplete functionality and built-in validation. It allows users to search and select items intuitively
 * as they type.
 *
 * ### Important configs:
 *
 * **1.`fetchOptionsCallback` (for dynamic autocomplete)**
 * - Executes while the user types in the input field
 * - Receives the user's input text as a parameter
 * - Must return a list of options that match the search criteria
 * - Enables real-time search from APIs, databases, or others external or internal data sources
 *
 * **2.`fetchSelectedOptionCallback` (to update the preview of the selected option)**
 * - Called when the "refresh" button in the preview of the selected option is clicked
 * - Receives the selected option's ID/value as a parameter
 * - Must return the updated details of that specific option or undefined if the option is not found for some reason
 * - As `fetchOptionsCallback` can be used synchronously or asynchronously
 *
 * ### Basic usage example:
 *
 * ```tsx
 * <PHIDField
 *   name="document-selector"
 *   label="Select Document"
 *   placeholder="phd:"
 *   variant="withValueTitleAndDescription"
 *
 *   // search options as the user types
 *   fetchOptionsCallback={async (userInput) => {
 *     const results = await searchDocuments(userInput)
 *     return results.map(doc => ({
 *       value: doc.id, // unique document ID
 *       title: doc.title, // document title or name
 *       path: doc.path, // document path or location
 *       description: doc.description, // document description or summary
 *       icon: doc.icon // document icon
 *     }))
 *   }}
 *
 *   // get details of a specific option by its ID/value
 *   fetchSelectedOptionCallback={async (documentId) => {
 *     const doc = await getDocumentById(documentId)
 *     return {
 *       value: doc.id,
 *       title: doc.title,
 *       path: doc.path,
 *       description: doc.description,
 *       icon: doc.icon
 *     }
 *   }}
 * />
 * ```
 */
declare const meta: Meta<typeof PHIDField>;
export default meta;
type Story = StoryObj<typeof PHIDField>;
export declare const Default: Story;
export declare const Empty: Story;
export declare const Open: Story;
export declare const Filled: Story;
export declare const WithDifferencesAddition: Story;
export declare const WithDifferencesRemoval: Story;
export declare const WithDifferencesMixed: Story;
//# sourceMappingURL=phid-field.stories.d.ts.map