import type { Meta, StoryObj } from '@storybook/react';
import DropdownExample from './dropdown-example.js';
/**
 * The `Dropdown` component system provides a flexible way to create interactive menus.
 * It follows a strict parent-child component structure where:
 * - `Dropdown` is the root container
 * - `DropdownTrigger` activates the menu
 * - `DropdownContent` wraps the menu items
 * - `DropdownItem` represents individual menu options
 *
 * ## How to setup the component
 *
 * First import the necessary components:
 *
 * ```tsx
 * import { Dropdown, DropdownTrigger, DropdownContent, DropdownItem } from "@powerhousedao/document-engineering/ui";
 * ```
 *
 * Basic implementation:
 *
 * ```tsx
 * function MyComponent() {
 *   return (
 *     <Dropdown>
 *       <DropdownTrigger>Open Menu</DropdownTrigger>
 *       <DropdownContent>
 *         <DropdownItem>Item 1</DropdownItem>
 *         <DropdownItem>Item 2</DropdownItem>
 *       </DropdownContent>
 *     </Dropdown>
 *   );
 * }
 * ```
 *
 * Basic usage with icons:
 *
 * ```tsx
 * <Dropdown>
 *   <DropdownTrigger className="w-[184px]">
 *     <DownloadIcon width={16} height={16} />
 *     Export Options
 *   </DropdownTrigger>
 *   <DropdownContent>
 *     <DropdownItem>
 *       <PDFIcon width={16} height={16} />
 *       Save as PDF
 *     </DropdownItem>
 *     <DropdownItem>
 *       <CSVIcon width={16} height={16} />
 *       Export CSV
 *     </DropdownItem>
 *   </DropdownContent>
 * </Dropdown>
 * ```
 *
 * ## Component Structure Rules
 * 1. `DropdownItem` must always be wrapped in `DropdownContent`
 * 2. `DropdownContent` must be a direct child of `Dropdown`
 * 3. Icons should be placed as direct children before text content
 *
 * ## Creating Different Menu Types
 *
 * Example 1: Export Menu (from current implementation)
 *
 * ```tsx
 * <Dropdown>
 *   <DropdownTrigger>
 *     <DownloadFileIcon />
 *     Export Format
 *   </DropdownTrigger>
 *   <DropdownContent>
 *     <DropdownItem><ZipIcon /> ZIP Archive</DropdownItem>
 *     <DropdownItem><UBLIcon /> UBL Format</DropdownItem>
 *     <DropdownItem><PDFIcon /> PDF Document</DropdownItem>
 *   </DropdownContent>
 * </Dropdown>
 * ```
 *
 * Example 2: Settings Menu
 *
 * ```tsx
 * <Dropdown>
 *   <DropdownTrigger>
 *     <SettingsIcon />
 *     Configuration
 *   </DropdownTrigger>
 *   <DropdownContent>
 *     <DropdownItem><UserIcon /> Profile</DropdownItem>
 *     <DropdownItem><SecurityIcon /> Privacy</DropdownItem>
 *     <DropdownItem><NotificationIcon /> Alerts</DropdownItem>
 *   </DropdownContent>
 * </Dropdown>
 * ```
 *
 * Example 3: Navigation Menu
 *
 * ```tsx
 * <Dropdown>
 *   <DropdownTrigger>
 *     <MenuIcon />
 *     Quick Links
 *   </DropdownTrigger>
 *   <DropdownContent>
 *     <DropdownItem><HomeIcon /> Dashboard</DropdownItem>
 *     <DropdownItem><AnalyticsIcon /> Reports</DropdownItem>
 *     <DropdownItem><SupportIcon /> Help Center</DropdownItem>
 *   </DropdownContent>
 * </Dropdown>
 * ```
 *
 * ## Icon Implementation
 * Icons can be used in two ways:
 *
 * ** Direct SVG Import** (Recommended for custom icons):
 *
 * ```tsx
 * import DownloadFile from "@/assets/icon-components/DownloadFile";
 * <DropdownItem>
 *   <DownloadFile width={16} height={16} /> Download File
 * </DropdownItem>
 * ```
 *
 *
 * ** Using Icon Component** (Recommended for dynamic icons):
 *
 * ```tsx
 * import { Icon } from "@/powerhouse";
 * <Dropdown>
 *   <DropdownTrigger>
 *     <Icon name="DownloadFile" />
 *     Download File
 *   </DropdownTrigger>
 *   <DropdownContent>
 *     <DropdownItem>
 *       <Icon name="DownloadFile" />
 *       Download File
 *     </DropdownItem>
 *     <DropdownItem>
 *       <Icon name="Settings" />
 *       Configuration
 *     </DropdownItem>
 *   </DropdownContent>
 * </Dropdown>
 * ```
 *
 * ## Event Handling
 * `DropdownItem` component extends `HTMLDivElement` attributes. To handle click events:
 *
 * **Inline implementation:**
 *
 * ```tsx
 * <DropdownItem onClick={() => console.log('Item clicked')}>
 *   <SettingsIcon /> Configuration
 * </DropdownItem>
 * ```
 *
 * The component accepts all `div` element props including:
 * - `onClick`: Mouse click handler
 * - `onMouseEnter`: Hover handler
 * - `data-*`: Custom data attributes
 * - `aria-*`: Accessibility attributes
 *
 * TypeScript users get full type checking for native div element props.
 */
declare const meta: Meta<typeof DropdownExample>;
export default meta;
type Story = StoryObj<typeof DropdownExample>;
export declare const Default: Story;
//# sourceMappingURL=dropdown.stories.d.ts.map