@stanfordspezi/spezi-web-design-system/dist/src/components/Select/Select.d.ts

Stanford Biodesign Digital Health Spezi Web Design System

import { Select as SelectPrimitive } from 'radix-ui';
import { ComponentProps } from 'react';
/**
 * Root component for the Select.
 * Controls the open state and value of the select.
 *
 * Built on top of [Radix UI Select](https://www.radix-ui.com/primitives/docs/components/select).
 */
export declare const Select: import('react').FC<SelectPrimitive.SelectProps>;
/**
 * Groups related select options together.
 * Provides visual and semantic grouping of options.
 *
 * @example
 * <SelectGroup>
 *   <SelectLabel>Fruits</SelectLabel>
 *   <SelectItem value="apple">Apple</SelectItem>
 *   <SelectItem value="banana">Banana</SelectItem>
 * </SelectGroup>
 */
export declare const SelectGroup: import('react').ForwardRefExoticComponent<SelectPrimitive.SelectGroupProps & import('react').RefAttributes<HTMLDivElement>>;
/**
 * Displays the currently selected value or placeholder.
 * Used inside SelectTrigger to show the current selection.
 *
 * @example
 * <SelectValue placeholder="Select a fruit" />
 */
export declare const SelectValue: import('react').ForwardRefExoticComponent<SelectPrimitive.SelectValueProps & import('react').RefAttributes<HTMLSpanElement>>;
/**
 * Input-styled component that opens the select when clicked.
 *
 * @example
 * <SelectTrigger>
 *   <SelectValue placeholder="Select an option" />
 * </SelectTrigger>
 */
export declare const SelectTrigger: ({ className, children, ...props }: ComponentProps<typeof SelectPrimitive.Trigger>) => import("react").JSX.Element;
/**
 * Scroll up button for the select content.
 * Appears when there are more items to scroll to.
 */
export declare const SelectScrollUpButton: ({ className, ...props }: ComponentProps<typeof SelectPrimitive.ScrollUpButton>) => import("react").JSX.Element;
/**
 * Scroll down button for the select content.
 * Appears when there are more items to scroll to.
 */
export declare const SelectScrollDownButton: ({ className, ...props }: ComponentProps<typeof SelectPrimitive.ScrollDownButton>) => import("react").JSX.Element;
/**
 * Main content component for the Select.
 * Contains the list of selectable options.
 *
 * Handles portal, scroll buttons, styling and animations.
 *
 * @example
 * <SelectContent>
 *   <SelectItem value="option1">Option 1</SelectItem>
 *   <SelectItem value="option2">Option 2</SelectItem>
 * </SelectContent>
 */
export declare const SelectContent: ({ className, children, position, ...props }: ComponentProps<typeof SelectPrimitive.Content>) => import("react").JSX.Element;
/**
 * Label component for the select.
 * Provides a label for a group of options.
 *
 * @example
 * <SelectLabel>Category</SelectLabel>
 * <SelectItem value="1">Option 1</SelectItem>
 * <SelectItem value="2">Option 2</SelectItem>
 */
export declare const SelectLabel: ({ className, ...props }: ComponentProps<typeof SelectPrimitive.Label>) => import("react").JSX.Element;
type SelectItemProps = ComponentProps<typeof SelectPrimitive.Item> & {
    /**
     * Provide itemText only if `children` is a complex ReactNode element.
     */
    itemText?: string;
};
/**
 * Item component for select options.
 * Represents a single selectable option.
 *
 * @example
 * <SelectItem value="1">Option 1</SelectItem>
 *
 * @example
 * // With custom text, for complex ReactNode labels
 * <SelectItem value="1" itemText="Custom text">
 *   <div>Option <b>1</b></div>
 * </SelectItem>
 */
export declare const SelectItem: ({ className, children, itemText, ...props }: SelectItemProps) => import("react").JSX.Element;
/**
 * Separator component for the select.
 * Creates a visual divider between groups of items.
 *
 * @example
 * <SelectItem value="1">Option 1</SelectItem>
 * <SelectSeparator />
 * <SelectItem value="2">Option 2</SelectItem>
 */
export declare const SelectSeparator: ({ className, ...props }: ComponentProps<typeof SelectPrimitive.Separator>) => import("react").JSX.Element;
export {};