@loke/design-system/dist/components/select/select.d.mts

A design system with individually importable components

import * as SelectPrimitive from "@loke/ui/select";
import type { ComponentProps } from "react";
/**
 * Select component for dropdown selection.
 *
 * Provides a customizable dropdown menu for selecting options. Designed to be
 * flexible and accessible, supporting keyboard navigation and screen readers.
 *
 * Key features:
 * - Customizable trigger and dropdown content
 * - Support for grouping options
 * - Accessible keyboard navigation
 * - Indicator for selected items
 * - Controlled or uncontrolled state management
 */
declare function Select({ ...props }: ComponentProps<typeof SelectPrimitive.Root>): import("react/jsx-runtime").JSX.Element;
/**
 * SelectGroup component for grouping related select items.
 *
 * Provides a logical separation within the dropdown for organizing related options.
 */
declare function SelectGroup({ className, ...props }: ComponentProps<typeof SelectPrimitive.Group>): import("react/jsx-runtime").JSX.Element;
/**
 * SelectValue component for displaying the selected value.
 *
 * Renders the currently selected value within the SelectTrigger component.
 */
declare function SelectValue({ ...props }: ComponentProps<typeof SelectPrimitive.Value>): import("react/jsx-runtime").JSX.Element;
/**
 * SelectTrigger component with default styling.
 *
 * Renders the button that opens and closes the select dropdown. Contains
 * the currently selected value and a chevron icon indicating it's a dropdown.
 *
 * @param size - The size variant of the trigger. @default "default"
 */
declare function SelectTrigger({ className, size, children, ...props }: ComponentProps<typeof SelectPrimitive.Trigger> & {
    /** The size variant of the trigger. */
    size?: "sm" | "default";
}): import("react/jsx-runtime").JSX.Element;
/**
 * SelectContent component with default styling.
 *
 * Renders the dropdown menu containing the selectable options inside a portal.
 * Includes scroll buttons for long lists and supports both item-aligned and
 * popper positioning strategies.
 */
declare function SelectContent({ className, children, position, align, ...props }: ComponentProps<typeof SelectPrimitive.Content>): import("react/jsx-runtime").JSX.Element;
/**
 * SelectLabel component for labeling groups of select items.
 *
 * Provides a label or header for a group of related select options,
 * improving organization and readability of the dropdown.
 */
declare function SelectLabel({ className, ...props }: ComponentProps<typeof SelectPrimitive.Label>): import("react/jsx-runtime").JSX.Element;
/**
 * SelectItem component for individual items in the select dropdown.
 *
 * Renders a single selectable option within the dropdown with a check indicator
 * for the currently selected item.
 */
declare function SelectItem({ className, children, ...props }: ComponentProps<typeof SelectPrimitive.Item>): import("react/jsx-runtime").JSX.Element;
/**
 * SelectSeparator component for visually separating groups of items.
 *
 * Renders a horizontal line to visually separate different sections or groups within the dropdown.
 */
declare function SelectSeparator({ className, ...props }: ComponentProps<typeof SelectPrimitive.Separator>): import("react/jsx-runtime").JSX.Element;
/** Scroll-up button shown at the top of the dropdown when content overflows. */
declare function SelectScrollUpButton({ className, ...props }: ComponentProps<typeof SelectPrimitive.ScrollUpButton>): import("react/jsx-runtime").JSX.Element;
/** Scroll-down button shown at the bottom of the dropdown when content overflows. */
declare function SelectScrollDownButton({ className, ...props }: ComponentProps<typeof SelectPrimitive.ScrollDownButton>): import("react/jsx-runtime").JSX.Element;
export { Select, SelectContent, SelectGroup, SelectItem, SelectLabel, SelectScrollDownButton, SelectScrollUpButton, SelectSeparator, SelectTrigger, SelectValue, };