import { type GroupBase, type Props } from "react-select";
import React from "react";
/**
 * Exceptional case for this file:
 * We use postcss-url to inline and base64 our image assets.
 * But the library can only see as far as css files.
 * When javascript gets in the way (react-select uses a package called `emotion` for styles), postcss-url cannot
 * bundle the svg assets used here, and we end up with some broken style.
 */
import "./Select.scss";
import { type OptionMinimal } from "./Select.types";
type FormFieldWidth = "sm" | "md" | "lg" | "xl" | "full";
export interface SelectProps<Option extends OptionMinimal = OptionMinimal, IsMulti extends boolean = any, Group extends GroupBase<Option> = GroupBase<Option>> extends Props<Option, IsMulti, Group> {
    /**
     * Whether to show the component in error state.
     */
    isError?: boolean;
    /**
     * The maximum width the component will take.
     */
    width?: FormFieldWidth;
    /**
     * REASON: this could be a ticket to fix later on, but react-select has some tricky types to navigate
     * imo there's little to no value spending time on fixing it properly since it already works.
     *
     * This change is protected by policy: https://app.glassfrog.com/organizations/13950/orgnav/policies/12870328
     */
    value?: any;
    /**
     * The internal processing in this component is causing issues, but we cannot
     * just remove it. This prop allows us to use the component in a fully controlled
     * way, without any processing of the value.
     */
    skipValueProcessing?: boolean;
    /**
     * Enable the user to create new options by typing and pressing Enter.
     * When enabled, the select becomes "creatable" - if no matching options are found,
     * the user can add the typed value as a new option.
     */
    isCreatable?: boolean;
    /**
     * Callback fired when a new option is created. Only applies when `isCreatable` is true.
     * @param inputValue - The text input that the user typed to create the new option
     */
    onCreateOption?: (inputValue: string) => void;
    /**
     * Formats the label shown to users when they can create a new option.
     * Only applies when `isCreatable` is true.
     * Use this for translations or custom messaging.
     * @param inputValue - The text the user has typed
     * @returns The label to display (e.g., 'Create "inputValue"' or t('select.create', { inputValue }))
     * @example
     * // With translations
     * formatCreateLabel={(value) => t('select.create', { value })}
     * @example
     * // Custom text
     * formatCreateLabel={(value) => `Add "${value}" as new option`}
     */
    formatCreateLabel?: (inputValue: string) => string;
}
/**
 * A searchable select component powered by `react-select`, styled to match Luscii's design.
 *
 * This component supports search/filtering within the dropdown, making it ideal for long or
 * dynamic option lists where the user would benefit from typing to find their option
 * (e.g., programs, protocols, groups, patient lists).
 *
 * When to use:
 * - Use `Select` when the user would benefit from typing to search/filter options.
 * - For short, well-known lists where the user can scan and pick at a glance (e.g., status,
 *   action type), prefer the native {@link LabeledSelect} instead — it's simpler, lighter,
 *   and works with `react-hook-form` `register()`.
 *
 * react-hook-form integration:
 * - This component does NOT render a native `<select>` or `<input>`, so it is NOT compatible
 *   with `react-hook-form` `register()`.
 * - You MUST use `react-hook-form` `Controller` to integrate this component in forms.
 *
 * @example
 * // With react-hook-form Controller
 * <Controller
 *   name="program"
 *   control={control}
 *   render={({ field }) => (
 *     <Select
 *       options={programOptions}
 *       value={field.value}
 *       onChange={field.onChange}
 *     />
 *   )}
 * />
 *
 * Additional notes:
 * - Returns the `value` property from the selected option, instead of returning the entire option.
 * - Pay attention when using grouped options: the value of options across all groups must be unique.
 *   If you have an option with value "chocolate" in both "flavor" and "dip" groups, you
 *   get unforeseen errors. This is a react-select limitation, not ours.
 * - Pay attention when using defaultValue: this still requires the complete Option (not just the value).
 *
 * @see {@link LabeledSelect} for a native select with label/error wiring (short lists, `register()` compatible).
 * @see {@link StyledSelect} for a bare native select without form wiring.
 */
export declare const Select: React.ForwardRefExoticComponent<SelectProps<OptionMinimal, boolean, GroupBase<OptionMinimal>> & React.RefAttributes<unknown>>;
export {};