@neynar/ui 0.3.1 → 0.5.0

package/dist/components/ui/select.d.ts

@@ -1,638 +1,58 @@
+import { Select as SelectPrimitive } from '@base-ui/react/select';
 import * as React from "react";
-import * as SelectPrimitive from "@radix-ui/react-select";
+type SelectProps<T = unknown> = SelectPrimitive.Root.Props<T>;
 /**
- * Select - A dropdown selection component built on Radix UI primitives
- *
- * Provides a dropdown menu for selecting a single option from a list of choices.
- * Features comprehensive keyboard navigation, grouping capabilities, accessibility
- * compliance, and flexible styling options. Perfect for forms, filters, and
- * configuration interfaces. Built on Radix UI Select.Root with enhanced styling.
- *
- * @component
- * @example
- * ```tsx
- * // Basic uncontrolled select
- * <Select defaultValue="apple">
- *   <SelectTrigger className="w-[180px]">
- *     <SelectValue placeholder="Select a fruit" />
- *   </SelectTrigger>
- *   <SelectContent>
- *     <SelectItem value="apple">Apple</SelectItem>
- *     <SelectItem value="banana">Banana</SelectItem>
- *     <SelectItem value="orange">Orange</SelectItem>
- *   </SelectContent>
- * </Select>
- * ```
- *
- * @example
- * ```tsx
- * // Controlled select with state management
- * const [value, setValue] = useState("");
- *
- * <Select value={value} onValueChange={setValue}>
- *   <SelectTrigger>
- *     <SelectValue placeholder="Choose an option" />
- *   </SelectTrigger>
- *   <SelectContent>
- *     <SelectItem value="option1">Option 1</SelectItem>
- *     <SelectItem value="option2">Option 2</SelectItem>
- *   </SelectContent>
- * </Select>
- * ```
- *
- * @example
- * ```tsx
- * // Grouped options with separators and labels
- * <Select>
- *   <SelectTrigger>
- *     <SelectValue placeholder="Select a timezone" />
- *   </SelectTrigger>
- *   <SelectContent>
- *     <SelectGroup>
- *       <SelectLabel>North America</SelectLabel>
- *       <SelectItem value="est">Eastern Time (EST)</SelectItem>
- *       <SelectItem value="cst">Central Time (CST)</SelectItem>
- *       <SelectItem value="pst">Pacific Time (PST)</SelectItem>
- *     </SelectGroup>
- *     <SelectSeparator />
- *     <SelectGroup>
- *       <SelectLabel>Europe</SelectLabel>
- *       <SelectItem value="gmt">Greenwich Mean Time (GMT)</SelectItem>
- *       <SelectItem value="cet">Central European Time (CET)</SelectItem>
- *     </SelectGroup>
- *   </SelectContent>
- * </Select>
- * ```
- *
- * @example
- * ```tsx
- * // Form integration with validation and required state
- * <form>
- *   <Select name="userRole" required defaultValue="">
- *     <SelectTrigger id="role" aria-describedby="role-error">
- *       <SelectValue placeholder="Choose your role" />
- *     </SelectTrigger>
- *     <SelectContent>
- *       <SelectItem value="admin">Administrator</SelectItem>
- *       <SelectItem value="user">User</SelectItem>
- *       <SelectItem value="guest">Guest</SelectItem>
- *     </SelectContent>
- *   </Select>
- * </form>
- * ```
- *
- * @example
- * ```tsx
- * // Disabled states and interactions
- * <Select disabled>
- *   <SelectTrigger>
- *     <SelectValue placeholder="Disabled select" />
- *   </SelectTrigger>
- *   <SelectContent>
- *     <SelectItem value="1">Option 1</SelectItem>
- *     <SelectItem value="2" disabled>Option 2 (disabled)</SelectItem>
- *   </SelectContent>
- * </Select>
- * ```
- *
- * @accessibility
- * - **Keyboard Navigation**: Arrow keys to navigate items, Enter/Space to select, Escape to close
- * - **Focus Management**: Focus trapped within dropdown when open, returns to trigger on close
- * - **Screen Reader Support**: Announces selected values, state changes, and item counts
- * - **ARIA Compliance**: Proper roles (combobox, listbox, option), states (expanded, selected), and properties
- * - **Typeahead**: Type characters to jump to matching items
- * - **Home/End Keys**: Jump to first/last items in the list
- * - **Disabled State**: Properly communicated to assistive technology
- * - **Required Field**: Integrates with form validation and screen reader announcements
- *
- * @see {@link SelectTrigger} - The button that opens the dropdown
- * @see {@link SelectContent} - The dropdown content container
- * @see {@link SelectItem} - Individual selectable options
- * @see {@link SelectGroup} - Container for grouping related items
- * @see {@link SelectValue} - Displays selected value or placeholder
- * @see {@link SelectLabel} - Non-selectable labels for groups
- * @see {@link SelectSeparator} - Visual dividers between groups
- * @see {@link https://www.radix-ui.com/primitives/docs/components/select} for Radix UI documentation
- * @see {@link https://ui.shadcn.com/docs/components/select} for design patterns
- * @since 1.0.0
+ * Select root component. Manages select state and provides context to children.
+ * Use with SelectTrigger, SelectContent, SelectItem, and SelectValue.
  */
-declare function Select({ ...props }: React.ComponentProps<typeof SelectPrimitive.Root>): import("react/jsx-runtime").JSX.Element;
+declare const Select: typeof SelectPrimitive.Root;
+type SelectGroupProps = SelectPrimitive.Group.Props;
 /**
- * SelectGroup - Container for grouping related select items
- *
- * Groups related options together with an optional label for better organization
- * and improved user experience when dealing with many options. Built on Radix UI
- * Select.Group with semantic grouping that enhances screen reader navigation.
- *
- * @component
- * @example
- * ```tsx
- * // Basic group with label
- * <SelectGroup>
- *   <SelectLabel>Fruits</SelectLabel>
- *   <SelectItem value="apple">Apple</SelectItem>
- *   <SelectItem value="banana">Banana</SelectItem>
- *   <SelectItem value="orange">Orange</SelectItem>
- * </SelectGroup>
- * ```
- *
- * @example
- * ```tsx
- * // Multiple groups with separators
- * <SelectContent>
- *   <SelectGroup>
- *     <SelectLabel>Popular Choices</SelectLabel>
- *     <SelectItem value="most-popular">Most Popular</SelectItem>
- *     <SelectItem value="trending">Trending</SelectItem>
- *   </SelectGroup>
- *   <SelectSeparator />
- *   <SelectGroup>
- *     <SelectLabel>All Options</SelectLabel>
- *     <SelectItem value="option1">Option 1</SelectItem>
- *     <SelectItem value="option2">Option 2</SelectItem>
- *   </SelectGroup>
- * </SelectContent>
- * ```
- *
- * @example
- * ```tsx
- * // Group without label for simple separation
- * <SelectGroup>
- *   <SelectItem value="item1">Item 1</SelectItem>
- *   <SelectItem value="item2">Item 2</SelectItem>
- * </SelectGroup>
- * ```
- *
- * @accessibility
- * - **Semantic Grouping**: Creates logical groups that screen readers can navigate
- * - **Label Association**: SelectLabel properly associates with group items
- * - **Focus Management**: Arrow keys move between items within and across groups
- * - **Screen Reader Navigation**: Group boundaries announced to assistive technology
- *
- * @see {@link SelectLabel} - Optional label for the group
- * @see {@link SelectItem} - Individual items within the group
- * @see {@link SelectSeparator} - Visual divider between groups
- * @since 1.0.0
+ * Groups related select items with a label.
  */
-declare function SelectGroup({ ...props }: React.ComponentProps<typeof SelectPrimitive.Group>): import("react/jsx-runtime").JSX.Element;
+declare function SelectGroup({ className, ...props }: SelectGroupProps): import("react/jsx-runtime").JSX.Element;
+type SelectValueProps = SelectPrimitive.Value.Props;
 /**
- * SelectValue - Displays the selected value or placeholder
- *
- * Renders the currently selected option's text or a placeholder when no option
- * is selected. Built on Radix UI Select.Value with proper text truncation and
- * styling. Must be used inside SelectTrigger to display the current selection state.
- *
- * @component
- * @example
- * ```tsx
- * // Basic usage with placeholder
- * <SelectTrigger>
- *   <SelectValue placeholder="Choose an option" />
- * </SelectTrigger>
- * ```
- *
- * @example
- * ```tsx
- * // Custom placeholder styling
- * <SelectTrigger>
- *   <SelectValue
- *     placeholder={
- *       <span className="text-muted-foreground italic">
- *         No selection made
- *       </span>
- *     }
- *   />
- * </SelectTrigger>
- * ```
- *
- * @example
- * ```tsx
- * // Using asChild for complete custom rendering
- * <SelectValue asChild>
- *   <div className="flex items-center gap-2">
- *     {selectedItem ? (
- *       <>
- *         <ItemIcon />
- *         <span>{selectedItem.label}</span>
- *       </>
- *     ) : (
- *       <span className="text-muted-foreground">Select item...</span>
- *     )}
- *   </div>
- * </SelectValue>
- * ```
- *
- * @accessibility
- * - **Value Announcement**: Selected value announced to screen readers
- * - **Placeholder Semantics**: Placeholder properly identified for assistive technology
- * - **Text Truncation**: Long values truncated with ellipsis to prevent layout issues
- * - **Content Updates**: Dynamic content changes announced to screen readers
- *
- * @see {@link SelectTrigger} - Required parent container for the value display
- * @since 1.0.0
+ * Displays the selected item's value or placeholder text.
  */
-declare function SelectValue({ ...props }: React.ComponentProps<typeof SelectPrimitive.Value>): import("react/jsx-runtime").JSX.Element;
+declare function SelectValue({ className, ...props }: SelectValueProps): import("react/jsx-runtime").JSX.Element;
+type SelectTriggerProps = SelectPrimitive.Trigger.Props & {
+    /** Select trigger size. @default "default" */
+    size?: "sm" | "default";
+};
 /**
- * SelectTrigger - The button that opens the select dropdown
- *
- * A styled button that displays the current value and triggers the dropdown menu.
- * Built on Radix UI Select.Trigger with enhanced styling including focus states,
- * size variants, and proper hover interactions. Includes a chevron icon to indicate
- * dropdown functionality and supports different size variants for various UI contexts.
- *
- * **Size Variants:**
- * - `default`: Standard height (36px) suitable for most forms and interfaces
- * - `sm`: Compact height (32px) ideal for dense layouts and table interfaces
- *
- * @component
- * @example
- * ```tsx
- * // Basic trigger with custom width
- * <SelectTrigger className="w-[200px]">
- *   <SelectValue placeholder="Select an option" />
- * </SelectTrigger>
- * ```
- *
- * @example
- * ```tsx
- * // Small size variant for compact layouts
- * <SelectTrigger size="sm" className="w-[150px]">
- *   <SelectValue placeholder="Compact select" />
- * </SelectTrigger>
- * ```
- *
- * @example
- * ```tsx
- * // Form integration with accessibility attributes
- * <label htmlFor="user-role">User Role</label>
- * <SelectTrigger id="user-role" aria-describedby="role-help">
- *   <SelectValue placeholder="Choose role" />
- * </SelectTrigger>
- * <div id="role-help">Select the appropriate role for this user</div>
- * ```
- *
- * @example
- * ```tsx
- * // Custom composition using asChild
- * <SelectTrigger asChild>
- *   <button className="custom-trigger-styles">
- *     <SelectValue />
- *     <CustomChevronIcon />
- *   </button>
- * </SelectTrigger>
- * ```
- *
- * @accessibility
- * - **Keyboard Navigation**: Enter/Space to open dropdown, Arrow keys to navigate when closed
- * - **Focus Management**: Clear focus ring for keyboard users, focus returns after selection
- * - **State Announcements**: Screen readers announce open/closed state and selected value
- * - **ARIA Support**: Proper combobox role with expanded state and controls relationship
- * - **Form Integration**: Works with labels, validation, and form submission
- * - **Disabled State**: Properly communicated to assistive technology with reduced opacity
- * - **RTL Support**: Automatically adapts layout for right-to-left reading modes
- *
- * @see {@link SelectValue} - Displays the selected value or placeholder
- * @see {@link SelectContent} - The dropdown content that opens
- * @since 1.0.0
+ * Button that opens the select dropdown. Automatically includes chevron icon.
  */
-declare function SelectTrigger({ className, size, children, ...props }: React.ComponentProps<typeof SelectPrimitive.Trigger> & {
-    size?: "sm" | "default";
-}): import("react/jsx-runtime").JSX.Element;
+declare function SelectTrigger({ className, size, children, ...props }: SelectTriggerProps): import("react/jsx-runtime").JSX.Element;
+type SelectContentProps = SelectPrimitive.Popup.Props & Pick<SelectPrimitive.Positioner.Props, "align" | "alignOffset" | "side" | "sideOffset" | "alignItemWithTrigger">;
 /**
- * SelectContent - Container for the dropdown content
- *
- * The dropdown panel that contains all selectable items, groups, and labels.
- * Built on Radix UI Select.Content with Portal rendering for proper layering.
- * Automatically handles scrolling for long lists, collision detection, and
- * positioning relative to the trigger with smooth animations.
- *
- * **Positioning Strategy:**
- * - `popper`: Uses Floating UI for precise positioning with collision detection
- * - `item-aligned`: Aligns content with the selected item for natural feel
- *
- * @component
- * @example
- * ```tsx
- * // Basic content with multiple items
- * <SelectContent>
- *   <SelectItem value="1">Option 1</SelectItem>
- *   <SelectItem value="2">Option 2</SelectItem>
- *   <SelectItem value="3">Option 3</SelectItem>
- * </SelectContent>
- * ```
- *
- * @example
- * ```tsx
- * // Item-aligned positioning (default behavior)
- * <SelectContent position="item-aligned">
- *   <SelectItem value="apple">Apple</SelectItem>
- *   <SelectItem value="banana">Banana</SelectItem>
- * </SelectContent>
- * ```
- *
- * @example
- * ```tsx
- * // Popper positioning with custom placement
- * <SelectContent position="popper" side="top" align="end">
- *   <SelectItem value="1">Option 1</SelectItem>
- *   <SelectItem value="2">Option 2</SelectItem>
- * </SelectContent>
- * ```
- *
- * @example
- * ```tsx
- * // Complex content with groups and scrolling
- * <SelectContent>
- *   <SelectGroup>
- *     <SelectLabel>Recent Items</SelectLabel>
- *     <SelectItem value="recent1">Recently Used 1</SelectItem>
- *     <SelectItem value="recent2">Recently Used 2</SelectItem>
- *   </SelectGroup>
- *   <SelectSeparator />
- *   <SelectGroup>
- *     <SelectLabel>All Items</SelectLabel>
- *     {items.map((item) => (
- *       <SelectItem key={item.id} value={item.id}>
- *         {item.label}
- *       </SelectItem>
- *     ))}
- *   </SelectGroup>
- * </SelectContent>
- * ```
- *
- * @accessibility
- * - **Focus Management**: Focus trapped within dropdown when open, managed viewport scrolling
- * - **Keyboard Navigation**: Arrow keys navigate items, Page Up/Down for quick navigation
- * - **Portal Rendering**: Renders in document body for proper layering and screen reader access
- * - **Collision Detection**: Automatically repositions to stay within viewport boundaries
- * - **Scroll Indicators**: Shows scroll buttons when content exceeds available height
- * - **Animation**: Smooth enter/exit animations that respect user's motion preferences
- * - **Escape Handling**: Escape key closes dropdown and returns focus to trigger
- *
- * @see {@link SelectItem} - Individual selectable options
- * @see {@link SelectGroup} - Container for grouping related items
- * @see {@link SelectScrollUpButton} - Scroll up indicator for long lists
- * @see {@link SelectScrollDownButton} - Scroll down indicator for long lists
- * @since 1.0.0
+ * Select dropdown content. Automatically renders in a portal with positioning and scroll buttons.
  */
-declare function SelectContent({ className, children, position, ...props }: React.ComponentProps<typeof SelectPrimitive.Content>): import("react/jsx-runtime").JSX.Element;
+declare function SelectContent({ className, children, side, sideOffset, align, alignOffset, alignItemWithTrigger, ...props }: SelectContentProps): import("react/jsx-runtime").JSX.Element;
+type SelectLabelProps = SelectPrimitive.GroupLabel.Props;
 /**
- * SelectLabel - Label for a group of select items
- *
- * Provides a non-selectable label for categorizing groups of options.
- * Built on Radix UI Select.Label with muted styling and proper typography.
- * Helps users understand the context of the options below and improves
- * navigation for screen reader users.
- *
- * @component
- * @example
- * ```tsx
- * // Basic group label
- * <SelectGroup>
- *   <SelectLabel>Countries</SelectLabel>
- *   <SelectItem value="us">United States</SelectItem>
- *   <SelectItem value="uk">United Kingdom</SelectItem>
- *   <SelectItem value="ca">Canada</SelectItem>
- * </SelectGroup>
- * ```
- *
- * @example
- * ```tsx
- * // Multiple labeled groups
- * <SelectContent>
- *   <SelectGroup>
- *     <SelectLabel>Primary Options</SelectLabel>
- *     <SelectItem value="primary1">Primary Choice 1</SelectItem>
- *     <SelectItem value="primary2">Primary Choice 2</SelectItem>
- *   </SelectGroup>
- *   <SelectSeparator />
- *   <SelectGroup>
- *     <SelectLabel>Advanced Options</SelectLabel>
- *     <SelectItem value="advanced1">Advanced Choice 1</SelectItem>
- *     <SelectItem value="advanced2">Advanced Choice 2</SelectItem>
- *   </SelectGroup>
- * </SelectContent>
- * ```
- *
- * @example
- * ```tsx
- * // Custom styling with asChild
- * <SelectLabel asChild>
- *   <div className="flex items-center gap-1 px-2 py-1 font-semibold">
- *     <Icon className="size-3" />
- *     <span>Categories</span>
- *   </div>
- * </SelectLabel>
- * ```
- *
- * @accessibility
- * - **Semantic Association**: Properly associated with group items for screen readers
- * - **Non-Interactive**: Cannot receive focus or be selected
- * - **Group Navigation**: Helps screen reader users understand item organization
- * - **Descriptive Text**: Provides context for the items that follow
- *
- * @see {@link SelectGroup} - Required parent container
- * @see {@link SelectItem} - Items that this label describes
- * @since 1.0.0
+ * Label for a group of select items.
  */
-declare function SelectLabel({ className, ...props }: React.ComponentProps<typeof SelectPrimitive.Label>): import("react/jsx-runtime").JSX.Element;
+declare function SelectLabel({ className, ...props }: SelectLabelProps): import("react/jsx-runtime").JSX.Element;
+type SelectItemProps = SelectPrimitive.Item.Props;
 /**
- * SelectItem - Individual selectable option in the dropdown
- *
- * Represents a single option that users can select. Built on Radix UI Select.Item
- * with enhanced styling including hover states, selection indicators, and proper
- * spacing. Shows a checkmark when selected and supports keyboard navigation with
- * proper focus management.
- *
- * @component
- * @example
- * ```tsx
- * // Basic item
- * <SelectItem value="apple">Apple</SelectItem>
- * ```
- *
- * @example
- * ```tsx
- * // Disabled item that cannot be selected
- * <SelectItem value="sold-out" disabled>
- *   Sold Out - Unavailable
- * </SelectItem>
- * ```
- *
- * @example
- * ```tsx
- * // Complex item content with custom text value for typeahead
- * <SelectItem value="user-123" textValue="John Doe">
- *   <div className="flex items-center gap-2">
- *     <Avatar size="sm" />
- *     <div>
- *       <div>John Doe</div>
- *       <div className="text-xs text-muted-foreground">john@example.com</div>
- *     </div>
- *   </div>
- * </SelectItem>
- * ```
- *
- * @example
- * ```tsx
- * // Using asChild for custom item composition
- * <SelectItem value="custom" asChild>
- *   <div className="custom-item-styles">
- *     Custom item content
- *   </div>
- * </SelectItem>
- * ```
- *
- * @accessibility
- * - **Keyboard Navigation**: Arrow keys navigate between items, Home/End jump to first/last
- * - **Selection**: Enter or Space selects the item and closes dropdown
- * - **Visual Feedback**: Check icon indicates selected state, focus ring for keyboard users
- * - **Disabled State**: Cannot be selected or focused, announced to screen readers
- * - **Typeahead**: Type characters to jump to matching items (uses textValue or content)
- * - **Screen Reader**: Announces item text and selection state changes
- *
- * @see {@link SelectContent} - Parent container that manages items
- * @see {@link SelectGroup} - Optional grouping container
- * @since 1.0.0
+ * Individual selectable item. Automatically shows check icon when selected.
  */
-declare function SelectItem({ className, children, ...props }: React.ComponentProps<typeof SelectPrimitive.Item>): import("react/jsx-runtime").JSX.Element;
+declare function SelectItem({ className, children, ...props }: SelectItemProps): import("react/jsx-runtime").JSX.Element;
+type SelectSeparatorProps = SelectPrimitive.Separator.Props;
 /**
- * SelectSeparator - Visual divider between select groups
- *
- * A horizontal line that visually separates groups of options for better
- * organization and clarity. Built on Radix UI Select.Separator with subtle
- * border styling that adapts to the current theme.
- *
- * @component
- * @example
- * ```tsx
- * // Basic separation between groups
- * <SelectContent>
- *   <SelectGroup>
- *     <SelectLabel>Group 1</SelectLabel>
- *     <SelectItem value="1">Option 1</SelectItem>
- *   </SelectGroup>
- *   <SelectSeparator />
- *   <SelectGroup>
- *     <SelectLabel>Group 2</SelectLabel>
- *     <SelectItem value="2">Option 2</SelectItem>
- *   </SelectGroup>
- * </SelectContent>
- * ```
- *
- * @example
- * ```tsx
- * // Multiple separators in complex layouts
- * <SelectContent>
- *   <SelectGroup>
- *     <SelectItem value="recent">Recent Items</SelectItem>
- *   </SelectGroup>
- *   <SelectSeparator />
- *   <SelectGroup>
- *     <SelectItem value="favorite">Favorites</SelectItem>
- *   </SelectGroup>
- *   <SelectSeparator />
- *   <SelectGroup>
- *     <SelectLabel>All Items</SelectLabel>
- *     <SelectItem value="all1">Item 1</SelectItem>
- *     <SelectItem value="all2">Item 2</SelectItem>
- *   </SelectGroup>
- * </SelectContent>
- * ```
- *
- * @accessibility
- * - **Decorative Role**: Pure visual element with no semantic meaning for screen readers
- * - **Non-Interactive**: Cannot receive focus or be activated
- * - **Visual Organization**: Helps sighted users understand content structure
- * - **Theme Adaptive**: Border color adapts to light/dark themes automatically
- *
- * @see {@link SelectGroup} - Typically used to separate different groups
- * @since 1.0.0
+ * Visual separator between select groups.
  */
-declare function SelectSeparator({ className, ...props }: React.ComponentProps<typeof SelectPrimitive.Separator>): import("react/jsx-runtime").JSX.Element;
+declare function SelectSeparator({ className, ...props }: SelectSeparatorProps): import("react/jsx-runtime").JSX.Element;
+type SelectScrollUpButtonProps = React.ComponentProps<typeof SelectPrimitive.ScrollUpArrow>;
 /**
- * SelectScrollUpButton - Scroll button for navigating up in long lists
- *
- * Appears at the top of the dropdown when there are more items above
- * the visible area. Built on Radix UI Select.ScrollUpButton with chevron
- * icon and hover states. Automatically shows/hides based on scroll position.
- *
- * @component
- * @example
- * ```tsx
- * // Automatically included in SelectContent
- * <SelectContent>
- *   // ScrollUpButton appears here when needed
- *   <SelectItem value="1">Item 1</SelectItem>
- *   // ... many items ...
- *   <SelectItem value="100">Item 100</SelectItem>
- *   // ScrollDownButton appears here when needed
- * </SelectContent>
- * ```
- *
- * @example
- * ```tsx
- * // Custom scroll button using asChild
- * <SelectScrollUpButton asChild>
- *   <button className="custom-scroll-styles">
- *     <CustomUpIcon />
- *   </button>
- * </SelectScrollUpButton>
- * ```
- *
- * @accessibility
- * - **Auto-Visibility**: Only appears when upward scrolling is possible
- * - **Keyboard Accessible**: Can be activated with Enter/Space
- * - **Focus Management**: Receives focus during keyboard navigation
- * - **Screen Reader**: Announced as scroll control with directional context
- * - **Mouse/Touch**: Responds to click/touch interactions for scrolling
- *
- * @see {@link SelectContent} - Container that manages scroll button visibility
- * @see {@link SelectScrollDownButton} - Counterpart for downward scrolling
- * @since 1.0.0
+ * Scroll indicator button at the top of scrollable content.
  */
-declare function SelectScrollUpButton({ className, ...props }: React.ComponentProps<typeof SelectPrimitive.ScrollUpButton>): import("react/jsx-runtime").JSX.Element;
+declare function SelectScrollUpButton({ className, ...props }: SelectScrollUpButtonProps): import("react/jsx-runtime").JSX.Element;
+type SelectScrollDownButtonProps = React.ComponentProps<typeof SelectPrimitive.ScrollDownArrow>;
 /**
- * SelectScrollDownButton - Scroll button for navigating down in long lists
- *
- * Appears at the bottom of the dropdown when there are more items below
- * the visible area. Built on Radix UI Select.ScrollDownButton with chevron
- * icon and hover states. Automatically shows/hides based on scroll position.
- *
- * @component
- * @example
- * ```tsx
- * // Automatically included in SelectContent
- * <SelectContent>
- *   // ScrollUpButton appears here when needed
- *   <SelectItem value="1">Item 1</SelectItem>
- *   // ... many items ...
- *   <SelectItem value="100">Item 100</SelectItem>
- *   // ScrollDownButton appears here when needed
- * </SelectContent>
- * ```
- *
- * @example
- * ```tsx
- * // Custom scroll button using asChild
- * <SelectScrollDownButton asChild>
- *   <button className="custom-scroll-styles">
- *     <CustomDownIcon />
- *   </button>
- * </SelectScrollDownButton>
- * ```
- *
- * @accessibility
- * - **Auto-Visibility**: Only appears when downward scrolling is possible
- * - **Keyboard Accessible**: Can be activated with Enter/Space
- * - **Focus Management**: Receives focus during keyboard navigation
- * - **Screen Reader**: Announced as scroll control with directional context
- * - **Mouse/Touch**: Responds to click/touch interactions for scrolling
- *
- * @see {@link SelectContent} - Container that manages scroll button visibility
- * @see {@link SelectScrollUpButton} - Counterpart for upward scrolling
- * @since 1.0.0
+ * Scroll indicator button at the bottom of scrollable content.
  */
-declare function SelectScrollDownButton({ className, ...props }: React.ComponentProps<typeof SelectPrimitive.ScrollDownButton>): import("react/jsx-runtime").JSX.Element;
-export { Select, SelectContent, SelectGroup, SelectItem, SelectLabel, SelectScrollDownButton, SelectScrollUpButton, SelectSeparator, SelectTrigger, SelectValue, };
+declare function SelectScrollDownButton({ className, ...props }: SelectScrollDownButtonProps): import("react/jsx-runtime").JSX.Element;
+export { Select, SelectContent, SelectGroup, SelectItem, SelectLabel, SelectScrollDownButton, SelectScrollUpButton, SelectSeparator, SelectTrigger, SelectValue, type SelectProps, type SelectContentProps, type SelectGroupProps, type SelectItemProps, type SelectLabelProps, type SelectScrollDownButtonProps, type SelectScrollUpButtonProps, type SelectSeparatorProps, type SelectTriggerProps, type SelectValueProps, };
 //# sourceMappingURL=select.d.ts.map