@accelint/design-toolkit/dist/components/options/index.d.ts

An open-source component library to serve as part of the entire ecosystem of UX for Accelint.

import * as react_jsx_runtime from 'react/jsx-runtime';
import * as react from 'react';
import { ContextValue } from 'react-aria-components';
import { OptionsDataItem, OptionsProps, OptionsItemProps, OptionsItemTextProps, OptionsSectionProps } from './types.js';
import '../icon/types.js';

declare const OptionsContext: react.Context<ContextValue<OptionsProps<OptionsDataItem>, HTMLDivElement>>;
declare function OptionsSection<T extends OptionsDataItem>({ children, classNames, header, items, }: OptionsSectionProps<T>): react_jsx_runtime.JSX.Element;
declare namespace OptionsSection {
    var displayName: string;
}
declare function OptionsItemContent({ className, ...rest }: OptionsItemTextProps): react_jsx_runtime.JSX.Element;
declare namespace OptionsItemContent {
    var displayName: string;
}
declare function OptionsItemLabel({ className, ...rest }: OptionsItemTextProps): react_jsx_runtime.JSX.Element;
declare namespace OptionsItemLabel {
    var displayName: string;
}
declare function OptionsItemDescription({ className, ...rest }: OptionsItemTextProps): react_jsx_runtime.JSX.Element;
declare namespace OptionsItemDescription {
    var displayName: string;
}
declare function OptionsItem<T extends OptionsDataItem>({ children, classNames, color, textValue, ...rest }: OptionsItemProps<T>): react_jsx_runtime.JSX.Element;
declare namespace OptionsItem {
    var displayName: string;
    var Label: typeof OptionsItemLabel;
    var Content: typeof OptionsItemContent;
    var Description: typeof OptionsItemDescription;
}
/**
 * Options - A flexible list component for selectable items with rich content
 *
 * Provides accessible list functionality with support for selection, sections,
 * and rich item content including labels, descriptions, and icons. Perfect for
 * dropdown lists, menu items, or any selectable list interface.
 *
 * @example
 * // Basic options list
 * <Options>
 *   <Options.Item>
 *     <Options.Item.Label>Option 1</Options.Item.Label>
 *   </Options.Item>
 *   <Options.Item>
 *     <Options.Item.Label>Option 2</Options.Item.Label>
 *   </Options.Item>
 * </Options>
 *
 * @example
 * // Options with descriptions and icons
 * <Options>
 *   <Options.Item>
 *     <Icon><User /></Icon>
 *     <Options.Item.Content>
 *       <Options.Item.Label>John Doe</Options.Item.Label>
 *       <Options.Item.Description>Senior Developer</Options.Item.Description>
 *     </Options.Item.Content>
 *   </Options.Item>
 * </Options>
 *
 * @example
 * // Sectioned options
 * <Options>
 *   <Options.Section header="Recent">
 *     <Options.Item>Recent Item 1</Options.Item>
 *   </Options.Section>
 *   <Options.Section header="All Items">
 *     <Options.Item>All Items 1</Options.Item>
 *   </Options.Section>
 * </Options>
 */
declare function Options<T extends OptionsDataItem>({ ref, ...props }: OptionsProps<T>): react_jsx_runtime.JSX.Element;
declare namespace Options {
    var displayName: string;
    var Item: typeof OptionsItem;
    var Section: typeof OptionsSection;
}

export { Options, OptionsContext };