@stanfordspezi/spezi-web-design-system
Version:
Stanford Biodesign Digital Health Spezi Web Design System
59 lines (58 loc) • 1.72 kB
TypeScript
import { IconName } from 'lucide-react/dynamic';
import { ComponentProps } from 'react';
import { IconSearchGridProps } from '../IconGrid';
import { PopoverRoot, PopoverTrigger } from '../Popover';
interface IconPickerProps extends Omit<ComponentProps<typeof PopoverTrigger>, "onSelect" | "onOpenChange">, ComponentProps<typeof PopoverRoot>, IconSearchGridProps {
value?: IconName;
defaultValue?: IconName;
triggerPlaceholder?: string;
}
/**
* Icon picker component with popover interface.
*
* Provides a button trigger that opens a popover containing an IconSearchGrid.
* Supports both controlled and uncontrolled usage patterns.
*
* @example
* ```tsx
* // Uncontrolled with default value
* <IconPicker
* defaultValue="home"
* onValueChange={(icon) => console.log('Selected:', icon)}
* />
* ```
*
* @example
* ```tsx
* // Controlled component
* <IconPicker
* value={selectedIcon}
* onValueChange={setSelectedIcon}
* triggerPlaceholder="Choose an icon"
* />
* ```
*
* @example
* ```tsx
* // Custom trigger
* <IconPicker onValueChange={handleSelect}>
* <Button variant="ghost">
* <Plus className="size-4" />
* Add Icon
* </Button>
* </IconPicker>
* ```
*
* @example
* ```tsx
* // With custom search and icons
* <IconPicker
* icons={brandIcons}
* searchPlaceholder="Search brand icons..."
* columns={6}
* onValueChange={setBrandIcon}
* />
* ```
*/
export declare const IconPicker: ({ open, onOpenChange, defaultOpen, modal, searchPlaceholder, icons, onValueChange, columns, visibleRows, rowHeight, showTooltip, value, defaultValue, triggerPlaceholder, children, ...props }: IconPickerProps) => import("react").JSX.Element;
export {};