import type { JSX } from "react";
import type { BaseSchema } from "valibot";
import { type ValidationProps } from "../../../hook/useInputValidation";
/**
 * Props for the {@link Select} component.
 *
 * @remarks
 * Extends standard HTML select attributes and adds validation-specific properties.
 */
export type SelectProps<Schema extends BaseSchema<any, any, any>> = JSX.IntrinsicElements["select"] & ValidationProps<Schema>;
/**
 * A styled select component with built-in validation support.
 *
 * @remarks
 * This component integrates with `useInputValidation` to handle real-time validation
 * and error reporting. It shares styling with the {@link Input} component for consistency.
 *
 * @param props - The component props.
 * @returns The rendered select element.
 *
 * @example
 * ```tsx
 * import { enum_ } from 'valibot';
 * import { Select, Option } from './select';
 *
 * enum Role { Admin = 'admin', User = 'user' }
 * const roleSchema = enum_(Role);
 *
 * function RoleSelect() {
 *   return (
 *     <Select name="role" validate={roleSchema}>
 *       <Option value="admin">Admin</Option>
 *       <Option value="user">User</Option>
 *     </Select>
 *   );
 * }
 * ```
 */
export declare function Select<Schema extends BaseSchema<any, any, any>>({ className, validate, onValidationError, onChange, onBlur, children, ...props }: SelectProps<Schema>): JSX.Element;
/**
 * Props for the {@link Option} component.
 */
export type OptionProps = JSX.IntrinsicElements["option"];
/**
 * A styled option component for use within {@link Select}.
 *
 * @param props - Standard HTML option attributes.
 * @returns The rendered option element.
 *
 * @example
 * ```tsx
 * <Option value="1">Option 1</Option>
 * ```
 */
export declare let Option: ({ className, children, ...props }: OptionProps) => JSX.Element;
/**
 * Props for the {@link Optgroup} component.
 */
export type OptgroupProps = JSX.IntrinsicElements["optgroup"];
/**
 * A styled optgroup component for grouping options within {@link Select}.
 *
 * @param props - Standard HTML optgroup attributes.
 * @returns The rendered optgroup element.
 *
 * @example
 * ```tsx
 * <Select name="food">
 *   <Optgroup label="Fruits">
 *     <Option value="apple">Apple</Option>
 *     <Option value="banana">Banana</Option>
 *   </Optgroup>
 *   <Optgroup label="Vegetables">
 *     <Option value="carrot">Carrot</Option>
 *   </Optgroup>
 * </Select>
 * ```
 */
export declare let Optgroup: ({ className, children, ...props }: OptgroupProps) => JSX.Element;