@arolariu/components
Version:
🎨 70+ beautiful, accessible React components built on Base UI. TypeScript-first, CSS Modules styling, tree-shakeable, SSR-ready. Perfect for modern web apps, design systems & rapid prototyping. Zero config, maximum flexibility! ⚡
272 lines • 10.3 kB
TypeScript
import { Select as BaseSelect } from "@base-ui/react/select";
import * as React from "react";
interface SelectProps extends Omit<React.ComponentPropsWithRef<typeof BaseSelect.Root>, "onValueChange"> {
/** Called when the selected value changes and resolves to a string. @default undefined */
onValueChange?: (value: string) => void;
}
interface SelectTriggerProps extends Omit<React.ComponentPropsWithRef<typeof BaseSelect.Trigger>, "className"> {
/** Additional CSS classes merged with the select trigger styles. @default undefined */
className?: string;
}
interface SelectScrollUpButtonProps extends Omit<React.ComponentPropsWithRef<typeof BaseSelect.ScrollUpArrow>, "className"> {
/** Additional CSS classes merged with the scroll-up control styles. @default undefined */
className?: string;
}
interface SelectScrollDownButtonProps extends Omit<React.ComponentPropsWithRef<typeof BaseSelect.ScrollDownArrow>, "className"> {
/** Additional CSS classes merged with the scroll-down control styles. @default undefined */
className?: string;
}
interface SelectContentProps extends Omit<React.ComponentPropsWithRef<typeof BaseSelect.Positioner>, "className"> {
/** Additional CSS classes merged with the select popup styles. @default undefined */
className?: string;
/** The offset in pixels between the trigger and the popup. @default 4 */
sideOffset?: number;
}
interface SelectLabelProps extends Omit<React.ComponentPropsWithRef<typeof BaseSelect.GroupLabel>, "className"> {
/** Additional CSS classes merged with the group label styles. @default undefined */
className?: string;
}
interface SelectItemProps extends Omit<React.ComponentPropsWithRef<typeof BaseSelect.Item>, "className"> {
/** Additional CSS classes merged with the select item styles. @default undefined */
className?: string;
}
interface SelectSeparatorProps extends Omit<React.ComponentPropsWithRef<typeof BaseSelect.Separator>, "className"> {
/** Additional CSS classes merged with the separator styles. @default undefined */
className?: string;
}
/**
* Coordinates select state, keyboard navigation, and value management.
*
* @remarks
* - Renders no DOM element by default and coordinates descendant select parts
* - Built on {@link https://base-ui.com/react/components/select | Base UI Select}
* - Supports composition through descendant `render` props
* - Styling via CSS Modules with `--ac-*` custom properties
*
* @example Basic usage
* ```tsx
* <Select defaultValue="one">
* <SelectTrigger />
* <SelectContent>
* <SelectItem value="one">One</SelectItem>
* </SelectContent>
* </Select>
* ```
*
* @see {@link https://base-ui.com/react/components/select | Base UI Documentation}
*/
declare function Select(props: Readonly<Select.Props>): React.ReactElement;
declare namespace Select {
var displayName: string;
}
/**
* Groups related select items into a shared logical section.
*
* @remarks
* - Renders no DOM element by default beyond the underlying grouped option container
* - Built on {@link https://base-ui.com/react/components/select | Base UI Select}
* - Supports composition through descendant `render` props
* - Styling via CSS Modules with `--ac-*` custom properties through descendant components
*
* @example Basic usage
* ```tsx
* <SelectGroup>
* <SelectLabel>Team</SelectLabel>
* <SelectItem value="one">One</SelectItem>
* </SelectGroup>
* ```
*
* @see {@link https://base-ui.com/react/components/select | Base UI Documentation}
*/
declare const SelectGroup: React.ForwardRefExoticComponent<Omit<import("@base-ui/react").SelectGroupProps, "ref"> & React.RefAttributes<HTMLDivElement>>;
/**
* Displays the currently selected option inside the trigger.
*
* @remarks
* - Renders no DOM element by default beyond the underlying value slot
* - Built on {@link https://base-ui.com/react/components/select | Base UI Select}
* - Supports composition through surrounding select trigger rendering
* - Styling via CSS Modules with `--ac-*` custom properties through descendant components
*
* @example Basic usage
* ```tsx
* <SelectValue placeholder="Select an option" />
* ```
*
* @see {@link https://base-ui.com/react/components/select | Base UI Documentation}
*/
declare const SelectValue: React.ForwardRefExoticComponent<Omit<import("@base-ui/react").SelectValueProps, "ref"> & React.RefAttributes<HTMLSpanElement>>;
/**
* Opens the select popup and displays the current selected value.
*
* @remarks
* - Renders a `<button>` element by default
* - Built on {@link https://base-ui.com/react/components/select | Base UI Select}
* - Supports the `render` prop for element composition
* - Styling via CSS Modules with `--ac-*` custom properties
*
* @example Basic usage
* ```tsx
* <SelectTrigger>
* <SelectValue />
* </SelectTrigger>
* ```
*
* @see {@link https://base-ui.com/react/components/select | Base UI Documentation}
*/
declare const SelectTrigger: React.ForwardRefExoticComponent<Omit<SelectTriggerProps, "ref"> & React.RefAttributes<HTMLButtonElement>>;
/**
* Scrolls the select list upward when the popup overflows its viewport.
*
* @remarks
* - Renders a `<div>` element by default
* - Built on {@link https://base-ui.com/react/components/select | Base UI Select}
* - Supports the `render` prop for element composition
* - Pass `children` to override the default `ChevronUp` icon
* - Styling via CSS Modules with `--ac-*` custom properties
*
* @example Basic usage
* ```tsx
* <SelectScrollUpButton />
* ```
*
* @see {@link https://base-ui.com/react/components/select | Base UI Documentation}
*/
declare function SelectScrollUpButton(props: Readonly<SelectScrollUpButton.Props>): React.ReactElement;
declare namespace SelectScrollUpButton {
var displayName: string;
}
/**
* Scrolls the select list downward when the popup overflows its viewport.
*
* @remarks
* - Renders a `<div>` element by default
* - Built on {@link https://base-ui.com/react/components/select | Base UI Select}
* - Supports the `render` prop for element composition
* - Pass `children` to override the default `ChevronDown` icon
* - Styling via CSS Modules with `--ac-*` custom properties
*
* @example Basic usage
* ```tsx
* <SelectScrollDownButton />
* ```
*
* @see {@link https://base-ui.com/react/components/select | Base UI Documentation}
*/
declare function SelectScrollDownButton(props: Readonly<SelectScrollDownButton.Props>): React.ReactElement;
declare namespace SelectScrollDownButton {
var displayName: string;
}
/**
* Portals and positions the select popup with scroll affordances.
*
* @remarks
* - Renders a `<div>` element by default
* - Built on {@link https://base-ui.com/react/components/select | Base UI Select}
* - Supports the `render` prop for element composition
* - Styling via CSS Modules with `--ac-*` custom properties
*
* @example Basic usage
* ```tsx
* <SelectContent>
* <SelectItem value="one">One</SelectItem>
* </SelectContent>
* ```
*
* @see {@link https://base-ui.com/react/components/select | Base UI Documentation}
*/
declare const SelectContent: React.ForwardRefExoticComponent<Omit<SelectContentProps, "ref"> & React.RefAttributes<HTMLDivElement>>;
/**
* Labels a logical group of options inside the select popup.
*
* @remarks
* - Renders a `<div>` element by default
* - Built on {@link https://base-ui.com/react/components/select | Base UI Select}
* - Supports the `render` prop for element composition
* - Styling via CSS Modules with `--ac-*` custom properties
*
* @example Basic usage
* ```tsx
* <SelectLabel>Team</SelectLabel>
* ```
*
* @see {@link https://base-ui.com/react/components/select | Base UI Documentation}
*/
declare function SelectLabel(props: Readonly<SelectLabel.Props>): React.ReactElement;
declare namespace SelectLabel {
var displayName: string;
}
/**
* Renders a selectable option row within the select popup.
*
* @remarks
* - Renders a `<div>` element by default
* - Built on {@link https://base-ui.com/react/components/select | Base UI Select}
* - Supports the `render` prop for element composition
* - Styling via CSS Modules with `--ac-*` custom properties
*
* @example Basic usage
* ```tsx
* <SelectItem value="one">One</SelectItem>
* ```
*
* @see {@link https://base-ui.com/react/components/select | Base UI Documentation}
*/
declare function SelectItem(props: Readonly<SelectItem.Props>): React.ReactElement;
declare namespace SelectItem {
var displayName: string;
}
/**
* Separates groups of options inside the select popup.
*
* @remarks
* - Renders a `<div>` element by default
* - Built on {@link https://base-ui.com/react/components/select | Base UI Select}
* - Supports the `render` prop for element composition
* - Styling via CSS Modules with `--ac-*` custom properties
*
* @example Basic usage
* ```tsx
* <SelectSeparator />
* ```
*
* @see {@link https://base-ui.com/react/components/select | Base UI Documentation}
*/
declare function SelectSeparator(props: Readonly<SelectSeparator.Props>): React.ReactElement;
declare namespace SelectSeparator {
var displayName: string;
}
declare namespace Select {
type Props = SelectProps;
type State = BaseSelect.Root.State;
}
declare namespace SelectTrigger {
type Props = SelectTriggerProps;
type State = BaseSelect.Trigger.State;
}
declare namespace SelectScrollUpButton {
type Props = SelectScrollUpButtonProps;
type State = BaseSelect.ScrollUpArrow.State;
}
declare namespace SelectScrollDownButton {
type Props = SelectScrollDownButtonProps;
type State = BaseSelect.ScrollDownArrow.State;
}
declare namespace SelectContent {
type Props = SelectContentProps;
type State = BaseSelect.Popup.State;
}
declare namespace SelectLabel {
type Props = SelectLabelProps;
type State = BaseSelect.GroupLabel.State;
}
declare namespace SelectItem {
type Props = SelectItemProps;
type State = BaseSelect.Item.State;
}
declare namespace SelectSeparator {
type Props = SelectSeparatorProps;
type State = BaseSelect.Separator.State;
}
export { Select, SelectContent, SelectGroup, SelectItem, SelectLabel, SelectScrollDownButton, SelectScrollUpButton, SelectSeparator, SelectTrigger, SelectValue, };
//# sourceMappingURL=select.d.ts.map