import type { Meta, StoryObj } from '@storybook/react';
import { AIDField } from './aid-field.js';
/**
 * ## Autocomplete field component
 *
 * `AIDField` is a specialized form component for handling AIDs (Agent Identifiers) 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
 * <AIDField
 *   name="agent-selector"
 *   label="Select Agent"
 *   placeholder="did:ethr:"
 *   variant="withValueTitleAndDescription"
 *
 *   // search options as the user types
 *   fetchOptionsCallback={async (userInput) => {
 *     const results = await searchAgents(userInput)
 *     return results.map(agent => ({
 *       value: agent.id, // unique agent ID
 *       title: agent.title, // agent title or name
 *       path: agent.path, // agent path or location
 *       description: agent.description, // agent description or summary
 *       agentType: agent.type, // agent type (e.g. "human", "bot", "organization", etc.)
 *       icon: agent.icon // agent icon
 *     }))
 *   }}
 *
 *   // get details of a specific option by its ID/value
 *   fetchSelectedOptionCallback={async (agentId) => {
 *     const agent = await getAgentById(agentId)
 *     return {
 *       value: agent.id,
 *       title: agent.title,
 *       path: agent.path,
 *       description: agent.description,
 *       agentType: agent.type,
 *       icon: agent.icon
 *     }
 *   }}
 * />
 * ```
 */
declare const meta: Meta<typeof AIDField>;
export default meta;
type Story = StoryObj<typeof AIDField>;
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=aid-field.stories.d.ts.map