@geckoui/geckoui 1.6.4 → 2.0.0

package/dist/index.d.ts

@@ -1,11 +1,8 @@
 import * as react from 'react';
-import react__default, { RefObject, InputHTMLAttributes, FC, ReactNode, JSX, ForwardedRef, LabelHTMLAttributes, PropsWithChildren, ButtonHTMLAttributes, DetailedHTMLProps, ReactElement, RefCallback, Dispatch, SetStateAction, HtmlHTMLAttributes, ChangeEvent, HTMLAttributes, SVGProps } from 'react';
+import react__default, { RefObject, InputHTMLAttributes, FC, ReactNode, JSX, ForwardedRef, LabelHTMLAttributes, PropsWithChildren, ButtonHTMLAttributes, TextareaHTMLAttributes, HTMLAttributes, DetailedHTMLProps, ReactElement, RefCallback, Dispatch, SetStateAction, HtmlHTMLAttributes, ChangeEvent, AnchorHTMLAttributes, CSSProperties, SVGProps } from 'react';
 import { ControllerProps, Control, FieldValues, ControllerRenderProps, ControllerFieldState, UseFormStateReturn } from 'react-hook-form';
 import { Placement, Strategy, useFloating } from '@floating-ui/react';
-import { TextareaAutosizeProps } from 'react-textarea-autosize';
 import * as react_jsx_runtime from 'react/jsx-runtime';
-import { ToasterProps } from 'sonner';
-export { toast } from 'sonner';
 
 /**
  * Reuseable hook to detect clicks outside of a ref element that is passed as an argument
@@ -70,6 +67,13 @@ interface UseFilePickerOptions {
      * Default: *
      * */
     accept?: string;
+    /** Nothing can be picked or dropped.(Default: false) */
+    disabled?: boolean;
+    /**
+     * Whether more than one file may be held. `false` keeps one, whether it was browsed to
+     * or dropped in.(Default: true)
+     * */
+    multiple?: boolean;
     /**
      * Function to transform files before returning them
      * */
@@ -83,8 +87,10 @@ interface UseFilePickerOptions {
      * */
     keepOldFiles?: boolean;
     /**
-     * Whether to remove duplicated files if `keepOldFiles` is true
-     * If true, the file picker will remove duplicated files
+     * Drop a file that is already held, or that arrived twice in the same batch — a folder
+     * and a subfolder that both contain it, say.
+     *
+     * Compared by size first, then by sampling the start, middle and end of the file.
      *
      * Default: false
      * */
@@ -236,6 +242,17 @@ declare const usePreventDefault: () => {
  * */
 declare const useEscListener: (callback?: () => void) => void;
 
+/**
+ * Stops the page behind an overlay from scrolling, without the sideways jump that
+ * hiding the scrollbar normally causes.
+ *
+ * @example
+ * ```tsx
+ * useScrollLock(open);
+ * ```
+ * */
+declare const useScrollLock: (enabled: boolean) => void;
+
 interface RHFBaseProps {
     /**
      * Name of the input field.(required)
@@ -260,45 +277,36 @@ interface RHFRenderArgs<T extends FieldValues> {
 
 interface CheckboxProps extends Omit<InputHTMLAttributes<HTMLInputElement>, "type"> {
     /**
-     * If true, the checkbox will be checked with a IndeterminateIcon.
+     * If true, the checkbox shows the IndeterminateIcon instead of the check icon.
      * */
-    partial?: boolean;
+    indeterminate?: boolean;
 }
 
 /**
- * A customizable checkbox component with support for indeterminate state.
+ * A customizable checkbox component with support for the indeterminate state.
  *
- * Renders a checkbox with custom styling and icons. By default, displays a check icon
- * when checked. Use the `partial` prop to display an indeterminate icon, useful for
- * "select all" scenarios where only some items are selected.
+ * `indeterminate` mirrors the native DOM property: it is purely visual and independent
+ * of `checked`, so a "select all" box with only some rows selected stays unchecked while
+ * showing the dash. Clicking it still reports `checked` as usual.
  *
  * @example
  * ```tsx
  * // Basic usage
  * const [checked, setChecked] = useState(false);
- * <Checkbox
- *   checked={checked}
- *   onChange={(e) => setChecked(e.target.checked)}
- * />
+ * <Checkbox checked={checked} onChange={(e) => setChecked(e.target.checked)} />
  *
- * // Indeterminate state
+ * // Select all: unchecked while only some rows are selected
  * <Checkbox
- *   checked={someSelected}
- *   partial={someSelected && !allSelected}
+ *   checked={allSelected}
+ *   indeterminate={someSelected && !allSelected}
  *   onChange={handleSelectAll}
  * />
  *
  * // With label
  * <label className="flex items-center gap-2">
- *   <Checkbox
- *     checked={agreed}
- *     onChange={(e) => setAgreed(e.target.checked)}
- *   />
+ *   <Checkbox checked={agreed} onChange={(e) => setAgreed(e.target.checked)} />
  *   <span>I agree to the terms</span>
  * </label>
- *
- * // Disabled state
- * <Checkbox checked disabled />
  * ```
  */
 declare const Checkbox: react.ForwardRefExoticComponent<CheckboxProps & react.RefAttributes<HTMLInputElement>>;
@@ -309,10 +317,14 @@ interface CounterInputSizeMap {
     lg: unknown;
 }
 interface CounterInputProps extends Omit<InputHTMLAttributes<HTMLInputElement>, "size" | "onChange"> {
-    /** Current numeric value */
-    value: number;
-    /** Callback when value changes */
-    onChange: (value: number) => void;
+    /**
+     * Current value, held as a string so a half-typed value like "2." is not
+     * collapsed to "2" while the user is still typing. Convert with `Number(value)`
+     * when you need a number.
+     * */
+    value: string;
+    /** Callback when the value changes. Receives the sanitised string. */
+    onChange: (value: string) => void;
     /** Minimum allowed value */
     min?: number;
     /** Maximum allowed value */
@@ -326,20 +338,37 @@ interface CounterInputProps extends Omit<InputHTMLAttributes<HTMLInputElement>,
     /** Read-only mode - buttons and input are non-interactive */
     readOnly?: boolean;
     /** Allow typing in input field (default: false) */
-    editable?: boolean;
+    allowTyping?: boolean;
     /** Class name for the input element */
     inputClassName?: string;
     /** Class name for the buttons */
     buttonClassName?: string;
+    /**
+     * Drop leading zeros and normalise the whole part (default: true)
+     * */
+    strict?: boolean;
+    /** Reject a leading minus sign (default: false) */
+    positiveOnly?: boolean;
+    /** Digits kept after the decimal point. `0` makes the field integer only. */
+    maxFractionDigits?: number;
+    /** Digits kept before the decimal point */
+    maxWholeDigitPlaces?: number;
 }
 
 /**
  * A numeric input component with increment/decrement buttons.
  *
+ * The value is a string, not a number, so a half-typed value like "2." survives
+ * until the field is left. Converting on every keystroke would collapse it to
+ * "2" and delete the decimal point as the user types.
+ *
  * @example
  * ```tsx
- * const [count, setCount] = useState(0);
+ * const [count, setCount] = useState("0");
  * <CounterInput value={count} onChange={setCount} min={0} max={10} />
+ *
+ * // Read it back as a number when you need one
+ * const quantity = Number(count || 0);
  * ```
  */
 declare const CounterInput: react.ForwardRefExoticComponent<CounterInputProps & react.RefAttributes<HTMLInputElement>>;
@@ -358,7 +387,11 @@ interface BaseDateInputProps {
     readOnly?: boolean;
     prefix?: FC | ReactNode;
     suffix?: FC | ReactNode;
-    hasError?: boolean;
+    /**
+     * Marks the field invalid, to a screen reader and in its colours. The field also marks
+     * itself when the date typed cannot exist, such as the 31st of February.
+     * */
+    "aria-invalid"?: boolean | "true" | "false";
     className?: string;
     format?: DateFormat$2;
     separator?: string;
@@ -377,6 +410,12 @@ interface DateInputProps extends Omit<BaseDateInputProps, "hasFocus" | "renderCa
      * @default false
      */
     hideCalendar?: boolean;
+    /**
+     * Always render six weeks in the calendar, so the popup keeps the same height as you
+     * page between months. A month otherwise takes the 4 to 6 weeks it needs.
+     * @default false
+     */
+    fixedWeeks?: boolean;
     /**
      * Additional CSS class name for the wrapper div that contains input field and calendar
      */
@@ -425,7 +464,7 @@ interface DateInputProps extends Omit<BaseDateInputProps, "hasFocus" | "renderCa
  * <DateInput
  *   value={birthDate}
  *   onChange={handleDateChange}
- *   hasError={error}
+ *   aria-invalid={error}
  *   placeholder="Enter your birth date"
  *   format="DD/MM/YYYY"
  *   separator="/"
@@ -468,7 +507,7 @@ interface DateInputProps extends Omit<BaseDateInputProps, "hasFocus" | "renderCa
  *     value={endDate}
  *     onChange={setEndDate}
  *     placeholder="End date"
- *     hasError={endDate < startDate}
+ *     aria-invalid={endDate < startDate}
  *     hideCalendarIcon
  *   />
  * </div>
@@ -540,6 +579,13 @@ interface BaseCalendarProps {
      * Use this to customize the appearance of individual day cells
      * */
     renderDayCell?: (props: DayCellRenderProps) => ReactNode;
+    /**
+     * Always render six weeks, so the calendar keeps the same height as you page
+     * between months. A month otherwise takes the 4 to 6 weeks it needs, which means
+     * the container resizes as you navigate.
+     * @default false
+     * */
+    fixedWeeks?: boolean;
 }
 interface CalendarSingleModeProps extends BaseCalendarProps {
     /**
@@ -610,7 +656,11 @@ interface BaseDateRangeInputProps extends Omit<React.HTMLAttributes<HTMLDivEleme
     readOnly?: boolean;
     prefix?: FC | ReactNode;
     suffix?: FC | ReactNode;
-    hasError?: boolean;
+    /**
+     * Marks the field invalid, to a screen reader and in its colours. The field also marks
+     * itself when the date typed cannot exist, such as the 31st of February.
+     * */
+    "aria-invalid"?: boolean | "true" | "false";
     className?: string;
     format?: DateFormat;
     separator?: string;
@@ -623,10 +673,14 @@ interface BaseDateRangeInputProps extends Omit<React.HTMLAttributes<HTMLDivEleme
     hasFocus?: boolean;
 }
 
-declare const BaseDateRangeInput: FC<BaseDateRangeInputProps>;
-
 interface DateRangeInputProps extends Omit<BaseDateRangeInputProps, "hasFocus" | "renderCalendarIcon"> {
     hideCalendar?: boolean;
+    /**
+     * Always render six weeks in the calendar, so the popup keeps the same height as you
+     * page between months. A month otherwise takes the 4 to 6 weeks it needs.
+     * @default false
+     */
+    fixedWeeks?: boolean;
     wrapperClassName?: string;
     calendarClassName?: string;
     calendarPlacement?: Placement;
@@ -956,7 +1010,7 @@ interface LoadingButtonProps extends ButtonProps {
  */
 declare const LoadingButton: FC<LoadingButtonProps>;
 
-interface RHFCheckboxProps extends RHFBaseProps, Omit<CheckboxProps, "name" | "value" | "onChange" | "partial"> {
+interface RHFCheckboxProps extends RHFBaseProps, Omit<CheckboxProps, "name" | "value" | "onChange" | "onBlur" | "indeterminate"> {
     /**
      * Label that will be displayed next to the checkbox
      * */
@@ -1000,19 +1054,24 @@ interface RHFCheckboxProps extends RHFBaseProps, Omit<CheckboxProps, "name" | "v
      *    <RHFCheckbox
      *      name="checkbox"
      *      value="js"
-     *      partial={({ field }) => field.value.length !== 2}
+     *      indeterminate={({ field }) => field.value.length !== 2}
      *      label="JavaScript"
      *    />
      *    <RHFCheckbox
      *      name="checkbox"
      *      value="ts"
-     *      partial={({ field }) => field.value.length !== 2}
+     *      indeterminate={({ field }) => field.value.length !== 2}
      *      label="TypeScript"
      *    />
      *  </>
      * ```
      * */
-    partial?: boolean | ((args: RHFRenderArgs<Record<string, unknown>>) => boolean);
+    indeterminate?: boolean | ((args: RHFRenderArgs<Record<string, unknown>>) => boolean);
+    /**
+     * Callback fired when the field is blurred
+     * Called alongside React Hook Form's onBlur
+     * */
+    onBlur?: () => void;
 }
 
 /**
@@ -1055,7 +1114,7 @@ interface RHFCheckboxProps extends RHFBaseProps, Omit<CheckboxProps, "name" | "v
  * <RHFCheckbox
  *   name="languages"
  *   value="js"
- *   partial={({ field }) => field.value.length !== 2}
+ *   indeterminate={({ field }) => field.value.length !== 2}
  *   label="JavaScript"
  * />
  *
@@ -1071,7 +1130,7 @@ interface RHFCheckboxProps extends RHFBaseProps, Omit<CheckboxProps, "name" | "v
 declare const RHFCheckbox: FC<RHFCheckboxProps>;
 
 interface RHFCounterInputProps extends RHFBaseProps, Omit<CounterInputProps, "name" | "value" | "onChange"> {
-    onChange?: (value: number) => void;
+    onChange?: (value: string) => void;
 }
 
 /**
@@ -1445,46 +1504,35 @@ interface RHFCurrencyInputProps extends Omit<RHFNumberInputProps, "strict"> {
  */
 declare const RHFCurrencyInput: FC<RHFCurrencyInputProps>;
 
-interface TextareaProps extends TextareaAutosizeProps {
+interface TextareaProps extends TextareaHTMLAttributes<HTMLTextAreaElement> {
     /**
-     * Enable auto resizing of the textarea
+     * Grow to fit what is typed, between `rows` and `maxRows`.
      * @default false
      * */
     autoResize?: boolean;
+    /** The height it starts at, and the shortest it gets while growing. @default 2 */
+    rows?: number;
+    /** How tall it may grow. Past it the textarea scrolls. `autoResize` only. */
+    maxRows?: number;
 }
 
 /**
- * A textarea component with optional auto-resizing functionality.
+ * A textarea, optionally growing to fit what is typed.
  *
- * Built on top of react-textarea-autosize, this component can automatically
- * adjust its height based on content. Control the minimum and maximum number
- * of rows displayed.
+ * Without `autoResize` it is a plain textarea: `rows` sets the height, CSS can change it,
+ * and the user can drag it.
  *
  * @example
  * ```tsx
- * // Basic usage
  * <Textarea placeholder="Type something..." />
+ * <Textarea rows={5} placeholder="Five rows tall" />
+ * ```
  *
- * // Auto-resizing textarea
- * <Textarea autoResize placeholder="Type something..." />
- *
- * // With row constraints
- * <Textarea rows={3} placeholder="Minimum 3 rows" />
- *
- * // Auto-resize with max rows
- * <Textarea
- *   autoResize
- *   rows={2}
- *   maxRows={10}
- *   placeholder="Grows from 2 to 10 rows"
- * />
+ * @example
+ * Growing from two rows to ten, then scrolling:
  *
- * // Controlled component
- * <Textarea
- *   value={text}
- *   onChange={(e) => setText(e.target.value)}
- *   placeholder="Enter description"
- * />
+ * ```tsx
+ * <Textarea autoResize rows={2} maxRows={10} placeholder="Say something" />
  * ```
  */
 declare const Textarea: react.ForwardRefExoticComponent<TextareaProps & react.RefAttributes<HTMLTextAreaElement>>;
@@ -1568,7 +1616,7 @@ interface SwitchProps extends Omit<React.InputHTMLAttributes<HTMLInputElement>,
 
 declare const Switch: react.ForwardRefExoticComponent<SwitchProps & react.RefAttributes<HTMLInputElement>>;
 
-interface RHFSwitchProps extends RHFBaseProps, Omit<SwitchProps, "name" | "value"> {
+interface RHFSwitchProps extends RHFBaseProps, Omit<SwitchProps, "name" | "value" | "onBlur"> {
     /**
      * Value to set in the form data when the switch is toggled
      * If value is not provided, value will be toggled between true and false
@@ -1583,6 +1631,11 @@ interface RHFSwitchProps extends RHFBaseProps, Omit<SwitchProps, "name" | "value
      * Callback fired when the value changes
      * */
     onChange?: (value: unknown) => void;
+    /**
+     * Callback fired when the field is blurred
+     * Called alongside React Hook Form's onBlur
+     * */
+    onBlur?: () => void;
 }
 
 /**
@@ -1656,7 +1709,7 @@ type RadioProps = Omit<InputHTMLAttributes<HTMLInputElement>, "type">;
  */
 declare const Radio: react.ForwardRefExoticComponent<RadioProps & react.RefAttributes<HTMLInputElement>>;
 
-interface RHFRadioProps extends RHFBaseProps, Omit<RadioProps, "name" | "value" | "onChange"> {
+interface RHFRadioProps extends RHFBaseProps, Omit<RadioProps, "name" | "value" | "onChange" | "onBlur"> {
     /**
      * Label to display next to the radio button
      * */
@@ -1675,6 +1728,11 @@ interface RHFRadioProps extends RHFBaseProps, Omit<RadioProps, "name" | "value"
      * Callback fired when the value changes
      * */
     onChange?: (value: unknown) => void;
+    /**
+     * Callback fired when the field is blurred
+     * Called alongside React Hook Form's onBlur
+     * */
+    onBlur?: () => void;
 }
 
 /**
@@ -1716,7 +1774,7 @@ interface RHFRadioProps extends RHFBaseProps, Omit<RadioProps, "name" | "value"
  */
 declare const RHFRadio: FC<RHFRadioProps>;
 
-interface RHFDateInputProps extends RHFBaseProps, Omit<DateInputProps, "hasError"> {
+interface RHFDateInputProps extends RHFBaseProps, DateInputProps {
     /**
      * Whether the input is disabled
      */
@@ -1759,712 +1817,1485 @@ interface RHFDateInputProps extends RHFBaseProps, Omit<DateInputProps, "hasError
  */
 declare const RHFDateInput: FC<RHFDateInputProps>;
 
-declare const _default: CalendarOverload;
-
-interface RHFDateRangeInputProps extends RHFBaseProps, Omit<DateRangeInputProps, "hasError" | "value" | "onChange"> {
-    disabled?: boolean;
-    onChange?: (value: DateRange | null) => void;
+interface TimeParts {
+    /** 0 to 23, whatever the format shows. */
+    hour: number;
+    minute: number;
+    second: number;
 }
-
-declare const RHFDateRangeInput: FC<RHFDateRangeInputProps>;
-
-type FileWithPreview = File & {
-    preview?: string;
-};
-interface RHFFileInputProps extends RHFBaseProps, Omit<InputHTMLAttributes<HTMLInputElement>, "multiple" | "children" | "name" | "type" | "onChange"> {
+type TimeFormat = "HH:mm" | "hh:mm A" | "HH:mm:ss" | "hh:mm:ss A";
+interface TimeInputProps {
     /**
-     * Class name actual input element.
-     * `className` is used for the container div.
-     * So if you want to style the input element, eg. placeholder, or even the input itself, use this prop.
+     * The time, always as 24 hour `HH:mm`, or `HH:mm:ss` when the format asks for seconds.
+     * What is on screen follows `format`; this does not.
      * */
-    inputClassName?: string;
+    value?: string | null;
     /**
-     * Callback fired when the value changes
-     * This is the actual value of the file input not the event object
+     * Called with the new time, or `null` while it is incomplete or out of bounds.
      * */
-    onChange?: (data?: FileWithPreview | FileWithPreview[] | null) => void;
+    onChange?: (value: string | null) => void;
     /**
-     * If true, the user can select multiple files(Default: false)
+     * Called once the last segment is filled, for moving focus on.
      * */
-    multiple?: boolean;
+    onSubmit?: () => void;
+    /**
+     * How the time is shown. 24 or 12 hour, with or without seconds.(Default: 'HH:mm')
+     * */
+    format?: TimeFormat;
+    /**
+     * Which times cannot be chosen. Called with 24 hour numbers, whatever the format shows,
+     * and with the segments that are not filled in yet standing at zero.
+     *
+     * @example
+     * ```tsx
+     * disabledTime={({ hour }) => hour < 9 || hour >= 17}
+     * disabledTime={({ hour, minute }) => hour === 12 && minute < 30}
+     * ```
+     * */
+    disabledTime?: (time: TimeParts) => boolean;
+    /**
+     * Minutes between the entries in the minute column. Every minute by default, the way the
+     * platform's own picker lists them. Raise it for booking slots.(Default: 1)
+     * */
+    step?: number;
+    disabled?: boolean;
+    readOnly?: boolean;
     /**
-     * Render custom component instead of the default input element
-     * You also have access to the Controller renderProps object
-     * So that you can access the field, fieldState, and formState objects and use accordingly
+     * Marks the field invalid, to a screen reader and in its colours.
      *
-     * If you pass render, the input element will be hidden using the `hidden` class
+     * The standard attribute rather than a prop of the library's own, so it works the same
+     * here as on a native input.
+     * */
+    "aria-invalid"?: boolean | "true" | "false";
+    prefix?: FC | ReactNode;
+    suffix?: FC | ReactNode;
+    placeholder?: string;
+    placeholderClassName?: string;
+    hideClearIcon?: boolean;
+    hideClockIcon?: boolean;
+    className?: string;
+    wrapperClassName?: string;
+    listClassName?: string;
+    /**
+     * Where the list opens, relative to the field.(Default: 'bottom-start')
      * */
-    render?: ReactNode | ControllerProps["render"];
+    listPlacement?: Placement;
+    floatingStrategy?: Strategy;
 }
 
 /**
- * File input component that integrates with react-hook-form.
+ * A time field that reads like the platform's own, with a list of times behind it.
  *
- * You can pass `render` to render custom component instead of the default input element
- *
- * You have access to the Controller renderProps object in the `render` function
- * So that you can access the field, fieldState, and formState objects and use them accordingly
+ * `value` is always 24 hour `HH:mm`, or `HH:mm:ss` when the format asks for seconds, so it
+ * sorts and compares without being parsed. `format` decides only what is on screen.
  *
  * @example
  * ```tsx
- * // Basic usage - single file selection
- * // Automatically creates a preview URL for the selected file
- * <RHFFileInput name="file" />
- *
- * // Multiple file selection
- * <RHFFileInput name="files" multiple />
+ * <TimeInput value={time} onChange={setTime} />
+ * <TimeInput value={time} onChange={setTime} format="hh:mm A" />
+ * <TimeInput value={time} onChange={setTime} step={30} min="09:00" max="17:00" />
+ * ```
+ */
+declare const TimeInput: FC<TimeInputProps>;
+
+interface RHFTimeInputProps extends RHFBaseProps, TimeInputProps {
+    /**
+     * Whether the input is disabled
+     */
+    disabled?: boolean;
+    /**
+     * Callback function when the time changes (in addition to the form field update)
+     */
+    onChange?: (time: string | null) => void;
+}
+
+/**
+ * React Hook Form wrapper for the TimeInput component.
  *
- * // Restrict file types
- * <RHFFileInput name="avatar" accept="image/*" />
+ * The field holds the 24 hour value, whatever the display format is, so a resolver can
+ * compare two times without parsing them.
  *
- * // With custom render
- * <RHFFileInput
- *   name="file"
- *   accept="image/*"
- *   render={({ field: { value } }) => {
- *      return (
- *        <div className="flex rounded overflow-hidden items-center justify-center cursor-pointer border-2 p-4 w-full border-dotted border-gray-300 h-[200px]">
- *          {value ? (
- *            <img
- *              className="inline-block object-contain w-full h-full"
- *              src={value.preview}
- *              alt="Preview"
- *            />
- *          ) : (
- *            <span>Upload File</span>
- *          )}
- *        </div>
- *      );
- *   }}
- * />
+ * @example
+ * ```tsx
+ * <RHFTimeInput name="startsAt" />
+ * <RHFTimeInput name="startsAt" format="hh:mm A" step={15} min="09:00" max="17:00" />
  * ```
  */
-declare const RHFFileInput: FC<RHFFileInputProps>;
+declare const RHFTimeInput: FC<RHFTimeInputProps>;
 
-interface OTPInputProps {
+/** Extensible size map - To allow module augmentation */
+interface SliderSizeMap {
+    sm: unknown;
+    md: unknown;
+    lg: unknown;
+}
+/** Extensible color map - To allow module augmentation */
+interface SliderColorMap {
+    default: unknown;
+    primary: unknown;
+    success: unknown;
+    error: unknown;
+    warning: unknown;
+    info: unknown;
+}
+interface SliderMark {
+    /** Where on the track it sits. Outside `min` and `max` it is dropped. */
+    value: number;
+    /** What it says. Leave it out for a tick with no text. */
+    label?: ReactNode;
+}
+/** What the bubble is told about the thumb it belongs to. */
+interface SliderLabel {
+    value: number;
+    /** 0 for the only thumb, and for the lower of a range. */
+    index: number;
+}
+/** Everything a thumb knows about itself, for drawing one yourself. */
+interface SliderThumb extends SliderLabel {
+    /** How far along the track it sits, 0 to 100. */
+    percent: number;
+    /** Whether it is being dragged right now. */
+    dragging: boolean;
+    /** Whether the keyboard is on it. */
+    focused: boolean;
+}
+interface SliderSharedProps {
+    /** Bottom of the range.(Default: 0) */
+    min?: number;
+    /** Top of the range.(Default: 100) */
+    max?: number;
+    /** How far one move goes.(Default: 1) */
+    step?: number;
+    /** Ticks along the track, with a label each if you want one. */
+    marks?: SliderMark[];
     /**
-     * Value of the OTP input
+     * A bubble above the thumb while it is being dragged or has the focus. A function is
+     * given the value it belongs to.
      * */
-    value: string;
+    label?: ReactNode | ((thumb: SliderLabel) => ReactNode);
+    /** What the filled part means. Drives the accent colour.(Default: 'primary') */
+    color?: keyof SliderColorMap;
+    /** Track and thumb size.(Default: 'md') */
+    size?: keyof SliderSizeMap;
     /**
-     * Function to call when the OTP input value changes
+     * Draw the thumb yourself. Everything it knows is handed over and nothing of its own is
+     * rendered, so a labelled handle or a grip needs no working around the component.
+     *
+     * It is still placed on the track, still takes the drag and the keyboard, and still
+     * carries its own `role` and `aria` — only what it looks like is yours.
+     *
+     * @example
+     * ```tsx
+     * renderThumb={({ value, dragging }) => (
+     *   <span className={dragging ? "handle handle--held" : "handle"}>{value}</span>
+     * )}
+     * ```
      * */
-    onChange: (value: string) => void;
+    renderThumb?: (thumb: SliderThumb) => ReactNode;
+    disabled?: boolean;
+    className?: string;
+}
+interface SliderProps extends SliderSharedProps {
+    /** Where the thumb sits. */
+    value: number;
+    /** Called on every move, so the slider stays controlled as it is dragged. */
+    onChange: (value: number) => void;
     /**
-     * Function to call when the OTP input is blurred
+     * Called once, when the drag or key press finishes. Put the expensive work here rather
+     * than in `onChange`, which fires all the way through a drag.
      * */
-    onBlur?: (e: React.FocusEvent<HTMLInputElement>) => void;
+    onChangeEnd?: (value: number) => void;
+    /** Names the thumb for a screen reader. */
+    "aria-label"?: string;
+}
+interface RangeSliderProps extends SliderSharedProps {
+    /** Where the two thumbs sit, lower first. */
+    value: [number, number];
+    /** Called on every move, so the slider stays controlled as it is dragged. */
+    onChange: (value: [number, number]) => void;
+    /** Called once, when the drag or key press finishes. */
+    onChangeEnd?: (value: [number, number]) => void;
+    /**
+     * How close the two thumbs may get. They stop rather than swap, so the lower one stays
+     * the lower one.(Default: 0)
+     * */
+    minGap?: number;
+    /** Names each thumb for a screen reader.(Default: ['Minimum', 'Maximum']) */
+    thumbLabels?: [string, string];
+}
+
+/**
+ * Pick a number by dragging.
+ *
+ * `onChange` fires all the way through a drag so the slider stays controlled; put anything
+ * expensive in `onChangeEnd`, which fires once when it is let go.
+ *
+ * @example
+ * ```tsx
+ * <Slider value={volume} onChange={setVolume} />
+ * <Slider value={volume} onChange={setVolume} onChangeEnd={save} step={5} />
+ * <Slider value={volume} onChange={setVolume} label={({ value }) => `${value}%`} />
+ * <Slider
+ *   value={volume}
+ *   onChange={setVolume}
+ *   marks={[{ value: 0, label: "Off" }, { value: 100, label: "Max" }]}
+ * />
+ * ```
+ */
+declare const Slider: FC<SliderProps>;
+
+/**
+ * Pick a span by dragging either end.
+ *
+ * The thumbs stop at each other rather than swapping, so the lower one stays the lower one
+ * and `value` is always in order.
+ *
+ * @example
+ * ```tsx
+ * <RangeSlider value={price} onChange={setPrice} />
+ * <RangeSlider value={price} onChange={setPrice} minGap={10} onChangeEnd={search} />
+ * <RangeSlider value={price} onChange={setPrice} label={({ value }) => `£${value}`} />
+ * ```
+ */
+declare const RangeSlider: FC<RangeSliderProps>;
+
+interface RHFSliderProps extends RHFBaseProps, Omit<SliderProps, "value" | "onChange"> {
+    /** Where the thumb starts when the form has nothing for it.(Default: `min`) */
+    defaultValue?: number;
+    /** Called alongside the form update, on every move. */
+    onChange?: (value: number) => void;
+}
+interface RHFRangeSliderProps extends RHFBaseProps, Omit<RangeSliderProps, "value" | "onChange"> {
+    /** Where the thumbs start when the form has nothing for them.(Default: `[min, max]`) */
+    defaultValue?: [number, number];
+    /** Called alongside the form update, on every move. */
+    onChange?: (value: [number, number]) => void;
+}
+
+/**
+ * React Hook Form wrapper for the Slider component.
+ *
+ * The field holds a number. `onChange` fires all the way through a drag, so put anything
+ * expensive in `onChangeEnd`.
+ *
+ * @example
+ * ```tsx
+ * <RHFSlider name="volume" />
+ * <RHFSlider name="volume" min={0} max={11} step={1} label={({ value }) => value} />
+ * ```
+ */
+declare const RHFSlider: FC<RHFSliderProps>;
+
+interface TagInputTag {
+    /** The tag itself, as it sits in `value`. */
+    value: string;
+    /** Where it is in `value`. */
+    index: number;
+    /** Takes it out. */
+    remove: () => void;
+}
+interface TagInputProps extends PropsWithChildren {
+    /** The tags, in the order they were added. */
+    value: string[];
+    /** Called with the new list whenever one is added or taken out. */
+    onChange: (value: string[]) => void;
     /**
-     * Function to call when the OTP input completely filled
-     * i.e when the length of the OTP input is equal to the length prop
+     * Called with whatever was turned away, so a paste that drops half its addresses can say
+     * so rather than swallowing them. A tag is turned away when it is a duplicate, when
+     * `max` is reached, or when `validate` says no.
      * */
-    onOTPComplete?: (value: string) => void;
+    onReject?: (tags: string[]) => void;
     /**
-     * If true, only numbers can be entered in the OTP input. (Default: true)
+     * Whether a tag is allowed. A tag it turns down is not added, and stays in the field so
+     * it can be corrected.
      * */
-    numberOnly?: boolean;
+    validate?: (tag: string) => boolean;
     /**
-     * Classname for the wrapper div that contains input fields
+     * Keys that finish a tag, alongside the text they split a paste on.(Default: ['Enter', ','])
      * */
-    className?: string;
+    separators?: string[];
     /**
-     * Classname for the input fields
+     * Take the spelling from the options when what was typed matches one but for its case or
+     * spacing, so `vue` becomes `Vue` and `united  state` becomes `United State`. Anything
+     * that matches no option is added exactly as typed.(Default: true)
      * */
-    inputClassName?: string;
+    preferOption?: boolean;
     /**
-     * Length of the OTP input(Default: 6)
-     * Inputs will be created based on this length
+     * How many tags there may be. Once it is reached the list stays away, anything further
+     * goes to `onReject`, and the field carries `data-full` for the styles to key off.
      * */
-    length?: number;
+    max?: number;
+    /** Let the same tag be added twice.(Default: false) */
+    allowDuplicates?: boolean;
+    /** Finish the tag being typed when the field loses focus.(Default: true) */
+    addOnBlur?: boolean;
+    /** Draw each tag yourself. */
+    renderTag?: (tag: TagInputTag) => ReactNode;
+    placeholder?: string;
+    /** Extra class for the placeholder text. */
+    placeholderClassName?: string;
+    disabled?: boolean;
+    readOnly?: boolean;
     /**
-     * Aspect ratio of the OTP input (Default: 0.94)
+     * Marks the field invalid, to a screen reader and in its colours.
+     *
+     * This is the standard attribute rather than a prop of the library's own, so it works the
+     * same here as on a native input.
      * */
-    aspectRatio?: string | number;
+    "aria-invalid"?: boolean | "true" | "false";
+    prefix?: FC | ReactNode;
+    suffix?: FC | ReactNode;
+    className?: string;
+    wrapperClassName?: string;
+    menuClassName?: string;
+    /** Where the list of options opens.(Default: 'bottom-start') */
+    menuPlacement?: Placement;
+    floatingStrategy?: Strategy;
+}
+interface TagInputOptionProps extends PropsWithChildren {
+    /** What gets added when it is picked. */
+    value: string;
     /**
-     * If true, the OTP input will be disabled
+     * What it is matched against while typing. Falls back to `value` when the children are
+     * not plain text.
      * */
+    label?: string;
+    /** Cannot be picked. */
     disabled?: boolean;
+    className?: string;
 }
 
 /**
- * OTPInput provides a segmented input field for entering one-time passwords or verification codes.
- * Each digit is displayed in a separate box with automatic focus management and keyboard navigation.
- * Supports both numeric-only mode (default) and alphanumeric input.
+ * A field that turns what you type into tags, with a list of the ones you already have to
+ * hand.
  *
- * @example
- * Two-factor authentication:
+ * Options are declared as children, the way they are for `Select`, and filter as you type.
+ * Anything that is not an option can still be typed in, which is what separates this from
+ * a multi `Select`.
  *
+ * @example
  * ```tsx
- * const [verificationCode, setVerificationCode] = useState('');
- *
- * <OTPInput
- *   value={verificationCode}
- *   onChange={setVerificationCode}
- *   length={6}
- *   numberOnly
- *   onOTPComplete={async (code) => {
- *     await verifyTwoFactorCode(code);
- *   }}
- * />
+ * <TagInput value={tags} onChange={setTags} placeholder="Add a tag">
+ *   <TagInputOption value="react">React</TagInputOption>
+ *   <TagInputOption value="vue">Vue</TagInputOption>
+ * </TagInput>
  * ```
  *
  * @example
- * Alphanumeric code with custom styling:
+ * Emails, where a tag has to look like one:
  *
  * ```tsx
- * <OTPInput
- *   value={activationCode}
- *   onChange={setActivationCode}
- *   length={8}
- *   numberOnly={false}
- *   className="gap-2"
- *   inputClassName="border-2 rounded-md"
+ * <TagInput
+ *   value={emails}
+ *   onChange={setEmails}
+ *   validate={(tag) => tag.includes("@")}
+ *   onReject={(tags) => toast.error(`${tags.length} were not addresses`)}
  * />
  * ```
+ */
+declare const TagInput: {
+    ({ value, onChange, onReject, validate, separators, preferOption, max, allowDuplicates, addOnBlur, renderTag, placeholder, placeholderClassName, disabled, readOnly, prefix, suffix, className, wrapperClassName, menuClassName, menuPlacement, floatingStrategy, children, "aria-invalid": invalid }: TagInputProps): react_jsx_runtime.JSX.Element;
+    displayName: string;
+};
+
+/**
+ * One suggestion in a `TagInput`.
+ *
+ * Declared as a child of `TagInput`, the way `SelectOption` is for `Select`. An option
+ * already added drops out of the list, because the chip in the field is where it is now.
  *
  * @example
- * SMS verification with aspect ratio:
+ * ```tsx
+ * <TagInputOption value="react">React</TagInputOption>
+ * ```
+ */
+declare const TagInputOption: {
+    ({ value, disabled, className, children }: TagInputOptionProps): react_jsx_runtime.JSX.Element;
+    displayName: string;
+};
+
+interface TagInputContextValue {
+    /** The option the keyboard is on, by its value. */
+    focused: string | null;
+    setFocused: (value: string | null) => void;
+    /** Adds the option as a tag and puts the focus back in the field. */
+    pick: (tag: string) => void;
+}
+declare const useTagInput: () => TagInputContextValue;
+
+interface RHFTagInputProps extends RHFBaseProps, Omit<TagInputProps, "value" | "onChange"> {
+    /** Called alongside the form update. */
+    onChange?: (value: string[]) => void;
+}
+
+/**
+ * React Hook Form wrapper for the TagInput component.
  *
+ * The field holds a `string[]`. A field the form has nothing for reads as an empty list, so
+ * the input never has to guard against it.
+ *
+ * @example
  * ```tsx
- * <OTPInput
- *   value={smsCode}
- *   onChange={setSmsCode}
- *   length={4}
- *   aspectRatio={1}
- *   onOTPComplete={(code) => submitVerification(code)}
- *   disabled={isVerifying}
- * />
+ * <RHFTagInput name="tags" rules={{ required: "Add at least one tag" }} />
+ * <RHFTagInput name="emails" validate={(tag) => tag.includes("@")} />
  * ```
  */
-declare const OTPInput: react__default.ForwardRefExoticComponent<OTPInputProps & react__default.RefAttributes<HTMLInputElement>>;
+declare const RHFTagInput: FC<RHFTagInputProps>;
 
-interface RHFOTPInputProps extends RHFBaseProps, Omit<OTPInputProps, "value" | "onChange" | "onBlur"> {
+/** Extensible size map - To allow module augmentation */
+interface RatingSizeMap {
+    sm: unknown;
+    md: unknown;
+    lg: unknown;
+}
+/** Extensible color map - To allow module augmentation */
+interface RatingColorMap {
+    gold: unknown;
+    default: unknown;
+    primary: unknown;
+    success: unknown;
+    error: unknown;
+    warning: unknown;
+    info: unknown;
+}
+interface RatingProps extends Omit<HTMLAttributes<HTMLDivElement>, "onChange"> {
     /**
-     * Callback fired when the value changes
-     * Called alongside React Hook Form's onChange with the new code
+     * How many are filled. Any fraction is drawn exactly, whether it can be picked or not, so
+     * an average of 4.3 reads as 4.3.
      * */
-    onChange?: (value: string) => void;
+    value: number;
+    /** Called with the new rating, or `0` when the current one is picked again. */
+    onChange?: (value: number) => void;
+    /** How many icons there are.(Default: 5) */
+    max?: number;
     /**
-     * Callback fired when the input is blurred
-     * Called alongside React Hook Form's onBlur
+     * What a click lands on, as a fraction of one icon: `1` for whole ones, `0.5` for halves.
+     * Only what can be picked, never what is drawn.(Default: 1)
      * */
-    onBlur?: () => void;
+    precision?: number;
+    /**
+     * Whether picking the current rating again sets it back to zero. Without it there is no
+     * way to undo a mis-click with a mouse.(Default: true)
+     * */
+    clearable?: boolean;
+    /** Shown rather than picked. Any fraction is drawn exactly. */
+    readOnly?: boolean;
+    disabled?: boolean;
+    /** The icon. A star when it is left out. */
+    icon?: ReactNode;
+    /** A different icon for the empty part. Falls back to `icon`. */
+    emptyIcon?: ReactNode;
+    /**
+     * What each one is called, for a screen reader.(Default: '1 of 5' and so on)
+     * */
+    getLabel?: (value: number) => string;
+    /** What the whole thing is called. */
+    "aria-label"?: string;
+    /** Ties the radios together. One is made from `name` or generated when left out. */
+    name?: string;
+    /** What colour the filled part is.(Default: 'gold') */
+    color?: keyof RatingColorMap;
+    size?: keyof RatingSizeMap;
+    className?: string;
 }
 
 /**
- * An OTP (One-Time Password) input component integrated with React Hook Form.
+ * A rating, picked or shown.
  *
- * By default, only numeric input is allowed. You can change this behavior
- * by setting the `numberOnly` prop to false to allow alphanumeric input.
+ * Built as a radio group, because a rating is a one of many choice: the arrow keys move
+ * between the values, it is announced as a group, and it posts in a plain form.
  *
  * @example
  * ```tsx
- * // Basic usage - numbers only, default 6 digits
- * <RHFOTPInput name="otp" />
- *
- * // Custom length
- * <RHFOTPInput name="code" length={4} />
+ * <Rating value={rating} onChange={setRating} />
+ * <Rating value={rating} onChange={setRating} precision={0.5} />
+ * <Rating value={4.3} readOnly />
+ * <Rating value={rating} onChange={setRating} icon={<HeartIcon />} color="error" />
+ * ```
+ */
+declare const Rating: {
+    ({ value, onChange, max, precision, clearable, readOnly, disabled, icon, emptyIcon, getLabel, name, color, size, className, "aria-label": ariaLabel, ...rest }: RatingProps): react_jsx_runtime.JSX.Element;
+    displayName: string;
+};
+
+interface RHFRatingProps extends RHFBaseProps, Omit<RatingProps, "value" | "onChange" | "name"> {
+    /** Where it starts when the form has nothing for it.(Default: 0) */
+    defaultValue?: number;
+    /** Called alongside the form update. */
+    onChange?: (value: number) => void;
+}
+
+/**
+ * React Hook Form wrapper for the Rating component.
  *
- * // Allow alphanumeric input
- * <RHFOTPInput
- *   name="verificationCode"
- *   numberOnly={false}
- *   length={8}
- * />
+ * The field holds a number, `0` for nothing picked, so `required` catches an untouched one.
  *
- * // With completion callback
- * <RHFOTPInput
- *   name="otp"
- *   onOTPComplete={(value) => {
- *     console.log('OTP entered:', value);
- *     // Auto-submit or verify OTP
- *   }}
- * />
+ * @example
+ * ```tsx
+ * <RHFRating name="score" rules={{ min: { value: 1, message: "Pick a rating" } }} />
+ * <RHFRating name="score" allowHalf max={10} />
  * ```
  */
-declare const RHFOTPInput: FC<RHFOTPInputProps>;
+declare const RHFRating: FC<RHFRatingProps>;
 
-interface RHFFilePickerRenderProps<T extends HTMLElement = HTMLDivElement> extends UseFilePickerReturn<T>, RHFRenderArgs<Record<string, FilePickerFile[]>> {
+interface Hsva {
+    /** 0 to 360 */
+    h: number;
+    /** 0 to 100 */
+    s: number;
+    /** 0 to 100 */
+    v: number;
+    /** 0 to 1 */
+    a: number;
 }
-type FilePickerOptions = Omit<UseFilePickerOptions, "onStart">;
-interface RHFFilePickerBaseProps<T extends HTMLElement = HTMLDivElement> extends FilePickerOptions {
-    render?: (
-    /** Additional props to be used on the dropzone element */
-    props: RHFFilePickerRenderProps<T>) => ReactNode;
+interface Rgba {
+    r: number;
+    g: number;
+    b: number;
+    a: number;
 }
-interface RHFFilePickerProps<T extends HTMLElement = HTMLDivElement> extends RHFBaseProps, RHFFilePickerBaseProps<T> {
+type ColorFormat = "hex" | "rgb" | "hsl";
+interface ColorPickerProps extends Omit<HTMLAttributes<HTMLDivElement>, "onChange" | "color"> {
+    /** The colour, as a string. Leave it out to let the picker hold its own. */
+    value?: string;
+    /** What it starts on when uncontrolled. @default "#000000" */
+    defaultValue?: string;
+    /** Called on every move while dragging. */
+    onChange?: (color: string) => void;
+    /**
+     * Called once the drag ends, the text is committed or a swatch is picked.
+     *
+     * Use it for the expensive thing — a save, a canvas redraw — and `onChange` for the
+     * live preview.
+     */
+    onChangeComplete?: (color: string) => void;
+    /**
+     * Which formats the dropdown beside the text field offers, and in what order.
+     *
+     * The first is what it starts on. Pass one to pin the format and drop the dropdown.
+     *
+     * ```tsx
+     * formats={["rgb", "hex"]}  // starts on RGB, offers both
+     * formats={["hex"]}         // hex only, no dropdown
+     * ```
+     *
+     * @default ["hex", "rgb", "hsl"]
+     */
+    formats?: ColorFormat[];
+    /** Called when the format is switched, with the colour rewritten in it. */
+    onFormatChange?: (format: ColorFormat, color: string) => void;
+    /** Show the field you can type or paste a colour into. @default true */
+    showInput?: boolean;
+    /** Colours to offer below the panel. Nothing is shown when it is empty. */
+    swatches?: string[];
+    /** What the swatches are called, for a reader. @default "Preset colours" */
+    swatchesLabel?: string;
+    /**
+     * Offer the eyedropper. The button only renders where the browser has the API, so it is
+     * absent rather than dead in browsers without it.
+     * @default false
+     */
+    eyeDropper?: boolean;
+    /** Nothing can be moved, typed or picked. @default false */
+    disabled?: boolean;
+    /** Draw your own saturation area. Position and dragging stay with the picker. */
+    renderSaturation?: (state: ColorPickerRenderState) => ReactNode;
+    /** Draw your own hue handle. */
+    renderHueThumb?: (state: ColorPickerRenderState) => ReactNode;
+    /** Draw your own alpha handle. */
+    renderAlphaThumb?: (state: ColorPickerRenderState) => ReactNode;
+    /** Goes under the panel, above the swatches. */
+    footer?: ReactNode;
+    className?: string;
 }
-interface RHFFilePickerRendererProps<T extends HTMLElement = HTMLDivElement> extends RHFRenderArgs<Record<string, FilePickerFile[]>>, RHFFilePickerBaseProps<T> {
+interface ColorPickerRenderState {
+    /** The colour as the caller's `format` would give it. */
+    color: string;
+    /** The same colour in parts, for drawing with. */
+    hsva: Hsva;
+    /** Whether a pointer is down on this control. */
+    dragging: boolean;
 }
 
+declare global {
+    interface Window {
+        EyeDropper?: new () => {
+            open: () => Promise<{
+                sRGBHex: string;
+            }>;
+        };
+    }
+}
 /**
- * A file picker component with drag-and-drop support for React Hook Form.
+ * The colour picker panel: a saturation square, a hue slider, and whatever else you turn
+ * on.
  *
- * Features include:
- * - File and directory selection
- * - Drag-and-drop support
- * - File preview URLs
- * - Duplicate detection and optional removal
- * - Custom UI via render prop
+ * It works in HSV internally, which is what the square is a plane of, and hands you back a
+ * string in whichever `format` you asked for.
  *
- * Selected files have additional properties:
- * - `preview`: URL for displaying file content
- * - `duplicatedWith`: Array of files this file duplicates
+ * `onChange` fires on every move so a preview can follow the drag. `onChangeComplete`
+ * fires once the drag ends, which is where the expensive work belongs.
  *
  * @example
  * ```tsx
- * // Basic usage - accept all file types
- * <RHFFilePicker name="files" />
+ * const [color, setColor] = useState("#3b82f6");
  *
- * // Restrict to images only
- * <RHFFilePicker name="images" accept="image/*" />
+ * <ColorPicker value={color} onChange={setColor} />
+ * ```
+ *
+ * @example
+ * With alpha, swatches and the eyedropper:
  *
- * // Remove duplicates automatically
- * <RHFFilePicker
- *   name="files"
- *   accept="image/*"
- *   removeDuplicates
+ * ```tsx
+ * <ColorPicker
+ *   alpha
+ *   eyeDropper
+ *   format="rgb"
+ *   swatches={["#ef4444", "#f59e0b", "#10b981", "#3b82f6"]}
+ *   value={color}
+ *   onChange={setColor}
+ *   onChangeComplete={save}
  * />
  * ```
+ */
+declare const ColorPicker: {
+    ({ value, defaultValue, onChange, onChangeComplete, formats, onFormatChange, showInput, swatches, swatchesLabel, eyeDropper, disabled, renderSaturation, renderHueThumb, renderAlphaThumb, footer, className, ...rest }: ColorPickerProps): react_jsx_runtime.JSX.Element;
+    displayName: string;
+};
+
+declare const formatColor: (hsva: Hsva, format: ColorFormat, withAlpha: boolean) => string;
+/**
+ * What a caller's string means, or `null` when it means nothing.
+ *
+ * Returning null rather than guessing at black lets the text field reject what was typed
+ * and put back what was there, instead of silently swallowing a typo.
+ */
+declare const parseColor: (input: string | undefined | null) => Hsva | null;
+
+interface ColorInputProps extends Omit<ColorPickerProps, "className" | "footer" | "defaultValue"> {
+    /** What it starts on when uncontrolled. @default "#000000" */
+    defaultValue?: string;
+    /** Shown in place of the value when there is none. @default "Pick a colour" */
+    placeholder?: ReactNode;
+    /**
+     * Draw the field yourself: a swatch on its own, a swatch with your own label, anything.
+     *
+     * It is drawn **inside** the trigger, so opening, closing, focus and the aria stay with
+     * the component. You are handing over what it looks like, not how it works.
+     *
+     * ```tsx
+     * <ColorInput
+     *   render={({ color }) => <span className="size-6 rounded" style={{ background: color }} />}
+     * />
+     * ```
+     */
+    render?: (state: ColorInputRenderState) => ReactNode;
+    /** Cannot be opened. @default false */
+    disabled?: boolean;
+    /** Shows the value, but the picker does not open. @default false */
+    readOnly?: boolean;
+    /** @default "bottom-start" */
+    pickerPlacement?: Placement;
+    /** @default "absolute" */
+    floatingStrategy?: Strategy;
+    className?: string;
+    wrapperClassName?: string;
+    pickerClassName?: string;
+    /** Called when the panel opens or closes. */
+    onOpenChange?: (open: boolean) => void;
+}
+interface ColorInputRenderState {
+    /** The colour as the caller's `format` would give it, or `""` when there is none. */
+    color: string;
+    /** Whether the picker is open. */
+    open: boolean;
+}
+
+/**
+ * A field showing the colour you picked, opening the picker in a popover.
+ *
+ * `ColorPicker` is the panel on its own, the way `Calendar` is to `DateInput`. Reach for
+ * that one when the panel lives somewhere of its own.
  *
- * Custom UI example (compact image grid):
+ * @example
  * ```tsx
- * <RHFFilePicker
- *   name="customImages"
- *   accept="image/*"
- *   render={({
- *     dropzoneRef,
- *     dragging,
- *     loading,
- *     field: { value: files, onChange },
- *     openFilePicker,
- *   }) => {
- *     const handleRemove = (preview: string) => {
- *       onChange(files.filter((f) => f.preview !== preview));
- *     };
+ * const [brand, setBrand] = useState("#3b82f6");
  *
- *     return (
- *       <div className="flex flex-col gap-3">
- *         <div
- *           ref={dropzoneRef}
- *           onClick={() => openFilePicker()}
- *           className={`relative flex cursor-pointer items-center justify-center rounded-lg border-2 border-dashed p-4 transition-colors ${
- *             dragging ? 'border-primary-400 bg-primary-50' : 'border-gray-300 hover:border-primary-300'
- *           }`}
- *         >
- *           <div className="flex items-center gap-3 text-sm text-gray-500">
- *             <UploadIcon className="h-5 w-5" />
- *             <span>{dragging ? 'Drop images here' : 'Click to upload or drag and drop'}</span>
- *           </div>
- *           {loading && (
- *             <div className="absolute inset-0 flex items-center justify-center rounded-lg bg-white/50">
- *               <Spinner className="h-5 w-5" />
- *             </div>
- *           )}
- *         </div>
+ * <ColorInput value={brand} onChange={setBrand} />
+ * ```
  *
- *         {!!files?.length && (
- *           <div className="grid grid-cols-4 gap-2 sm:grid-cols-5 md:grid-cols-6">
- *             {files.map((file) => (
- *               <div key={file.preview} className="group relative aspect-square">
- *                 <img
- *                   src={file.preview}
- *                   alt={file.name}
- *                   className="h-full w-full rounded-lg border object-cover"
- *                 />
- *                 <button
- *                   type="button"
- *                   onClick={() => handleRemove(file.preview)}
- *                   className="absolute -right-1.5 -top-1.5 flex h-5 w-5 items-center justify-center rounded-full bg-red-500 text-white opacity-0 shadow-sm hover:bg-red-600 group-hover:opacity-100"
- *                 >
- *                   <XIcon className="h-3 w-3" />
- *                 </button>
- *               </div>
- *             ))}
- *           </div>
- *         )}
- *       </div>
- *     );
- *   }}
+ * @example
+ * ```tsx
+ * <ColorInput
+ *   alpha
+ *   format="rgb"
+ *   swatches={["#ef4444", "#3b82f6"]}
+ *   value={brand}
+ *   onChange={setBrand}
+ *   onChangeComplete={save}
  * />
  * ```
- *
- * */
-declare function RHFFilePicker<T extends HTMLElement = HTMLDivElement>(props: RHFFilePickerProps<T>): react_jsx_runtime.JSX.Element;
-declare namespace RHFFilePicker {
-    var displayName: string;
+ */
+declare const ColorInput: {
+    ({ value, defaultValue, onChange, onChangeComplete, onOpenChange, placeholder, render, disabled, readOnly, pickerPlacement, floatingStrategy, className, wrapperClassName, pickerClassName, ...picker }: ColorInputProps): react_jsx_runtime.JSX.Element;
+    displayName: string;
+};
+
+interface RHFColorInputProps extends RHFBaseProps, Omit<ColorInputProps, "value" | "onChange"> {
+    /** What the field shows when the form has nothing for it.(Default: "") */
+    defaultValue?: string;
+    /** Called alongside the form update. */
+    onChange?: (color: string) => void;
 }
 
 /**
- * A wrapper around React Hook Form's Controller component that auto-injects the control prop.
+ * React Hook Form wrapper for the ColorInput component.
  *
- * Automatically retrieves the `control` prop from `useFormContext`, eliminating the need to
- * pass it manually. This simplifies usage with FormProvider and reduces boilerplate code.
+ * The field holds the colour as a string in whichever format is on show. Untouched and
+ * with no default it is `undefined`, the way any React Hook Form field is, so `required`
+ * catches one nobody picked.
  *
- * **When to pass `control` explicitly:**
- * Only pass the `control` prop when you have nested FormProviders and need to connect to a
- * specific form instance. For example, when one form is rendered inside another FormProvider,
- * you'll need to pass the parent form's control explicitly to avoid using the inner form's context.
+ * `onChangeComplete` is not wired to the form: the form is updated on every move, so a
+ * drag does not leave the value behind. Pass it yourself where a save should wait.
  *
  * @example
  * ```tsx
- * // Basic usage - control auto-injected from FormProvider
- * <FormProvider {...methods}>
- *   <RHFController
- *     name="email"
- *     render={({ field }) => (
- *       <input
- *         {...field}
- *         type="email"
- *         placeholder="Enter email"
- *       />
- *     )}
- *   />
- * </FormProvider>
- *
- * // With validation rules
- * <RHFController
- *   name="username"
- *   rules={{ required: 'Username is required' }}
- *   render={({ field, fieldState }) => (
- *     <div>
- *       <input {...field} />
- *       {fieldState.error && <span>{fieldState.error.message}</span>}
- *     </div>
- *   )}
- * />
- *
- * // Custom component integration
- * <RHFController
- *   name="customField"
- *   render={({ field, fieldState, formState }) => (
- *     <CustomComponent
- *       value={field.value}
- *       onChange={field.onChange}
- *       error={fieldState.error}
- *       isDirty={formState.isDirty}
- *     />
- *   )}
- * />
+ * <RHFColorInput name="brand" rules={{ required: "Pick a colour" }} />
+ * <RHFColorInput name="overlay" alpha format="rgb" />
+ * ```
+ */
+declare const RHFColorInput: FC<RHFColorInputProps>;
+
+/**
+ * React Hook Form wrapper for the RangeSlider component.
  *
- * // Nested FormProviders - explicit control needed
- * <FormProvider {...outerForm}>
- *   <FormProvider {...innerForm}>
- *     // This will use innerForm's control by default
- *     <RHFController name="innerField" render={...} />
+ * The field holds a `[low, high]` pair, always in order.
  *
- *     // Pass control explicitly to use outerForm
- *     <RHFController
- *       name="outerField"
- *       control={outerForm.control}
- *       render={({ field }) => <input {...field} />}
- *     />
- *   </FormProvider>
- * </FormProvider>
+ * @example
+ * ```tsx
+ * <RHFRangeSlider name="price" min={0} max={500} step={10} minGap={50} />
  * ```
  */
-declare const RHFController: FC<ControllerProps>;
+declare const RHFRangeSlider: FC<RHFRangeSliderProps>;
 
-interface SelectButtonProps {
-    /**
-     * Additional class name for the select button
-     * */
-    className?: string;
-    /**
-     * Prefix for the select button
-     * */
-    prefix?: FC | ReactNode;
-    /**
-     * Suffix for the select button
-     * */
-    suffix?: FC | ReactNode;
+declare const _default: CalendarOverload;
+
+interface RHFDateRangeInputProps extends RHFBaseProps, Omit<DateRangeInputProps, "value" | "onChange"> {
+    disabled?: boolean;
+    onChange?: (value: DateRange | null) => void;
 }
 
-type HtmlButtonProps = DetailedHTMLProps<React.ButtonHTMLAttributes<HTMLDivElement>, HTMLDivElement>;
-interface SelectOptionConfig<T> {
+declare const RHFDateRangeInput: FC<RHFDateRangeInputProps>;
+
+/** A file that has been picked, with where it sat in any folder it came from. */
+type PickedFile = File & {
     /**
-     * Value of the option
+     * Where the file sat in the folder it came from, or `""` for a file picked on its own.
+     * Taken from `webkitRelativePath` when the browser gives one.
      * */
-    value: T;
+    path: string;
+};
+/** A picked file with an object URL, which only exists when `preview` is set. */
+type PreviewFile = PickedFile & {
     /**
-     * Used to identify the option in the list and filtering
-     * If you don't pass anything, children textContent will be used as label
+     * An object URL for showing the file. Revoked for you when the file leaves the field or
+     * the field unmounts.
      * */
-    label: string;
-    visibility?: SelectOptionProps<T>["visibility"];
+    preview: string;
+};
+/** Why a file was turned away. */
+type FileRejectionReason = 
+/** It did not match `accept`. */
+"type"
+/** It is already held, and `unique` is set. */
+ | "duplicate"
+/** There was no room: past `max`, or a second file in a single field. */
+ | "max";
+interface FileRejection {
+    file: File;
+    reason: FileRejectionReason;
+}
+interface CommonFileInputProps extends Omit<HTMLAttributes<HTMLDivElement>, "onChange"> {
     /**
-     * This is just a placeholder for the rest of the props in case we might need them in the future
+     * What may be picked, as the `accept` attribute is written: `"image/*"`, `".pdf,.docx"`.
+     *
+     * Enforced on a drop as well as in the dialog, unlike the native attribute, which only
+     * filters what the dialog offers.
+     * @default "*"
      * */
-    props: Omit<SelectOptionProps<T>, "children">;
+    accept?: string;
+    /** Called with every file turned away, and why. */
+    onReject?: (rejected: FileRejection[]) => void;
+    /** Shown while there is nothing picked. */
+    placeholder?: ReactNode;
+    /** Drop the × that empties the field. @default false */
+    hideClearIcon?: boolean;
+    /** @default false */
+    disabled?: boolean;
+    /** Shows what is picked, but nothing can be picked or dropped. @default false */
+    readOnly?: boolean;
+    className?: string;
+    wrapperClassName?: string;
 }
-interface CustomSelectOptionBaseArgs<T> extends Pick<SelectOptionConfig<T>, "value"> {
-    /**
-     * Whether the option is selected or not
-     * */
-    selected: boolean;
-    /**
-     * Whether the option has focus or not
-     * */
-    focused: boolean;
+interface CommonRenderState {
+    /** Whether a file is being dragged over the field. */
+    dragging: boolean;
+    /** Whether the files are still being read. */
+    loading: boolean;
+    disabled: boolean;
+    readOnly: boolean;
+    /** Opens the file dialog. */
+    browse: () => void;
+    /** Empties the field. */
+    clear: () => void;
 }
-interface CustomSelectOptionArgs<T> extends CustomSelectOptionBaseArgs<T> {
-    /**
-     * Function to prevent the default onClick function
-     * If you call this function, You need to handle the onClick function yourself
-     * You can use `selectCurrentOption` to trigger the default onClick function
-     * or you can write your own onClick function according to your needs
-     * */
-    preventDefault: () => void;
-    /**
-     * Default onClick function that is called when the option is clicked
-     * It will select or deselect the option and close the menu if it's a single select
-     * */
-    selectCurrentOption: () => void;
-    /**
-     * Callback to close the select menu
-     * */
-    closeMenu: () => void;
+interface SingleFileRenderState<T extends PickedFile = PickedFile> extends CommonRenderState {
+    /** What is held, or `null`. */
+    file: T | null;
+}
+interface MultiFileRenderState<T extends PickedFile = PickedFile> extends CommonRenderState {
+    /** What is held. */
+    files: T[];
+    /** Drops one file from the list. */
+    remove: (file: T) => void;
+}
+interface SingleShape<T extends PickedFile> {
+    value?: T | null;
+    onChange?: (file: T | null) => void;
+    multiple?: false;
     /**
-     * Filtered keyword that is currently being used to filter the options
+     * Draw the field yourself.
+     *
+     * Drawn **inside** the field, so browsing, dropping, the drag state and the keyboard stay
+     * with the component.
      * */
-    filteredKeyword: string;
+    render?: (state: SingleFileRenderState<T>) => ReactNode;
 }
-interface SelectOptionProps<T> extends Omit<SelectOptionConfig<T>, "props">, Omit<HtmlButtonProps, "children" | "value" | "className" | "onClick"> {
+interface MultiShape<T extends PickedFile> {
+    value?: T[];
+    onChange?: (files: T[]) => void;
+    multiple: true;
     /**
-     * If you want to hide default check icon
+     * Keep what is already held and add to it, rather than replacing it.
+     *
+     * Off by default, which is what a native file input does.
+     * @default false
      * */
-    hideCheckIcon?: boolean;
-    className?: string | ((props: CustomSelectOptionBaseArgs<T>) => string);
-    children?: ReactNode | ((props: Omit<CustomSelectOptionArgs<T>, "preventDefault">) => ReactNode);
-    onClick?: (args: CustomSelectOptionArgs<T>) => void;
+    append?: boolean;
     /**
-     * This will only be called when the option is selected and multiple is true
+     * Turn away a file that is already held.
+     *
+     * Compared by size first, then by sampling the start, middle and end, so a large file is
+     * never read end to end. Reaches `onReject` with `"duplicate"`.
+     * @default false
      * */
-    onRemove?: (args: CustomSelectOptionArgs<T>) => void;
+    unique?: boolean;
+    /** How many may be held. Anything past it reaches `onReject` with `"max"`. */
+    max?: number;
+    /** Draw the field yourself. Drawn **inside** it, so the wiring stays put. */
+    render?: (state: MultiFileRenderState<T>) => ReactNode;
+}
+interface Previewless {
     /**
-     * If you want to display the option always, even if it's empty
-     * i.e. when the user is filtering the options and no option is found
-     *
-     * if you want to display the option only when the options are empty
-     * then you can pass "empty" as value and if you want to display the option always
-     * then you can pass "always" as value
+     * Give each file an object URL on `preview`.
      *
-     * If you want to display the option only when the options are empty and the user is filtering
-     * and that filter matches the option then you can pass "filtered-and-empty" as value
-     *
-     * Default: "default"
+     * Off by default: an object URL pins the file's bytes until it is revoked, which is work
+     * and memory you have not asked for. `path` is always there.
+     * @default false
      * */
-    visibility?: "default" | "always" | "empty" | "filtered-and-empty";
+    preview?: false;
 }
-type SelectOptionElement<T = unknown> = ReactElement<SelectOptionProps<T>>;
+interface Previewed {
+    /** Gives each file an object URL on `preview`, revoked for you once it is done with. */
+    preview: true;
+}
+/**
+ * `multiple` decides whether the value is one file or a list, and `preview` decides whether
+ * those files carry an object URL. Both are read off the props, so neither `value` nor what
+ * `render` is given ever needs a cast.
+ * */
+type FileInputProps = (CommonFileInputProps & MultiShape<PreviewFile> & Previewed) | (CommonFileInputProps & MultiShape<PickedFile> & Previewless) | (CommonFileInputProps & SingleShape<PreviewFile> & Previewed) | (CommonFileInputProps & SingleShape<PickedFile> & Previewless);
 
-interface BaseSelectProps extends PropsWithChildren, SelectButtonProps {
-    inputRef?: RefCallback<HTMLInputElement | null> | RefObject<HTMLInputElement | null>;
-    /**
-     * Placeholder that will be shown when the select is empty
-     * */
-    placeholder?: string;
-    /**
-     * Additional class name for the placeholder
-     * */
-    placeholderClassName?: string;
-    wrapperClassName?: string;
+/**
+ * A file field: click it to browse, or drop files onto it.
+ *
+ * One file unless `multiple` is set, which is what a native file input does. A second pick
+ * replaces what is held unless `append` is set, again as native does.
+ *
+ * `preview` is off by default. An object URL pins the file's bytes until it is revoked, so
+ * it is opt in — and revoked for you once the file leaves or the field unmounts. `path` is
+ * always there.
+ *
+ * @example
+ * ```tsx
+ * const [file, setFile] = useState<PickedFile | null>(null);
+ *
+ * <FileInput value={file} onChange={setFile} accept="image/*" />
+ * ```
+ *
+ * @example
+ * ```tsx
+ * <FileInput
+ *   multiple
+ *   append
+ *   unique
+ *   preview
+ *   max={5}
+ *   value={files}
+ *   onChange={setFiles}
+ *   onReject={(rejected) => toast.error(`${rejected.length} turned away`)}
+ * />
+ * ```
+ */
+declare const FileInput: {
+    (props: FileInputProps): react_jsx_runtime.JSX.Element;
+    displayName: string;
+};
+
+/**
+ * `Omit` over a union collapses it into one object, which would lose the discrimination on
+ * `multiple` and `preview` that decides the value type and what `render` is handed.
+ * Distributing keeps every branch.
+ * */
+type OmitEach<T, K extends PropertyKey> = T extends unknown ? Omit<T, K> : never;
+type RHFFileInputProps = RHFBaseProps & OmitEach<FileInputProps, "value">;
+
+/**
+ * React Hook Form wrapper for [FileInput](/docs/file-input).
+ *
+ * The field holds one `PickedFile` when single, or a `PickedFile[]` when `multiple`, so
+ * `required` catches an empty one either way.
+ *
+ * @example
+ * ```tsx
+ * <RHFFileInput name="avatar" accept="image/*" rules={{ required: "Pick a file" }} />
+ * <RHFFileInput name="photos" multiple append unique preview max={5} />
+ * ```
+ */
+declare const RHFFileInput: {
+    ({ name, control, rules, onChange, ...rest }: RHFFileInputProps): react_jsx_runtime.JSX.Element;
+    displayName: string;
+};
+
+interface OTPInputProps {
     /**
-     * Additional class name for the menu
+     * Marks the field invalid, to a screen reader and in its colours.
+     *
+     * The standard attribute rather than a prop of the library's own.
      * */
-    menuClassName?: string;
+    "aria-invalid"?: boolean | "true" | "false";
     /**
-     * Select is disabled or not
+     * Value of the OTP input
      * */
-    disabled?: boolean;
+    value: string;
     /**
-     * Whether to show the input for filtering the options
-     * Default is false
+     * Function to call when the OTP input value changes
      * */
-    filterable?: boolean | "inline" | "dropdown";
+    onChange: (value: string) => void;
     /**
-     * Whether to close the menu when an option is selected
-     * Default is true for single select and false for multi select
+     * Function to call when the OTP input is blurred
      * */
-    closeMenuOnSelect?: boolean;
+    onBlur?: (e: React.FocusEvent<HTMLInputElement>) => void;
     /**
-     * Placement of the menu
-     * Default is "bottom-start"
+     * Function to call when the OTP input completely filled
+     * i.e when the length of the OTP input is equal to the length prop
      * */
-    placement?: Placement;
+    onOTPComplete?: (value: string) => void;
     /**
-     * Floating strategy for the menu
+     * If true, only numbers can be entered in the OTP input. (Default: true)
      * */
-    floatingStrategy?: Strategy;
+    numberOnly?: boolean;
     /**
-     * Whether to hide the default empty UI when the select is empty
-     * If you pass `SelectEmpty` as children, this will set to true
+     * Classname for the wrapper div that contains input fields
      * */
-    hideDefaultEmptyUI?: boolean;
+    className?: string;
     /**
-     * If true, a clear button will be shown to clear the selected value
-     * Default is false
+     * Classname for the input fields
      * */
-    clearable?: boolean;
-}
-interface SingleSelectProps<T> extends BaseSelectProps {
+    inputClassName?: string;
     /**
-     * The value of the select
+     * Length of the OTP input(Default: 6)
+     * Inputs will be created based on this length
      * */
-    value: T;
+    length?: number;
     /**
-     * Callback to be called when the value changes
+     * Aspect ratio of the OTP input (Default: 0.94)
      * */
-    onChange: (value: T) => void;
+    aspectRatio?: string | number;
     /**
-     * Disabling multiple select
+     * If true, the OTP input will be disabled
      * */
-    multiple?: false;
+    disabled?: boolean;
 }
-interface MultiSelectProps<T> extends BaseSelectProps {
-    /**
-     * The value of the select in array format
-     * */
-    value: T[];
+
+/**
+ * OTPInput provides a segmented input field for entering one-time passwords or verification codes.
+ * Each digit is displayed in a separate box with automatic focus management and keyboard navigation.
+ * Supports both numeric-only mode (default) and alphanumeric input.
+ *
+ * @example
+ * Two-factor authentication:
+ *
+ * ```tsx
+ * const [verificationCode, setVerificationCode] = useState('');
+ *
+ * <OTPInput
+ *   value={verificationCode}
+ *   onChange={setVerificationCode}
+ *   length={6}
+ *   numberOnly
+ *   onOTPComplete={async (code) => {
+ *     await verifyTwoFactorCode(code);
+ *   }}
+ * />
+ * ```
+ *
+ * @example
+ * Alphanumeric code with custom styling:
+ *
+ * ```tsx
+ * <OTPInput
+ *   value={activationCode}
+ *   onChange={setActivationCode}
+ *   length={8}
+ *   numberOnly={false}
+ *   className="gap-2"
+ *   inputClassName="border-2 rounded-md"
+ * />
+ * ```
+ *
+ * @example
+ * SMS verification with aspect ratio:
+ *
+ * ```tsx
+ * <OTPInput
+ *   value={smsCode}
+ *   onChange={setSmsCode}
+ *   length={4}
+ *   aspectRatio={1}
+ *   onOTPComplete={(code) => submitVerification(code)}
+ *   disabled={isVerifying}
+ * />
+ * ```
+ */
+declare const OTPInput: react__default.ForwardRefExoticComponent<OTPInputProps & react__default.RefAttributes<HTMLInputElement>>;
+
+interface RHFOTPInputProps extends RHFBaseProps, Omit<OTPInputProps, "value" | "onChange" | "onBlur"> {
     /**
-     * Callback to be called when the value changes
+     * Callback fired when the value changes
+     * Called alongside React Hook Form's onChange with the new code
      * */
-    onChange: (value: T[]) => void;
+    onChange?: (value: string) => void;
     /**
-     * For enabling multiple select
+     * Callback fired when the input is blurred
+     * Called alongside React Hook Form's onBlur
      * */
-    multiple: true;
-}
-type SelectProps<T> = SingleSelectProps<T> | MultiSelectProps<T>;
-interface SelectOverload {
-    <T>(props: SingleSelectProps<T>): JSX.Element;
-    <T>(props: MultiSelectProps<T>): JSX.Element;
-    <T>(props: SelectProps<T>): JSX.Element;
-    displayName: string;
-}
-interface FocusedOption<T = unknown> extends SelectOptionConfig<T> {
-    focusType?: "keyboard" | "mouse" | "initial";
+    onBlur?: () => void;
 }
-interface SelectContextProps<T> extends Pick<BaseSelectProps, "disabled" | "prefix" | "suffix" | "placeholder" | "closeMenuOnSelect">, Omit<MultiSelectProps<T>, "value" | "onChange" | "multiple" | "renderDisplay"> {
-    /**
-     * The value of the select
-     * */
-    value: T | T[];
-    /**
-     * For checking if the select is multiple or single
-     * */
-    multiple?: boolean;
+
+/**
+ * An OTP (One-Time Password) input component integrated with React Hook Form.
+ *
+ * By default, only numeric input is allowed. You can change this behavior
+ * by setting the `numberOnly` prop to false to allow alphanumeric input.
+ *
+ * @example
+ * ```tsx
+ * // Basic usage - numbers only, default 6 digits
+ * <RHFOTPInput name="otp" />
+ *
+ * // Custom length
+ * <RHFOTPInput name="code" length={4} />
+ *
+ * // Allow alphanumeric input
+ * <RHFOTPInput
+ *   name="verificationCode"
+ *   numberOnly={false}
+ *   length={8}
+ * />
+ *
+ * // With completion callback
+ * <RHFOTPInput
+ *   name="otp"
+ *   onOTPComplete={(value) => {
+ *     console.log('OTP entered:', value);
+ *     // Auto-submit or verify OTP
+ *   }}
+ * />
+ * ```
+ */
+declare const RHFOTPInput: FC<RHFOTPInputProps>;
+
+/**
+ * A wrapper around React Hook Form's Controller component that auto-injects the control prop.
+ *
+ * Automatically retrieves the `control` prop from `useFormContext`, eliminating the need to
+ * pass it manually. This simplifies usage with FormProvider and reduces boilerplate code.
+ *
+ * **When to pass `control` explicitly:**
+ * Only pass the `control` prop when you have nested FormProviders and need to connect to a
+ * specific form instance. For example, when one form is rendered inside another FormProvider,
+ * you'll need to pass the parent form's control explicitly to avoid using the inner form's context.
+ *
+ * @example
+ * ```tsx
+ * // Basic usage - control auto-injected from FormProvider
+ * <FormProvider {...methods}>
+ *   <RHFController
+ *     name="email"
+ *     render={({ field }) => (
+ *       <input
+ *         {...field}
+ *         type="email"
+ *         placeholder="Enter email"
+ *       />
+ *     )}
+ *   />
+ * </FormProvider>
+ *
+ * // With validation rules
+ * <RHFController
+ *   name="username"
+ *   rules={{ required: 'Username is required' }}
+ *   render={({ field, fieldState }) => (
+ *     <div>
+ *       <input {...field} />
+ *       {fieldState.error && <span>{fieldState.error.message}</span>}
+ *     </div>
+ *   )}
+ * />
+ *
+ * // Custom component integration
+ * <RHFController
+ *   name="customField"
+ *   render={({ field, fieldState, formState }) => (
+ *     <CustomComponent
+ *       value={field.value}
+ *       onChange={field.onChange}
+ *       error={fieldState.error}
+ *       isDirty={formState.isDirty}
+ *     />
+ *   )}
+ * />
+ *
+ * // Nested FormProviders - explicit control needed
+ * <FormProvider {...outerForm}>
+ *   <FormProvider {...innerForm}>
+ *     // This will use innerForm's control by default
+ *     <RHFController name="innerField" render={...} />
+ *
+ *     // Pass control explicitly to use outerForm
+ *     <RHFController
+ *       name="outerField"
+ *       control={outerForm.control}
+ *       render={({ field }) => <input {...field} />}
+ *     />
+ *   </FormProvider>
+ * </FormProvider>
+ * ```
+ */
+declare const RHFController: FC<ControllerProps>;
+
+interface SelectButtonProps {
     /**
-     * Input ref for the filter input
-     * Use this to work with keyword filter in custom select
+     * Additional class name for the select button
      * */
-    setInputRef: (_: any) => RefCallback<HTMLElement | null> | RefObject<HTMLElement | null> | undefined;
+    className?: string;
     /**
-     * Ref for the input
+     * Prefix for the select button
      * */
-    inputRef: RefObject<HTMLInputElement | null>;
+    prefix?: FC | ReactNode;
     /**
-     * For managing the open state of the menu
+     * Suffix for the select button
      * */
-    open: boolean;
+    suffix?: FC | ReactNode;
+}
+
+type HtmlButtonProps = DetailedHTMLProps<React.ButtonHTMLAttributes<HTMLDivElement>, HTMLDivElement>;
+interface SelectOptionConfig<T> {
     /**
-     * Setter for open state for the menu
+     * Value of the option
      * */
-    setOpen: Dispatch<SetStateAction<boolean>>;
+    value: T;
     /**
-     * Array of labels and values that are passed down as `SelectOption` to children
+     * Used to identify the option in the list and filtering
+     * If you don't pass anything, children textContent will be used as label
      * */
-    options: SelectOptionConfig<T>[];
+    label: string;
+    visibility?: SelectOptionProps<T>["visibility"];
     /**
-     * For filtering options that are binded to the input
-     * If you use custom `SelectButton` you should bind this to the input
+     * This is just a placeholder for the rest of the props in case we might need them in the future
      * */
-    keyword: string;
+    props: Omit<SelectOptionProps<T>, "children">;
+}
+interface CustomSelectOptionBaseArgs<T> extends Pick<SelectOptionConfig<T>, "value"> {
     /**
-     * Setter for filter keyword
+     * Whether the option is selected or not
      * */
-    setKeyword: Dispatch<SetStateAction<string>>;
+    selected: boolean;
     /**
-     * For managing the floating state of the menu
-     * *you rarely need to use this if you build custom select*
+     * Whether the option has focus or not
      * */
-    floating: ReturnType<typeof useFloating>;
+    focused: boolean;
+}
+interface CustomSelectOptionArgs<T> extends CustomSelectOptionBaseArgs<T> {
     /**
-     * Open the select menu
+     * Function to prevent the default onClick function
+     * If you call this function, You need to handle the onClick function yourself
+     * You can use `selectCurrentOption` to trigger the default onClick function
+     * or you can write your own onClick function according to your needs
      * */
-    openMenu: () => void;
+    preventDefault: () => void;
     /**
-     * Close the select menu
+     * Default onClick function that is called when the option is clicked
+     * It will select or deselect the option and close the menu if it's a single select
+     * */
+    selectCurrentOption: () => void;
+    /**
+     * Callback to close the select menu
      * */
     closeMenu: () => void;
     /**
-     * Toggle the select menu
+     * Filtered keyword that is currently being used to filter the options
      * */
-    toggleMenu: () => void;
+    filteredKeyword: string;
+}
+interface SelectOptionProps<T> extends Omit<SelectOptionConfig<T>, "props">, Omit<HtmlButtonProps, "children" | "value" | "className" | "onClick"> {
     /**
-     * Reusable function to check if the option is selected
-     * Usage:
-     * ```js
-     * isSelected("optionValue")
-     * ```
+     * If you want to hide default check icon
      * */
-    isSelected: (optionValue: T) => boolean;
+    hideCheckIcon?: boolean;
+    className?: string | ((props: CustomSelectOptionBaseArgs<T>) => string);
+    children?: ReactNode | ((props: Omit<CustomSelectOptionArgs<T>, "preventDefault">) => ReactNode);
+    onClick?: (args: CustomSelectOptionArgs<T>) => void;
     /**
-     * Reusable function to handle the change of the select
-     * This function handle the option value base on the select type(multiple or single)
-     * If multiple select, it will add or remove the value from the array
-     * and if single select, it will replace the value
+     * This will only be called when the option is selected and multiple is true
+     * */
+    onRemove?: (args: CustomSelectOptionArgs<T>) => void;
+    /**
+     * If you want to display the option always, even if it's empty
+     * i.e. when the user is filtering the options and no option is found
      *
-     * Usage:
-     * ```js
-     * handleChange("optionValue")
-     * ```
+     * if you want to display the option only when the options are empty
+     * then you can pass "empty" as value and if you want to display the option always
+     * then you can pass "always" as value
+     *
+     * If you want to display the option only when the options are empty and the user is filtering
+     * and that filter matches the option then you can pass "filtered-and-empty" as value
+     *
+     * Default: "default"
      * */
-    handleChange: (optionValue: T) => void;
+    visibility?: "default" | "always" | "empty" | "filtered-and-empty";
+}
+type SelectOptionElement<T = unknown> = ReactElement<SelectOptionProps<T>>;
+
+interface BaseSelectProps extends PropsWithChildren, SelectButtonProps {
+    inputRef?: RefCallback<HTMLInputElement | null> | RefObject<HTMLInputElement | null>;
     /**
-     * Current focused option that is selected by keyboard or mouse hover
+     * Placeholder that will be shown when the select is empty
      * */
-    focusedOption: FocusedOption<T> | null;
+    placeholder?: string;
     /**
-     * Setter for focused option in case you want to update the focused option to a specific option
+     * Additional class name for the placeholder
      * */
-    setFocusedOption: Dispatch<SetStateAction<FocusedOption<T> | null>>;
+    placeholderClassName?: string;
+    wrapperClassName?: string;
     /**
-     * Whether the select is empty when the filter is applied
+     * Additional class name for the menu
      * */
-    isEmpty: boolean;
+    menuClassName?: string;
     /**
-     * Ref for the menu scroll container
-     * Used internally for scrolling focused options into view
+     * Select is disabled or not
      * */
-    menuScrollContainerRef: RefObject<HTMLDivElement | null>;
+    disabled?: boolean;
     /**
-     * Callback to be called when the value changes
+     * Whether to show the input for filtering the options
+     * Default is false
      * */
-    onChange?: (value: T | T[]) => void;
-}
-
-/**
- * A customizable select dropdown component with support for single and multiple selections.
- *
- * Features include:
- * - Single or multiple selection modes
- * - Keyboard navigation and search
- * - Custom positioning with floating-ui
- * - Click-outside to close
- * - Customizable trigger and menu components
- *
- * @example
- * ```tsx
- * // Basic single select
- * <Select value={selectedValue} onChange={setSelectedValue}>
- *   <SelectOption value="option1" label="Option 1" />
- *   <SelectOption value="option2" label="Option 2" />
- * </Select>
- *
- * // Multiple select
- * <Select
- *   multiple
+    filterable?: boolean | "inline" | "dropdown";
+    /**
+     * Whether to close the menu when an option is selected
+     * Default is true for single select and false for multi select
+     * */
+    closeMenuOnSelect?: boolean;
+    /**
+     * Placement of the menu
+     * Default is "bottom-start"
+     * */
+    placement?: Placement;
+    /**
+     * Floating strategy for the menu
+     * */
+    floatingStrategy?: Strategy;
+    /**
+     * Whether to hide the default empty UI when the select is empty
+     * If you pass `SelectEmpty` as children, this will set to true
+     * */
+    hideDefaultEmptyUI?: boolean;
+    /**
+     * If true, a clear button will be shown to clear the selected value
+     * Default is false
+     * */
+    clearable?: boolean;
+}
+interface SingleSelectProps<T> extends BaseSelectProps {
+    /**
+     * The value of the select
+     * */
+    value: T;
+    /**
+     * Callback to be called when the value changes
+     * */
+    onChange: (value: T) => void;
+    /**
+     * Disabling multiple select
+     * */
+    multiple?: false;
+}
+interface MultiSelectProps<T> extends BaseSelectProps {
+    /**
+     * The value of the select in array format
+     * */
+    value: T[];
+    /**
+     * Callback to be called when the value changes
+     * */
+    onChange: (value: T[]) => void;
+    /**
+     * For enabling multiple select
+     * */
+    multiple: true;
+}
+type SelectProps<T> = SingleSelectProps<T> | MultiSelectProps<T>;
+interface SelectOverload {
+    <T>(props: SingleSelectProps<T>): JSX.Element;
+    <T>(props: MultiSelectProps<T>): JSX.Element;
+    <T>(props: SelectProps<T>): JSX.Element;
+    displayName: string;
+}
+interface FocusedOption<T = unknown> extends SelectOptionConfig<T> {
+    focusType?: "keyboard" | "mouse" | "initial";
+}
+interface SelectContextProps<T> extends Pick<BaseSelectProps, "disabled" | "prefix" | "suffix" | "placeholder" | "closeMenuOnSelect">, Omit<MultiSelectProps<T>, "value" | "onChange" | "multiple" | "renderDisplay"> {
+    /**
+     * The value of the select
+     * */
+    value: T | T[];
+    /**
+     * For checking if the select is multiple or single
+     * */
+    multiple?: boolean;
+    /**
+     * Input ref for the filter input
+     * Use this to work with keyword filter in custom select
+     * */
+    setInputRef: (_: any) => RefCallback<HTMLElement | null> | RefObject<HTMLElement | null> | undefined;
+    /**
+     * Ref for the input
+     * */
+    inputRef: RefObject<HTMLInputElement | null>;
+    /**
+     * For managing the open state of the menu
+     * */
+    open: boolean;
+    /**
+     * Setter for open state for the menu
+     * */
+    setOpen: Dispatch<SetStateAction<boolean>>;
+    /**
+     * Array of labels and values that are passed down as `SelectOption` to children
+     * */
+    options: SelectOptionConfig<T>[];
+    /**
+     * For filtering options that are binded to the input
+     * If you use custom `SelectButton` you should bind this to the input
+     * */
+    keyword: string;
+    /**
+     * Setter for filter keyword
+     * */
+    setKeyword: Dispatch<SetStateAction<string>>;
+    /**
+     * For managing the floating state of the menu
+     * *you rarely need to use this if you build custom select*
+     * */
+    floating: ReturnType<typeof useFloating>;
+    /**
+     * Open the select menu
+     * */
+    openMenu: () => void;
+    /**
+     * Close the select menu
+     * */
+    closeMenu: () => void;
+    /**
+     * Toggle the select menu
+     * */
+    toggleMenu: () => void;
+    /**
+     * Reusable function to check if the option is selected
+     * Usage:
+     * ```js
+     * isSelected("optionValue")
+     * ```
+     * */
+    isSelected: (optionValue: T) => boolean;
+    /**
+     * Reusable function to handle the change of the select
+     * This function handle the option value base on the select type(multiple or single)
+     * If multiple select, it will add or remove the value from the array
+     * and if single select, it will replace the value
+     *
+     * Usage:
+     * ```js
+     * handleChange("optionValue")
+     * ```
+     * */
+    handleChange: (optionValue: T) => void;
+    /**
+     * Current focused option that is selected by keyboard or mouse hover
+     * */
+    focusedOption: FocusedOption<T> | null;
+    /**
+     * Setter for focused option in case you want to update the focused option to a specific option
+     * */
+    setFocusedOption: Dispatch<SetStateAction<FocusedOption<T> | null>>;
+    /**
+     * Whether the select is empty when the filter is applied
+     * */
+    isEmpty: boolean;
+    /**
+     * Ref for the menu scroll container
+     * Used internally for scrolling focused options into view
+     * */
+    menuScrollContainerRef: RefObject<HTMLDivElement | null>;
+    /**
+     * Callback to be called when the value changes
+     * */
+    onChange?: (value: T | T[]) => void;
+}
+
+/**
+ * A customizable select dropdown component with support for single and multiple selections.
+ *
+ * Features include:
+ * - Single or multiple selection modes
+ * - Keyboard navigation and search
+ * - Custom positioning with floating-ui
+ * - Click-outside to close
+ * - Customizable trigger and menu components
+ *
+ * @example
+ * ```tsx
+ * // Basic single select
+ * <Select value={selectedValue} onChange={setSelectedValue}>
+ *   <SelectOption value="option1" label="Option 1" />
+ *   <SelectOption value="option2" label="Option 2" />
+ * </Select>
+ *
+ * // Multiple select
+ * <Select
+ *   multiple
  *   value={selectedValues}
  *   onChange={setSelectedValues}
  * >
@@ -2854,200 +3685,1175 @@ declare const SelectConsumer: {
     displayName: string;
 };
 
-declare const useSelect: <T = unknown>() => SelectContextProps<T>;
+declare const useSelect: <T = unknown>() => SelectContextProps<T>;
+
+interface RHFSingleSelectProps<T> extends Omit<SingleSelectProps<T>, "value" | "onChange">, RHFBaseProps {
+    onChange?: (value: T) => void;
+}
+interface RHFMultiSelectProps<T> extends Omit<MultiSelectProps<T>, "value" | "onChange">, RHFBaseProps {
+    onChange?: (value: T[]) => void;
+}
+type RHFSelectProps<T> = RHFSingleSelectProps<T> | RHFMultiSelectProps<T>;
+interface RHFSelectOverload {
+    displayName: string;
+    <T>(props: RHFSingleSelectProps<T>): JSX.Element;
+    <T>(props: RHFMultiSelectProps<T>): JSX.Element;
+}
+
+/**
+ * A select dropdown component integrated with React Hook Form.
+ *
+ * Supports both single and multiple selection modes with automatic error state display.
+ * Built on the Select component with full React Hook Form integration.
+ *
+ * @example
+ * ```tsx
+ * // Basic single select
+ * <RHFSelect name="country">
+ *   <SelectOption value="us" label="United States" />
+ *   <SelectOption value="uk" label="United Kingdom" />
+ *   <SelectOption value="ca" label="Canada" />
+ * </RHFSelect>
+ *
+ * // Multiple selection
+ * <RHFSelect name="skills" multiple>
+ *   <SelectOption value="js" label="JavaScript" />
+ *   <SelectOption value="ts" label="TypeScript" />
+ *   <SelectOption value="react" label="React" />
+ * </RHFSelect>
+ *
+ * // With custom option styling
+ * <RHFSelect name="priority">
+ *   {['low', 'medium', 'high'].map((priority) => (
+ *     <SelectOption
+ *       key={priority}
+ *       value={priority}
+ *       label={priority.charAt(0).toUpperCase() + priority.slice(1)}
+ *       className={({ selected }) =>
+ *         selected ? "text-blue-600 font-bold" : "text-gray-700"
+ *       }
+ *     />
+ *   ))}
+ * </RHFSelect>
+ *
+ * // With onChange callback
+ * <RHFSelect
+ *   name="category"
+ *   onChange={(value) => {
+ *     console.log('Selected:', value);
+ *     fetchSubcategories(value);
+ *   }}
+ * >
+ *   <SelectOption value="1" label="Category 1" />
+ *   <SelectOption value="2" label="Category 2" />
+ * </RHFSelect>
+ * ```
+ */
+declare const RHFSelect: RHFSelectOverload;
+
+interface TooltipProps extends PropsWithChildren {
+    /**
+     * The content of the tooltip
+     * */
+    content?: string | ReactNode | FC;
+    /**
+     * How long the pointer has to rest on the trigger before the tooltip appears, in ms.
+     *
+     * @default 200
+     * */
+    delayDuration?: number;
+    /**
+     * Classname to apply to the tooltip
+     * */
+    className?: string;
+    /**
+     * Classname to apply to the tooltip trigger
+     * ie. the element that triggers the tooltip to appear
+     * @example
+     *
+     * ```js
+     * <Tooltip content="hello world">
+     *  <Button>Hover me</Button> // <-- This is the tooltip trigger
+     * </Tooltip>
+     * ```
+     * */
+    triggerClassName?: string;
+    /**
+     * Classname to apply to the tooltip arrow
+     * */
+    arrowClassName?: string;
+    /**
+     * Whether to use the child element directly as the trigger.
+     * Use this to avoid invalid button nesting errors when using a button as the trigger.
+     * */
+    triggerAsChild?: boolean;
+    /**
+     * The background color of the tooltip and the arrow pointing to the target
+     * */
+    backgroundColor?: string;
+    /**
+     * The side of the tooltip to display
+     * */
+    placement?: Placement;
+    /**
+     * The offset of the tooltip from the trigger
+     * */
+    sideOffset?: number;
+}
+
+declare const Tooltip: FC<TooltipProps>;
+
+/** Extensible variant map - To allow module augmentation */
+interface TabsVariantMap {
+    underline: unknown;
+    segmented: unknown;
+    soft: unknown;
+}
+/** Extensible size map - To allow module augmentation */
+interface TabsSizeMap {
+    sm: unknown;
+    md: unknown;
+    lg: unknown;
+}
+type TabsOrientation = "horizontal" | "vertical";
+interface TabsProps extends Omit<HTMLAttributes<HTMLDivElement>, "onChange"> {
+    /**
+     * Selected tab. Leave it out to let the component hold the state.
+     * */
+    value?: string;
+    /**
+     * Which tab starts selected when the component holds the state.(Default: the first
+     * tab that is not disabled)
+     * */
+    defaultValue?: string;
+    /**
+     * Called with the value of the tab that was picked.
+     * */
+    onChange?: (value: string) => void;
+    /**
+     * How the selected tab is marked.(Default: 'underline')
+     * */
+    variant?: keyof TabsVariantMap;
+    /**
+     * Tab padding and text size.(Default: 'md')
+     * */
+    size?: keyof TabsSizeMap;
+    /**
+     * Lay the tabs out in a row or a column. A column swaps the arrow keys to up and
+     * down.(Default: 'horizontal')
+     * */
+    orientation?: TabsOrientation;
+    /**
+     * Share the available width between the tabs instead of letting them hug their
+     * labels.(Default: false)
+     * */
+    fullWidth?: boolean;
+    /**
+     * Render as navigation rather than as tabs.
+     *
+     * Tabs swap content on the same page; navigation goes somewhere else. They look the
+     * same but are not the same thing to a screen reader, so this switches the markup:
+     * a `nav` landmark instead of a tablist, `aria-current` instead of `aria-selected`,
+     * and the arrow keys left alone so Tab moves through the links.(Default: 'div')
+     * */
+    as?: "div" | "nav";
+    /**
+     * Keep every panel mounted, so a panel holding form state survives being hidden.
+     * Off by default, which keeps the DOM small.(Default: false)
+     * */
+    keepMounted?: boolean;
+    /**
+     * A `TabList`, the `TabPanel`s, and whatever layout you want around them.
+     * */
+    children?: ReactNode;
+}
+interface TabListProps extends HTMLAttributes<HTMLDivElement> {
+    /**
+     * `Tab` elements.
+     * */
+    children?: ReactNode;
+}
+interface TabProps extends Omit<HTMLAttributes<HTMLElement>, "children"> {
+    /**
+     * Identifies the tab. Matched against the `value` on `Tabs`, and against the
+     * `TabPanel` it reveals.
+     * */
+    value: string;
+    /**
+     * Take the tab out of the keyboard order and stop it being selected.
+     * */
+    disabled?: boolean;
+    /**
+     * Use the child element as the tab instead of rendering a button, so navigation tabs
+     * can be real links. The child receives the id, tab index and aria wiring.
+     *
+     * @example
+     * ```tsx
+     * <Tab value="/settings/profile" asChild>
+     *   <Link href="/settings/profile">Profile</Link>
+     * </Tab>
+     * ```
+     * */
+    asChild?: boolean;
+    /**
+     * What the tab shows. Anything: text, an icon beside text, a badge.
+     * */
+    children?: ReactNode;
+}
+interface TabPanelProps extends HTMLAttributes<HTMLDivElement> {
+    /**
+     * Matched against the `Tab` that reveals this panel.
+     * */
+    value: string;
+    /**
+     * Keep this panel mounted while another tab is selected, overriding `keepMounted`
+     * on `Tabs`. Worth it for a panel holding a half filled form.
+     * */
+    keepMounted?: boolean;
+    /**
+     * The panel contents.
+     * */
+    children?: ReactNode;
+}
+interface TabsContextProps {
+    selectedValue: string | undefined;
+    select: (value: string) => void;
+    keepMounted: boolean;
+    isNav: boolean;
+    orientation: TabsOrientation;
+}
+
+/**
+ * Holds which tab is selected, and the look shared by the tabs and their panels.
+ *
+ * @example
+ * ```tsx
+ * <Tabs defaultValue="profile">
+ *   <TabList>
+ *     <Tab value="profile">Profile</Tab>
+ *     <Tab value="billing">Billing</Tab>
+ *   </TabList>
+ *
+ *   <TabPanel value="profile"><ProfileForm /></TabPanel>
+ *   <TabPanel value="billing"><BillingForm /></TabPanel>
+ * </Tabs>
+ * ```
+ *
+ * @example
+ * As navigation, with the router holding the state and no panels:
+ *
+ * ```tsx
+ * <Tabs as="nav" value={pathname}>
+ *   <TabList>
+ *     <Tab value="/settings/profile" asChild>
+ *       <Link href="/settings/profile">Profile</Link>
+ *     </Tab>
+ *   </TabList>
+ * </Tabs>
+ * ```
+ */
+declare const Tabs: {
+    ({ value, defaultValue, onChange, variant, size, orientation, fullWidth, as, keepMounted, className, children, ...rest }: TabsProps): react_jsx_runtime.JSX.Element;
+    displayName: string;
+};
+
+/**
+ * The strip the tabs sit in. Owns the keyboard navigation and keeps the selected tab in
+ * view when there are more tabs than room.
+ *
+ * Put it wherever the layout wants it — a sticky header, say — and the panels can live
+ * somewhere else entirely.
+ */
+declare const TabList: {
+    ({ className, children, ...rest }: TabListProps): react_jsx_runtime.JSX.Element;
+    displayName: string;
+};
+
+/**
+ * One tab. Whatever you put inside is what the tab shows.
+ *
+ * @example
+ * ```tsx
+ * <Tab value="profile">Profile</Tab>
+ * <Tab value="alerts"><BellIcon /> Alerts <Badge color="error">7</Badge></Tab>
+ * ```
+ *
+ * @example
+ * A real link, for navigation tabs:
+ *
+ * ```tsx
+ * <Tab value="/settings/profile" asChild>
+ *   <Link href="/settings/profile">Profile</Link>
+ * </Tab>
+ * ```
+ */
+declare const Tab: {
+    ({ value, disabled, asChild, className, children, ...rest }: TabProps): react_jsx_runtime.JSX.Element;
+    displayName: string;
+};
+
+/**
+ * The panel a tab reveals, matched to it by `value`.
+ *
+ * Hidden panels unmount by default, so a form inside one loses its state. Pass
+ * `keepMounted` here, or on `Tabs` for all of them, to hide rather than unmount.
+ *
+ * @example
+ * ```tsx
+ * <TabPanel value="profile">
+ *   <ProfileForm />
+ * </TabPanel>
+ * ```
+ */
+declare const TabPanel: {
+    ({ value, keepMounted, className, children, ...rest }: TabPanelProps): react_jsx_runtime.JSX.Element | null;
+    displayName: string;
+};
+
+declare const useTabs: () => TabsContextProps;
+
+/** Extensible variant map - To allow module augmentation */
+interface AccordionVariantMap {
+    separated: unknown;
+    contained: unknown;
+    plain: unknown;
+}
+/** Extensible size map - To allow module augmentation */
+interface AccordionSizeMap {
+    sm: unknown;
+    md: unknown;
+    lg: unknown;
+}
+type AccordionValue = string | string[];
+interface AccordionProps extends Omit<HTMLAttributes<HTMLDivElement>, "onChange"> {
+    /**
+     * Which items are open. A string on its own, or an array when `multiple` is set.
+     * Leave it out to let the component hold the state.
+     * */
+    value?: AccordionValue;
+    /**
+     * Which items start open when the component holds the state.
+     * */
+    defaultValue?: AccordionValue;
+    /**
+     * Called with what is open now: a string, or an array when `multiple` is set. The
+     * string is empty when the last open item closes.
+     * */
+    onChange?: (value: AccordionValue) => void;
+    /**
+     * Let several items be open at once. One at a time by default, which is what a FAQ
+     * usually wants.(Default: false)
+     * */
+    multiple?: boolean;
+    /**
+     * Whether the open item can be closed, leaving nothing open. Turn it off to keep one
+     * item open at all times.(Default: true)
+     * */
+    collapsible?: boolean;
+    /**
+     * How the items are framed.(Default: 'plain')
+     * */
+    variant?: keyof AccordionVariantMap;
+    /**
+     * Header padding and text size.(Default: 'md')
+     * */
+    size?: keyof AccordionSizeMap;
+    /**
+     * Keep closed panels in the DOM, hidden rather than unmounted.
+     *
+     * On by default, because it is what makes the open and close animate, and it keeps a
+     * half filled form alive while its panel is shut. Turn it off when the panels are
+     * expensive to render, and accept that closing then happens without the
+     * animation.(Default: true)
+     * */
+    keepMounted?: boolean;
+    /**
+     * `AccordionItem` elements.
+     * */
+    children?: ReactNode;
+}
+interface AccordionItemProps extends HTMLAttributes<HTMLDivElement> {
+    /**
+     * Identifies the item. This is what `value` and `onChange` report.
+     * */
+    value: string;
+    /**
+     * Stop the item being opened or closed, and take its header out of the keyboard
+     * order.
+     * */
+    disabled?: boolean;
+    /**
+     * An `AccordionHeader` and an `AccordionPanel`.
+     * */
+    children?: ReactNode;
+}
+interface AccordionHeaderProps extends HTMLAttributes<HTMLButtonElement> {
+    /**
+     * Hide the chevron that turns as the item opens.(Default: false)
+     * */
+    hideIcon?: boolean;
+    /**
+     * Replace the chevron with something of your own.
+     * */
+    icon?: ReactNode;
+    /**
+     * What the header shows.
+     * */
+    children?: ReactNode;
+}
+interface AccordionPanelProps extends HTMLAttributes<HTMLDivElement> {
+    /**
+     * Keep this panel in the DOM while it is closed, overriding `keepMounted` on
+     * `Accordion`.
+     * */
+    keepMounted?: boolean;
+    /**
+     * The panel contents.
+     * */
+    children?: ReactNode;
+}
+interface AccordionContextProps {
+    openValues: string[];
+    toggle: (value: string) => void;
+    keepMounted: boolean;
+}
+interface AccordionItemContextProps {
+    value: string;
+    disabled: boolean;
+    open: boolean;
+}
+
+/**
+ * A stack of items that open one at a time, or several at once.
+ *
+ * @example
+ * ```tsx
+ * <Accordion defaultValue="shipping">
+ *   <AccordionItem value="shipping">
+ *     <AccordionHeader>Shipping</AccordionHeader>
+ *     <AccordionPanel>Ships in 2 to 3 working days.</AccordionPanel>
+ *   </AccordionItem>
+ * </Accordion>
+ * ```
+ */
+declare const Accordion: {
+    ({ value, defaultValue, onChange, multiple, collapsible, variant, size, keepMounted, className, children, ...rest }: AccordionProps): react_jsx_runtime.JSX.Element;
+    displayName: string;
+};
+
+/**
+ * One item: a header and the panel it opens.
+ */
+declare const AccordionItem: {
+    ({ value, disabled, className, children, ...rest }: AccordionItemProps): react_jsx_runtime.JSX.Element;
+    displayName: string;
+};
+
+/**
+ * The button that opens and closes its item. Whatever you put inside is what it shows.
+ *
+ * @example
+ * ```tsx
+ * <AccordionHeader>
+ *   <TruckIcon /> Shipping <Badge color="info">free</Badge>
+ * </AccordionHeader>
+ * ```
+ */
+declare const AccordionHeader: {
+    ({ hideIcon, icon, className, children, onClick, ...rest }: AccordionHeaderProps): react_jsx_runtime.JSX.Element;
+    displayName: string;
+};
+
+/**
+ * What an item reveals.
+ *
+ * The open and close is animated with a CSS grid row rather than a height, so it runs to
+ * the content's real height without measuring anything. That needs the panel to stay in
+ * the DOM, which is why `keepMounted` is on by default.
+ */
+declare const AccordionPanel: {
+    ({ keepMounted, className, children, ...rest }: AccordionPanelProps): react_jsx_runtime.JSX.Element | null;
+    displayName: string;
+};
+
+declare const useAccordion: () => AccordionContextProps;
+declare const useAccordionItem: () => AccordionItemContextProps;
+
+/** Extensible color map - To allow module augmentation */
+interface AlertColorMap {
+    error: unknown;
+    warning: unknown;
+    info: unknown;
+    success: unknown;
+    default: unknown;
+}
+interface AlertProps extends Omit<HTMLAttributes<HTMLDivElement>, "title"> {
+    /**
+     * What the alert means. Drives the accent colour.(Default: 'default')
+     *
+     * Named `color` to match `Button` and `Badge`, where `variant` is the visual
+     * treatment rather than the meaning.
+     * */
+    color?: keyof AlertColorMap;
+    /**
+     * Determines if the alert should be condensed.(Default: false)
+     * */
+    condensed?: boolean;
+    /**
+     * Main message to display in the alert.
+     */
+    title: ReactNode | FC;
+    /**
+     * Extra description to display in the alert.
+     */
+    description?: ReactNode | FC;
+    /**
+     * Callback function to handle the remove event.
+     */
+    onRemove?: () => void;
+    /**
+     * Custom icon to display in the alert.
+     * If provided, iconClassName will be ignored.
+     */
+    icon?: ReactNode | FC;
+    /**
+     * Custom class name for the icon.
+     * Only used if icon is not provided.
+     */
+    iconClassName?: string;
+}
+
+/**
+ * An alert component for displaying important messages with different severity levels.
+ *
+ * Supports multiple colours (error, success, warning, info), optional descriptions,
+ * custom icons, and dismissal functionality. The `condensed` prop reduces vertical padding
+ * for a more compact appearance.
+ *
+ * @example
+ * ```tsx
+ * // Basic alert
+ * <Alert title="This is an alert message" />
+ *
+ * // Different colours
+ * <Alert color="success" title="Success!" />
+ * <Alert color="warning" title="Warning!" />
+ * <Alert color="info" title="Information" />
+ *
+ * // Condensed style
+ * <Alert color="success" condensed title="This is a success message" />
+ *
+ * // With description and remove button
+ * <Alert
+ *   color="warning"
+ *   title="Warning!"
+ *   description="This is a detailed warning message with more context."
+ *   onRemove={() => console.log('Alert dismissed')}
+ * />
+ *
+ * // With custom icon
+ * <Alert
+ *   color="info"
+ *   title="Custom Icon"
+ *   icon={<CustomIcon />}
+ * />
+ * ```
+ */
+declare const Alert: FC<AlertProps>;
+
+/** Extensible size map - To allow module augmentation */
+interface AvatarSizeMap {
+    xs: unknown;
+    sm: unknown;
+    md: unknown;
+    lg: unknown;
+    xl: unknown;
+}
+/** Extensible shape map - To allow module augmentation */
+interface AvatarShapeMap {
+    circle: unknown;
+    rounded: unknown;
+    square: unknown;
+}
+/** Extensible color map - To allow module augmentation */
+interface AvatarColorMap {
+    default: unknown;
+    primary: unknown;
+    success: unknown;
+    error: unknown;
+    warning: unknown;
+    info: unknown;
+}
+interface AvatarProps extends HTMLAttributes<HTMLSpanElement> {
+    /**
+     * Image to show. When it is missing or fails to load, the fallback is shown instead.
+     * */
+    src?: string;
+    /**
+     * Alternative text for the image. Falls back to `name`.
+     * */
+    alt?: string;
+    /**
+     * Who this is. Its initials are drawn when there is no image, and it labels the avatar
+     * for a screen reader.
+     * */
+    name?: string;
+    /**
+     * What to draw instead of the initials when there is no image.
+     * */
+    fallback?: ReactNode | FC;
+    /**
+     * Avatar size. Taken from the surrounding `AvatarGroup` when it is not set
+     * here.(Default: 'md')
+     * */
+    size?: keyof AvatarSizeMap;
+    /**
+     * Corner treatment. Taken from the surrounding `AvatarGroup` when it is not set
+     * here.(Default: 'circle')
+     * */
+    shape?: keyof AvatarShapeMap;
+    /**
+     * Accent behind the fallback.(Default: 'default')
+     * */
+    color?: keyof AvatarColorMap;
+}
+interface AvatarGroupOverflow {
+    /**
+     * The avatars past `max`, as the props they were given, in the order they were given.
+     * Read whatever you need off them — `name`, `src`, your own extras — and render it
+     * however you like. `avatars.length` is the number behind the count.
+     * */
+    avatars: AvatarProps[];
+}
+interface AvatarGroupProps extends HTMLAttributes<HTMLDivElement> {
+    /**
+     * How many avatars to show before the rest are counted. Leave it out to show them all.
+     * */
+    max?: number;
+    /**
+     * Size for every avatar in the group, and for the overflow count.(Default: 'md')
+     * */
+    size?: keyof AvatarSizeMap;
+    /**
+     * Corner treatment for every avatar in the group.(Default: 'circle')
+     * */
+    shape?: keyof AvatarShapeMap;
+    /**
+     * Lift each avatar on hover, naming it in an overlay, and open the overflow list from
+     * the count. Only avatars with a `name` are named.(Default: true)
+     * */
+    interactive?: boolean;
+    /**
+     * What fills the overlay behind the `+2` count, which opens on hover. Leave it out for
+     * the list of names. The overlay itself is not yours to place — only what is inside it.
+     * */
+    renderOverflow?: (overflow: AvatarGroupOverflow) => ReactNode;
+    /**
+     * The avatars.
+     * */
+    children?: ReactNode;
+}
+
+/**
+ * A picture of someone, falling back to their initials.
+ *
+ * @example
+ * ```tsx
+ * <Avatar name="Ada Lovelace" src={user.image} />
+ * <Avatar name="Ada Lovelace" size="lg" />
+ * <Avatar shape="rounded" fallback={<BotIcon />} />
+ * ```
+ */
+declare const Avatar: react.ForwardRefExoticComponent<AvatarProps & react.RefAttributes<HTMLSpanElement>>;
+
+/**
+ * Overlapping avatars, with the rest counted once there are more than `max`.
+ *
+ * `size` and `shape` set here apply to every avatar inside, so the overlap lines up
+ * without repeating them. Each avatar sits on top of the one after it, so the children are
+ * handed over reversed and the styles lay them out right to left.
+ *
+ * @example
+ * ```tsx
+ * <AvatarGroup max={3}>
+ *   <Avatar name="Ada Lovelace" />
+ *   <Avatar name="Grace Hopper" />
+ *   <Avatar name="Alan Turing" />
+ *   <Avatar name="Katherine Johnson" />
+ * </AvatarGroup>
+ * ```
+ *
+ * @example
+ * Your own contents behind the count:
+ *
+ * ```tsx
+ * <AvatarGroup
+ *   max={3}
+ *   renderOverflow={({ avatars }) => (
+ *     <ul>
+ *       {avatars.map((avatar) => (
+ *         <li key={avatar.name}>{avatar.name}</li>
+ *       ))}
+ *     </ul>
+ *   )}>
+ *   …
+ * </AvatarGroup>
+ * ```
+ */
+declare const AvatarGroup: {
+    ({ max, size, shape, interactive, renderOverflow, className, children, ...rest }: AvatarGroupProps): react_jsx_runtime.JSX.Element;
+    displayName: string;
+};
+
+/** Extensible variant map - To allow module augmentation */
+interface BadgeVariantMap {
+    filled: unknown;
+    soft: unknown;
+    outlined: unknown;
+}
+/** Extensible color map - To allow module augmentation */
+interface BadgeColorMap {
+    default: unknown;
+    primary: unknown;
+    success: unknown;
+    error: unknown;
+    warning: unknown;
+    info: unknown;
+}
+/** Extensible size map - To allow module augmentation */
+interface BadgeSizeMap {
+    sm: unknown;
+    md: unknown;
+    lg: unknown;
+}
+/** Extensible shape map - To allow module augmentation */
+interface BadgeShapeMap {
+    rounded: unknown;
+    pill: unknown;
+    square: unknown;
+}
+interface BadgeProps extends HTMLAttributes<HTMLSpanElement> {
+    /**
+     * How the badge is filled.(Default: 'soft')
+     * */
+    variant?: keyof BadgeVariantMap;
+    /**
+     * What the badge means. Drives the accent colour.(Default: 'default')
+     * */
+    color?: keyof BadgeColorMap;
+    /**
+     * Badge size.(Default: 'md')
+     * */
+    size?: keyof BadgeSizeMap;
+    /**
+     * Corner treatment.(Default: 'rounded')
+     * */
+    shape?: keyof BadgeShapeMap;
+    /**
+     * Show a leading status dot. It inherits the badge colour and scales with `size`.
+     * Ignored when `icon` is set.(Default: false)
+     * */
+    dot?: boolean;
+    /**
+     * Custom leading visual, rendered as given. Style it where you define it.
+     * Takes precedence over `dot`.
+     * */
+    icon?: ReactNode | FC;
+}
+
+/**
+ * A small inline label for status, counts and categories.
+ *
+ * Two independent axes: `variant` is how it is filled, `color` is what it means. So a
+ * success badge can be solid, tinted or outlined without changing what it says.
+ *
+ * @example
+ * ```tsx
+ * <Badge>Draft</Badge>
+ * <Badge color="success">Active</Badge>
+ * <Badge variant="filled" color="error">Failed</Badge>
+ * <Badge variant="outlined" color="info" size="sm">Beta</Badge>
+ *
+ * // Status dot, custom icon, shapes
+ * <Badge color="success" dot>Live</Badge>
+ * <Badge color="primary" icon={<StarIcon />}>Featured</Badge>
+ * <Badge><Avatar size="xs" />Alice</Badge>
+ * <Badge shape="pill" color="primary">New</Badge>
+ * <Badge shape="square">v2.0</Badge>
+ * ```
+ */
+declare const Badge: react.ForwardRefExoticComponent<BadgeProps & react.RefAttributes<HTMLSpanElement>>;
 
-interface RHFSingleSelectProps<T> extends Omit<SingleSelectProps<T>, "value" | "onChange">, RHFBaseProps {
-    onChange?: (value: T) => void;
+/** Extensible shape map - To allow module augmentation */
+interface SkeletonShapeMap {
+    text: unknown;
+    rounded: unknown;
+    circle: unknown;
 }
-interface RHFMultiSelectProps<T> extends Omit<MultiSelectProps<T>, "value" | "onChange">, RHFBaseProps {
-    onChange?: (value: T[]) => void;
+/** Extensible animation map - To allow module augmentation */
+interface SkeletonAnimationMap {
+    pulse: unknown;
+    wave: unknown;
+    none: unknown;
 }
-type RHFSelectProps<T> = RHFSingleSelectProps<T> | RHFMultiSelectProps<T>;
-interface RHFSelectOverload {
-    displayName: string;
-    <T>(props: RHFSingleSelectProps<T>): JSX.Element;
-    <T>(props: RHFMultiSelectProps<T>): JSX.Element;
+interface SkeletonProps extends HTMLAttributes<HTMLDivElement> {
+    /**
+     * The outline of the placeholder.(Default: 'text')
+     * */
+    shape?: keyof SkeletonShapeMap;
+    /**
+     * How it animates while it waits. Dropped under `prefers-reduced-motion`.(Default: 'pulse')
+     * */
+    animation?: keyof SkeletonAnimationMap;
+    /**
+     * How many stacked lines to draw, for a paragraph placeholder. The last line is drawn
+     * short so the block reads as text. Only applies to the `text` shape.(Default: 1)
+     * */
+    lines?: number;
+    /**
+     * While true the placeholder is drawn. Turn it off and `children` render in its
+     * place.(Default: true)
+     * */
+    loading?: boolean;
+    /**
+     * What replaces the placeholder once `loading` is false. Never rendered while loading,
+     * so it is safe to read data that has not arrived yet.
+     * */
+    children?: ReactNode;
 }
 
 /**
- * A select dropdown component integrated with React Hook Form.
+ * A placeholder that holds the space content will take while it loads.
  *
- * Supports both single and multiple selection modes with automatic error state display.
- * Built on the Select component with full React Hook Form integration.
+ * Size it with `className` the way you would size the real thing, so the page does not
+ * move when the content arrives.
  *
  * @example
  * ```tsx
- * // Basic single select
- * <RHFSelect name="country">
- *   <SelectOption value="us" label="United States" />
- *   <SelectOption value="uk" label="United Kingdom" />
- *   <SelectOption value="ca" label="Canada" />
- * </RHFSelect>
- *
- * // Multiple selection
- * <RHFSelect name="skills" multiple>
- *   <SelectOption value="js" label="JavaScript" />
- *   <SelectOption value="ts" label="TypeScript" />
- *   <SelectOption value="react" label="React" />
- * </RHFSelect>
+ * <Skeleton />
+ * <Skeleton lines={3} />
+ * <Skeleton shape="circle" className="size-10" />
+ * <Skeleton shape="rounded" className="h-32 w-full" />
+ * ```
  *
- * // With custom option styling
- * <RHFSelect name="priority">
- *   {['low', 'medium', 'high'].map((priority) => (
- *     <SelectOption
- *       key={priority}
- *       value={priority}
- *       label={priority.charAt(0).toUpperCase() + priority.slice(1)}
- *       className={({ selected }) =>
- *         selected ? "text-blue-600 font-bold" : "text-gray-700"
- *       }
- *     />
- *   ))}
- * </RHFSelect>
+ * @example
+ * Wrapping the real thing, so there is no ternary at the call site:
  *
- * // With onChange callback
- * <RHFSelect
- *   name="category"
- *   onChange={(value) => {
- *     console.log('Selected:', value);
- *     fetchSubcategories(value);
- *   }}
- * >
- *   <SelectOption value="1" label="Category 1" />
- *   <SelectOption value="2" label="Category 2" />
- * </RHFSelect>
+ * ```tsx
+ * <Skeleton loading={isLoading} shape="circle" className="size-10">
+ *   <Avatar src={user.image} />
+ * </Skeleton>
  * ```
  */
-declare const RHFSelect: RHFSelectOverload;
+declare const Skeleton: react.ForwardRefExoticComponent<SkeletonProps & react.RefAttributes<HTMLDivElement>>;
 
-interface TooltipProps extends PropsWithChildren {
+/** Extensible size map - To allow module augmentation */
+interface ProgressSizeMap {
+    sm: unknown;
+    md: unknown;
+    lg: unknown;
+}
+/** Extensible color map - To allow module augmentation */
+interface ProgressColorMap {
+    default: unknown;
+    primary: unknown;
+    success: unknown;
+    error: unknown;
+    warning: unknown;
+    info: unknown;
+}
+interface ProgressLabel {
+    /** How far along, 0 to 100, rounded to whole numbers. */
+    percent: number;
+    /** The value as given, clamped into range. */
+    value: number;
+    /** What `value` is measured against. */
+    max: number;
+}
+interface ProgressProps extends HTMLAttributes<HTMLDivElement> {
     /**
-     * The content of the tooltip
+     * How far along. Leave it out when you do not know, and the bar runs on its own until
+     * you do.
      * */
-    content?: string | ReactNode | FC;
+    value?: number;
     /**
-     * The duration of the delay before the tooltip appears
+     * What `value` is measured against, so `value` reads as a percentage unless you say
+     * otherwise.(Default: 100)
      * */
-    delayDuration?: number;
+    max?: number;
     /**
-     * Classname to apply to the tooltip
+     * What the bar means. Drives the accent colour.(Default: 'primary')
      * */
-    className?: string;
+    color?: keyof ProgressColorMap;
     /**
-     * Classname to apply to the tooltip trigger
-     * ie. the element that triggers the tooltip to appear
-     * @example
-     *
-     * ```js
-     * <Tooltip content="hello world">
-     *  <Button>Hover me</Button> // <-- This is the tooltip trigger
-     * </Tooltip>
-     * ```
+     * Bar thickness.(Default: 'md')
      * */
-    triggerClassName?: string;
+    size?: keyof ProgressSizeMap;
     /**
-     * Classname to apply to the tooltip arrow
+     * Text above the bar. A function is called with how far along it is, and only when there
+     * is a value to report; a plain node shows either way.
      * */
-    arrowClassName?: string;
+    label?: ReactNode | ((progress: ProgressLabel) => ReactNode);
+}
+
+/**
+ * How far along something is.
+ *
+ * @example
+ * ```tsx
+ * <Progress value={40} />
+ * <Progress value={3} max={7} />
+ * <Progress />
+ * <Progress value={100} color="success" size="lg" />
+ * <Progress value={40} label={({ percent }) => `${percent}%`} />
+ * ```
+ */
+declare const Progress: react.ForwardRefExoticComponent<ProgressProps & react.RefAttributes<HTMLDivElement>>;
+
+/** Extensible size map - To allow module augmentation */
+interface BreadcrumbSizeMap {
+    sm: unknown;
+    md: unknown;
+    lg: unknown;
+}
+interface BreadcrumbProps extends Omit<HTMLAttributes<HTMLElement>, "children"> {
+    /** The crumbs, in order. */
+    children?: ReactNode;
     /**
-     * Whether to use the child element directly as the trigger.
-     * Use this to avoid invalid button nesting errors when using a button as the trigger.
+     * What goes between the crumbs. A chevron when it is left out.
      * */
-    triggerAsChild?: boolean;
+    separator?: ReactNode;
     /**
-     * The background color of the tooltip and the arrow pointing to the target
+     * How many crumbs to show before the middle is folded away behind an ellipsis, which
+     * opens them as a list. The first and the last are always kept. Leave it out to show
+     * them all.
      * */
-    backgroundColor?: string;
+    maxItems?: number;
     /**
-     * The side of the tooltip to display
+     * How many to keep at the end when the middle is folded away.(Default: 1)
      * */
-    placement?: Placement;
+    itemsAfterCollapse?: number;
     /**
-     * The offset of the tooltip from the trigger
+     * How many to keep at the start when the middle is folded away.(Default: 1)
      * */
-    sideOffset?: number;
+    itemsBeforeCollapse?: number;
+    /** What the ellipsis is called, for a screen reader.(Default: 'Show the rest') */
+    expandLabel?: string;
+    /** Where the list of folded crumbs opens.(Default: 'bottom-start') */
+    menuPlacement?: Placement;
+    /** Extra class for that list. */
+    menuClassName?: string;
+    /** What the whole trail is called.(Default: 'Breadcrumb') */
+    "aria-label"?: string;
+    size?: keyof BreadcrumbSizeMap;
+    className?: string;
+}
+interface BreadcrumbItemProps extends Omit<AnchorHTMLAttributes<HTMLAnchorElement>, "children"> {
+    children?: ReactNode;
+    /**
+     * Where it goes, as a plain anchor. That reloads the page, so for client side routing
+     * reach for `asChild` with your own link, or give the crumb an `onClick`.
+     * */
+    href?: string;
+    /**
+     * Whether this is the page you are on. The last crumb takes this for itself, unless
+     * another one claims it — so setting it here moves it rather than adding a second.
+     * */
+    current?: boolean;
+    /**
+     * Hand the crumb to your own element, a router link most often, rather than rendering an
+     * anchor. It keeps its own class name, with the crumb's added.
+     *
+     * This is the one to use with a router: an `href` is a plain anchor and reloads.
+     * */
+    asChild?: boolean;
 }
 
-declare const Tooltip: FC<TooltipProps>;
+/**
+ * The trail of pages above the one you are on.
+ *
+ * @example
+ * ```tsx
+ * <Breadcrumb>
+ *   <BreadcrumbItem href="/">Home</BreadcrumbItem>
+ *   <BreadcrumbItem href="/settings">Settings</BreadcrumbItem>
+ *   <BreadcrumbItem>Profile</BreadcrumbItem>
+ * </Breadcrumb>
+ * ```
+ *
+ * @example
+ * A deep trail, with the middle folded away until it is asked for:
+ *
+ * ```tsx
+ * <Breadcrumb maxItems={3}>…</Breadcrumb>
+ * ```
+ */
+declare const Breadcrumb: {
+    ({ children, separator, maxItems, itemsBeforeCollapse, itemsAfterCollapse, expandLabel, menuPlacement, size, className, menuClassName, "aria-label": ariaLabel, ...rest }: BreadcrumbProps): react_jsx_runtime.JSX.Element;
+    displayName: string;
+};
 
-/** Extensible variant map - To allow module augmentation */
-interface AlertVariantMap {
-    error: unknown;
-    warning: unknown;
-    info: unknown;
-    success: unknown;
-    default: unknown;
+/**
+ * One crumb.
+ *
+ * The last one is the page you are on, so it is drawn as text rather than a link and
+ * carries `aria-current`. Set `current` when the last crumb is not where you are.
+ *
+ * `href` renders a plain anchor, which reloads the page. For client side routing hand the
+ * crumb your own link with `asChild`, or give it an `onClick` and it becomes a button.
+ *
+ * @example
+ * ```tsx
+ * <BreadcrumbItem href="/settings">Settings</BreadcrumbItem>
+ * <BreadcrumbItem>Profile</BreadcrumbItem>
+ *
+ * <BreadcrumbItem asChild>
+ *   <Link href="/settings">Settings</Link>
+ * </BreadcrumbItem>
+ *
+ * <BreadcrumbItem onClick={() => router.push("/settings")}>Settings</BreadcrumbItem>
+ * ```
+ */
+declare const BreadcrumbItem: {
+    ({ children, href, current, asChild, className, onClick, ...rest }: BreadcrumbItemProps): react_jsx_runtime.JSX.Element;
+    displayName: string;
+};
+
+/** Extensible size map - To allow module augmentation */
+interface StepperSizeMap {
+    sm: unknown;
+    md: unknown;
+    lg: unknown;
 }
-interface AlertProps extends Omit<HTMLAttributes<HTMLDivElement>, "title"> {
+/** Extensible orientation map - To allow module augmentation */
+interface StepperOrientationMap {
+    horizontal: unknown;
+    vertical: unknown;
+}
+/**
+ * Where a step stands. Worked out from where it sits unless the step says otherwise.
+ */
+type StepStatus = "complete" | "current" | "upcoming" | "error";
+interface StepperProps extends Omit<HTMLAttributes<HTMLElement>, "onChange"> {
+    /** Which step you are on, by its `value`. */
+    value: string;
     /**
-     * Alert variant to display.(Default: 'error')
+     * Called when a step is picked. Leaving it out makes the stepper something to read
+     * rather than something to use.
      * */
-    variant?: keyof AlertVariantMap;
+    onChange?: (value: string) => void;
+    /** The steps, in order. */
+    children?: ReactNode;
     /**
-     * Determines if the alert should be condensed.(Default: false)
+     * Whether the steps have to be taken in order. While true only the ones already done can
+     * be gone back to; turn it off when any step is reachable.(Default: true)
      * */
-    condensed?: boolean;
-    /**
-     * Main message to display in the alert.
-     */
-    title: ReactNode | FC;
-    /**
-     * Extra description to display in the alert.
-     */
-    description?: ReactNode | FC;
+    linear?: boolean;
+    /** Which way the steps run.(Default: 'horizontal') */
+    orientation?: keyof StepperOrientationMap;
     /**
-     * Callback function to handle the remove event.
-     */
-    onRemove?: () => void;
+     * What goes between the steps. A line that fills as you go, unless you give something
+     * else — an arrow, a dot, whatever suits.
+     * */
+    separator?: ReactNode;
+    size?: keyof StepperSizeMap;
+    className?: string;
+    /** What the whole thing is called.(Default: 'Progress') */
+    "aria-label"?: string;
+}
+/** Everything a step knows about itself, for drawing one yourself. */
+interface StepRenderArgs {
+    value: string;
+    /** Which number it is, counting from one. */
+    index: number;
+    status: StepStatus;
+    /** Whether picking it would go anywhere. */
+    reachable: boolean;
+    disabled: boolean;
+    /** Go to this step. Does nothing when it cannot be reached. */
+    select: () => void;
+    /** What was passed as the step's name and second line. */
+    children: ReactNode;
+    description: ReactNode;
+}
+interface StepProps extends Omit<HTMLAttributes<HTMLButtonElement>, "children"> {
+    /** What `value` and `onChange` deal in. */
+    value: string;
+    /** The step's name. */
+    children?: ReactNode;
+    /** A second line under the name. */
+    description?: ReactNode;
     /**
-     * Custom icon to display in the alert.
-     * If provided, iconClassName will be ignored.
-     */
-    icon?: ReactNode | FC;
+     * Where this step stands. Worked out from where it sits against the current one unless
+     * it is given, which is how a step already passed can still show an error.
+     * */
+    status?: StepStatus;
+    /** What goes in the marker. The number, or a tick once it is done. */
+    icon?: ReactNode;
+    /** Cannot be picked, whatever else is true. */
+    disabled?: boolean;
     /**
-     * Custom class name for the icon.
-     * Only used if icon is not provided.
-     */
-    iconClassName?: string;
+     * Draw the step yourself. Everything it knows is handed over and nothing of its own is
+     * rendered — no marker, no classes, no styles to work around.
+     *
+     * The list item and the joint to the next step stay, so it is still a list and still
+     * joined up. Reach for this when the design is not a marker beside a label; the props
+     * above are quicker when it is.
+     *
+     * @example
+     * ```tsx
+     * <Step
+     *   value="dev"
+     *   render={({ index, status, select }) => (
+     *     <button onClick={select} data-current={status === "current"}>
+     *       <span className="chip">{index}</span> Dev
+     *     </button>
+     *   )}
+     * />
+     * ```
+     * */
+    render?: (step: StepRenderArgs) => ReactNode;
 }
 
 /**
- * An alert component for displaying important messages with different severity levels.
+ * How far along a set of steps you are.
  *
- * Supports multiple variants (error, success, warning, info), optional descriptions,
- * custom icons, and dismissal functionality. The `condensed` prop reduces vertical padding
- * for a more compact appearance.
+ * It shows progress and takes you back through it; what each step holds is yours to render.
+ * A wizard is usually one form with fields shown and hidden, rather than separate panels —
+ * `Tabs` is the component for those.
  *
  * @example
  * ```tsx
- * // Basic alert
- * <Alert title="This is an alert message" />
- *
- * // Different variants
- * <Alert variant="success" title="Success!" />
- * <Alert variant="warning" title="Warning!" />
- * <Alert variant="info" title="Information" />
- *
- * // Condensed style
- * <Alert variant="success" condensed title="This is a success message" />
+ * <Stepper value={step} onChange={setStep}>
+ *   <Step value="account">Account</Step>
+ *   <Step value="payment" description="Card or bank">Payment</Step>
+ *   <Step value="done">Confirm</Step>
+ * </Stepper>
+ * ```
+ */
+declare const Stepper: {
+    ({ value, onChange, children, linear, orientation, separator, size, className, "aria-label": ariaLabel, ...rest }: StepperProps): react_jsx_runtime.JSX.Element;
+    displayName: string;
+};
+
+/**
+ * One step.
  *
- * // With description and remove button
- * <Alert
- *   variant="warning"
- *   title="Warning!"
- *   description="This is a detailed warning message with more context."
- *   onRemove={() => console.log('Alert dismissed')}
- * />
+ * Where it stands comes from where it sits against the current one, so a straight run of
+ * steps needs nothing said. `status` overrides it, which is how a step already passed can
+ * show an error rather than a tick.
  *
- * // With custom icon
- * <Alert
- *   variant="info"
- *   title="Custom Icon"
- *   icon={<CustomIcon />}
- * />
+ * @example
+ * ```tsx
+ * <Step value="account">Account</Step>
+ * <Step value="payment" description="Card or bank">Payment</Step>
+ * <Step value="review" status="error">Review</Step>
  * ```
  */
-declare const Alert: FC<AlertProps>;
+declare const Step: {
+    ({ value, children, description, status, icon, disabled, render, className, onClick, ...rest }: StepProps): react_jsx_runtime.JSX.Element;
+    displayName: string;
+};
 
 interface PaginationProps {
     /**
@@ -3106,12 +4912,138 @@ interface PaginationProps {
  */
 declare const Pagination: FC<PaginationProps>;
 
+interface PopoverProps extends Omit<HTMLAttributes<HTMLDivElement>, "onChange"> {
+    /**
+     * Whether the popover is showing. Leave it out to let the component hold the state.
+     * */
+    open?: boolean;
+    /**
+     * Whether it starts open when the component holds the state.(Default: false)
+     * */
+    defaultOpen?: boolean;
+    /**
+     * Called whenever the popover opens or closes.
+     * */
+    onOpenChange?: (open: boolean) => void;
+    /**
+     * Where the content sits against the trigger. It flips when there is no
+     * room.(Default: 'bottom-start')
+     * */
+    placement?: Placement;
+    /**
+     * The gap between the trigger and the nearest part of the popover, in pixels. With
+     * `arrow` on that is the arrow's tip rather than the panel edge, so the gap looks the
+     * same either way.(Default: 6)
+     * */
+    offset?: number;
+    /**
+     * Positioning strategy, for the rare case where absolute does not work.
+     * */
+    floatingStrategy?: Strategy;
+    /**
+     * Close on Escape.(Default: true)
+     * */
+    dismissOnEscape?: boolean;
+    /**
+     * Close when something outside is clicked.(Default: true)
+     * */
+    dismissOnOutsideClick?: boolean;
+    /**
+     * Show a small arrow pointing at the trigger.(Default: false)
+     * */
+    arrow?: boolean;
+    /**
+     * Stop the popover opening at all.
+     * */
+    disabled?: boolean;
+    /**
+     * A `PopoverTrigger` and a `PopoverContent`.
+     * */
+    children?: ReactNode;
+}
+interface PopoverTriggerProps {
+    /**
+     * The element that opens the popover. It is used as the trigger itself rather than
+     * wrapped, so it keeps its own tag, styles and handlers.
+     * */
+    children: ReactNode;
+}
+interface PopoverContentProps extends HTMLAttributes<HTMLDivElement> {
+    /**
+     * What the popover shows.
+     * */
+    children?: ReactNode;
+}
+interface PopoverContextProps {
+    open: boolean;
+    setOpen: (open: boolean) => void;
+    close: () => void;
+    toggle: () => void;
+    disabled: boolean;
+    arrow: boolean;
+    dismissOnEscape: boolean;
+    floating: any;
+    arrowRef: React.RefObject<SVGSVGElement | null>;
+    /** Set by `PopoverTrigger`, so focus can be handed back when the popover closes. */
+    setTriggerNode: (node: HTMLElement | null) => void;
+}
+
+declare const Popover: {
+    ({ open: controlledOpen, defaultOpen, onOpenChange, placement, offset, floatingStrategy, dismissOnEscape, dismissOnOutsideClick, arrow, disabled, className, children, ...rest }: PopoverProps): react_jsx_runtime.JSX.Element;
+    displayName: string;
+};
+
+/**
+ * Whatever opens the popover. The child is used as the trigger itself rather than
+ * wrapped, so it keeps its own tag, styling and handlers.
+ *
+ * @example
+ * ```tsx
+ * <PopoverTrigger>
+ *   <Button>Filters</Button>
+ * </PopoverTrigger>
+ * ```
+ */
+declare const PopoverTrigger: {
+    ({ children }: PopoverTriggerProps): react_jsx_runtime.JSX.Element;
+    displayName: string;
+};
+
+/**
+ * The panel itself. Anything can live in here — a form, a list, a chart.
+ *
+ * Focus moves in when it opens and returns to the trigger when it closes, so it can be
+ * driven from the keyboard.
+ */
+declare const PopoverContent: {
+    ({ className, children, ...rest }: PopoverContentProps): react_jsx_runtime.JSX.Element | null;
+    displayName: string;
+};
+
+/**
+ * Read the popover's state from anything inside it — a Cancel button that needs to close
+ * it, say.
+ *
+ * @example
+ * ```tsx
+ * const { close } = usePopover();
+ *
+ * <Button onClick={close}>Cancel</Button>
+ * ```
+ */
+declare const usePopover: () => PopoverContextProps;
+
 interface DialogContentProps extends DialogOptions {
     /**
      * Function to close the dialog.
      * In case you want to close the dialog programmatically.
      * */
     dismiss: () => void;
+    /**
+     * Whether this dialog is the topmost entry in the overlay stack.
+     * Injected automatically by `GeckoUIProvider`; consumer code does not need to set this.
+     */
+    isTop?: boolean;
 }
 interface ActionsArgs extends DialogContentProps {
     /**
@@ -3141,7 +5073,7 @@ interface DialogOptions {
      * Dismiss the dialog on pressing the `Escape` key.
      * Default is `true`.
      * */
-    dismissOnEsc?: boolean;
+    dismissOnEscape?: boolean;
     /**
      * Dismiss the dialog on clicking outside the dialog.
      * Default is `true`.
@@ -3150,117 +5082,67 @@ interface DialogOptions {
     /** Data attributes to be added to the dialog */
     [key: `data-${string}`]: string;
 }
+interface DialogProps {
+    /**
+     * Open/Close the dialog
+     * */
+    open: boolean;
+    /**
+     * Callback fired when the dialog asks to be closed (Esc key or backdrop click).
+     * */
+    onClose?: () => void;
+    /**
+     * Content to be displayed inside the dialog.
+     * */
+    children?: ReactNode;
+    /**
+     * Additional class name for the dialog
+     * */
+    className?: string;
+    /**
+     * Dismiss the dialog on pressing the `Escape` key.
+     * Default is `true`.
+     * */
+    dismissOnEscape?: boolean;
+    /**
+     * Dismiss the dialog on clicking the backdrop.
+     * Clicks inside the dialog never dismiss it, including content rendered in a portal
+     * such as a `Select` or `Menu` popup.
+     * Default is `true`.
+     * */
+    dismissOnOutsideClick?: boolean;
+    /** Data attributes to be added to the dialog */
+    [key: `data-${string}`]: string;
+}
 
 /**
- * Dialog is a lightweight, imperative modal component that renders content in a centered overlay.
- * It serves as the foundational layer for more complex dialog patterns like ConfirmDialog.
- *
- * The component automatically handles focus management, escape key dismissal, and click-outside
- * behavior. Content can be provided as a React component or render function that receives
- * a dismiss callback for programmatic control.
+ * Dialog renders content in a centered modal overlay.
  *
- * @example
- * Image lightbox with custom controls:
- *
- * ```tsx
- * const openImageViewer = (imageUrl: string) => {
- *   Dialog.show({
- *     content: ({ dismiss }) => (
- *       <div className="relative">
- *         <img src={imageUrl} alt="Preview" className="max-w-4xl" />
- *         <button
- *           onClick={dismiss}
- *           className="absolute top-4 right-4"
- *         >
- *           ✕
- *         </button>
- *       </div>
- *     ),
- *     className: "bg-transparent shadow-none",
- *     dismissOnEsc: true,
- *     dismissOnOutsideClick: true
- *   });
- * };
- * ```
- *
- * @example
- * Form modal with data submission:
- *
- * ```tsx
- * const showUserForm = (userId?: string) => {
- *   Dialog.show({
- *     content: ({ dismiss }) => {
- *       const [formData, setFormData] = useState({});
- *
- *       const handleSubmit = async () => {
- *         await saveUser(userId, formData);
- *         dismiss();
- *         showSuccessToast("User saved");
- *       };
- *
- *       return (
- *         <UserForm
- *           data={formData}
- *           onChange={setFormData}
- *           onSubmit={handleSubmit}
- *           onCancel={dismiss}
- *         />
- *       );
- *     },
- *     className: "max-w-2xl p-6",
- *     dismissOnEsc: false,
- *     dismissOnOutsideClick: false
- *   });
- * };
- * ```
+ * Use it declaratively with `open` / `onClose` when the dialog belongs to a component's
+ * state, or imperatively with `Dialog.show()` when it is a one-off triggered from anywhere.
+ * The imperative form requires `<GeckoUIProvider>` to wrap your app.
  *
- * @example
- * Video player modal with tracking:
- *
- * ```tsx
- * Dialog.show({
- *   content: () => (
- *     <VideoPlayer
- *       src="/tutorial.mp4"
- *       autoPlay
- *       onEnded={() => {
- *         trackAnalytics("video_completed");
- *         Dialog.dismiss();
- *       }}
- *     />
- *   ),
- *   className: "w-screen h-screen max-w-none",
- *   dismissOnEsc: true,
- *   "data-video-modal": "true"
- * });
- * ```
+ * Clicking the backdrop or pressing Esc dismisses the dialog. Clicks inside the dialog never
+ * dismiss it, including popups rendered in a portal such as `Select` or `Menu`.
  *
  * @example
- * Loading state with external dismissal:
+ * Declarative:
  *
  * ```tsx
- * // Show loading dialog
- * Dialog.show({
- *   content: () => <LoadingSpinner text="Processing payment..." />,
- *   className: "w-64",
- *   dismissOnEsc: false,
- *   dismissOnOutsideClick: false
- * });
+ * const [open, setOpen] = useState(false);
  *
- * // Dismiss from anywhere after async operation
- * await processPayment();
- * Dialog.dismiss();
+ * <Button onClick={() => setOpen(true)}>Open</Button>
+ * <Dialog open={open} onClose={() => setOpen(false)}>
+ *   <h3>Hello</h3>
+ *   <Button onClick={() => setOpen(false)}>Close</Button>
+ * </Dialog>
  * ```
- *
- * @note
- * For dialogs requiring user confirmation with standardized action buttons,
- * consider using the `ConfirmDialog` component instead, which provides a
- * more opinionated interface for confirmation workflows.
  */
-declare const Dialog: {
-    show: (options: DialogOptions) => void;
-    dismiss: () => void;
-};
+declare function Dialog({ open, onClose, className, dismissOnEscape, dismissOnOutsideClick, children, ...rest }: DialogProps): react_jsx_runtime.JSX.Element;
+declare namespace Dialog {
+    var show: (options: DialogOptions) => string;
+    var dismiss: (id?: string) => void;
+}
 
 interface ConfirmDialogContentProps extends ConfirmDialogOptions {
     /**
@@ -3268,6 +5150,11 @@ interface ConfirmDialogContentProps extends ConfirmDialogOptions {
      * In case you want to close the dialog programmatically.
      * */
     dismiss: () => void;
+    /**
+     * Whether this dialog is the topmost entry in the overlay stack.
+     * Injected automatically by `GeckoUIProvider`; consumer code does not need to set this.
+     * */
+    isTop?: boolean;
 }
 interface ConfirmDialogActionsArgs extends ConfirmDialogContentProps {
     /**
@@ -3410,15 +5297,200 @@ interface ConfirmDialogOptions extends Omit<DialogOptions, "content" | "classNam
  * ```
  */
 declare const ConfirmDialog: {
-    show: (options: ConfirmDialogOptions) => void;
-    dismiss: () => void;
+    show: (options: ConfirmDialogOptions) => string;
+    dismiss: (id?: string) => void;
 };
 
-interface GeckoUIPortalProps {
-    toastOptions?: ToasterProps;
+type ToastPosition = "top-left" | "top-center" | "top-right" | "bottom-left" | "bottom-center" | "bottom-right";
+type ToastVariant = "default" | "success" | "error" | "warning" | "info" | "loading";
+interface ToastAction {
+    label: string;
+    onClick: () => void;
+}
+interface ToastOptions {
+    /** Supporting line under the message */
+    description?: ReactNode;
+    /** Milliseconds before the toast closes itself. `Infinity` keeps it open. */
+    duration?: number;
+    /** Overrides the Toaster position for this toast */
+    position?: ToastPosition;
+    /** Primary action button */
+    action?: ToastAction;
+    /** Secondary action button */
+    cancel?: ToastAction;
+    /** Reuse an id to replace an existing toast instead of stacking a new one */
+    id?: string;
+    /** Replaces the variant icon. `null` removes it. */
+    icon?: ReactNode | null;
+    /** Show the dismiss button */
+    closeButton?: boolean;
+    /**
+     * Whether the toast can be swiped away. Set it to false for one that has to be answered
+     * rather than waved off.(Default: true)
+     * */
+    dismissible?: boolean;
+    /** Called whenever the toast leaves, including on auto close */
+    onDismiss?: () => void;
+    /** Called only when the duration elapses */
+    onAutoClose?: () => void;
+    className?: string;
+    style?: CSSProperties;
+}
+interface ToastRecord {
+    id: string;
+    variant: ToastVariant;
+    message: ReactNode;
+    options: ToastOptions;
+    /** Set when the toast was created by `toast.custom` */
+    custom?: boolean;
+    /** Bumped when a toast is replaced in place, so its timer restarts */
+    generation: number;
+}
+interface ToastPromiseMessages<T> {
+    loading: ReactNode;
+    success: ReactNode | ((value: T) => ReactNode);
+    error: ReactNode | ((error: unknown) => ReactNode);
+}
+interface ToasterOptions {
+    /** Where toasts appear unless a toast overrides it. Default `bottom-right`. */
+    position?: ToastPosition;
+    /** Default duration in ms. Default `4000`. */
+    duration?: number;
+    /**
+     * Show the dismiss button on every toast. Default `false`.
+     *
+     * Worth turning on for a toast that neither closes itself nor can be swiped: swiping is
+     * pointer only, so that combination leaves a keyboard user no way to be rid of it.
+     * */
+    closeButton?: boolean;
+    /** Whether toasts can be swiped away. Default `true`. */
+    dismissible?: boolean;
+    /** How many toasts are rendered per position at once. Default `3`. */
+    visibleToasts?: number;
+    /** Pixels between stacked toasts. Default `14`. */
+    gap?: number;
+    /** Pixels between the stack and the viewport edge. Default `24`. */
+    offset?: number;
+    /** Class applied to the stack element for each position */
+    className?: string;
+    /** Class applied to every toast */
+    toastClassName?: string;
+    /** Style applied to every toast */
+    toastStyle?: CSSProperties;
+    /** Class applied to the variant icon */
+    iconClassName?: string;
+    /** Class applied to the message line */
+    messageClassName?: string;
+    /** Class applied to the description line */
+    descriptionClassName?: string;
+    /** Class applied to the action button */
+    actionClassName?: string;
+    /** Class applied to the cancel button */
+    cancelClassName?: string;
+    /** Class applied to the dismiss button */
+    closeClassName?: string;
+}
+
+/**
+ * Show a toast. Returns the id, which you can pass to `toast.dismiss(id)` or reuse
+ * as `options.id` to replace the toast in place.
+ *
+ * Requires `<GeckoUIProvider>` to be mounted.
+ *
+ * @example
+ * ```tsx
+ * toast("Saved");
+ * toast.success("Account created", { description: "Check your inbox." });
+ * toast.error("Upload failed", { action: { label: "Retry", onClick: retry } });
+ *
+ * const id = toast.loading("Uploading…");
+ * toast.success("Uploaded", { id });   // replaces the loading toast
+ * ```
+ */
+declare function toast(message: ReactNode, options?: ToastOptions): string;
+declare namespace toast {
+    var success: (message: ReactNode, options?: ToastOptions) => string;
+    var error: (message: ReactNode, options?: ToastOptions) => string;
+    var warning: (message: ReactNode, options?: ToastOptions) => string;
+    var info: (message: ReactNode, options?: ToastOptions) => string;
+    var loading: (message: ReactNode, options?: ToastOptions) => string;
+    var custom: (content: ReactNode, options?: ToastOptions) => string;
+    var promise: <T>(promise: Promise<T>, messages: ToastPromiseMessages<T>, options?: ToastOptions) => Promise<T>;
+    var dismiss: (id?: string) => void;
+}
+
+/**
+ * Renders the toast stacks. `GeckoUIProvider` mounts this for you.
+ */
+declare function Toaster({ position, duration, closeButton, dismissible, visibleToasts, gap, offset, className, ...rest }: ToasterOptions): react.ReactPortal | null;
+
+/**
+ * Props for `GeckoUIProvider`, the required wrapper component that owns the overlay
+ * stack and renders the toast stacks. Place it below your own context providers
+ * so that `Dialog.show()` / `Drawer.show()` content can read app-level React context.
+ */
+interface GeckoUIProviderProps {
+    /**
+     * The app's component tree.
+     *
+     * Place `GeckoUIProvider` below your own context providers so overlays opened via
+     * `Dialog.show()` / `Drawer.show()` can read those contexts.
+     *
+     * @example
+     * ```tsx
+     * <AuthProvider>
+     *   <GeckoUIProvider>
+     *     <App />
+     *   </GeckoUIProvider>
+     * </AuthProvider>
+     * ```
+     */
+    children: ReactNode;
+    /**
+     * Defaults for every toast, and where the stacks sit.
+     *
+     * @example
+     * ```tsx
+     * <GeckoUIProvider toastOptions={{ duration: 3000 }}>
+     *   <App />
+     * </GeckoUIProvider>
+     * ```
+     */
+    toastOptions?: ToasterOptions;
 }
 
-declare const GeckoUIPortal: FC<GeckoUIPortalProps>;
+/**
+ * GeckoUIProvider must wrap your application tree (below your own context providers).
+ *
+ * It owns the overlay stack for `Dialog.show()` / `Drawer.show()` and renders each
+ * open overlay via `ReactDOM.createPortal` so that React context flows into overlay
+ * content. It also renders the toast stacks.
+ *
+ * Mount one provider. If you nest another one deeper — to give overlays access to a subtree's
+ * context — the innermost provider owns the overlay stack and the `<Toaster>`, and the outer
+ * ones render nothing but their children.
+ *
+ * @example
+ * ```tsx
+ * // app/layout.tsx
+ * import { GeckoUIProvider } from "@geckoui/geckoui";
+ *
+ * export default function RootLayout({ children }) {
+ *   return (
+ *     <html>
+ *       <body>
+ *         <AuthProvider>
+ *           <GeckoUIProvider>
+ *             {children}
+ *           </GeckoUIProvider>
+ *         </AuthProvider>
+ *       </body>
+ *     </html>
+ *   );
+ * }
+ * ```
+ */
+declare function GeckoUIProvider({ children, toastOptions }: GeckoUIProviderProps): react_jsx_runtime.JSX.Element;
 
 /** Extensible placement map - To allow module augmentation */
 interface DrawerPlacementMap {
@@ -3435,7 +5507,7 @@ interface DrawerProps {
     /**
      * Allow clicking outside of drawer to close
      * If true, you can click through backdrop to close the drawer
-     * If you pass `handleClose` prop, you can use it to close the drawer
+     * If you pass `onClose` prop, you can use it to close the drawer
      * Use it with caution, it may cause bad UX in some cases
      * Eg. let's say you have an `a` tag that points to another page,
      * if you click on that element, it will close the drawer and navigate to the new page
@@ -3445,13 +5517,14 @@ interface DrawerProps {
      * */
     allowClickOutside?: boolean;
     /**
-     * Callback fired when click on outside of drawer
+     * Callback fired when the drawer asks to be closed (Esc key, backdrop click, or a
+     * click outside when `allowClickOutside` is set).
      * */
-    handleClose?: () => void;
+    onClose?: () => void;
     /**
      * Backdrop show/hide If true,
      * This is just a visual effect just setting opacity to 0
-     * So, you can still click the backdrop to close the drawer if you pass `handleClose` prop to close the drawer
+     * So, you can still click the backdrop to close the drawer if you pass `onClose` prop to close the drawer
      * */
     hideBackdrop?: boolean;
     /**
@@ -3477,6 +5550,11 @@ interface DrawerProps {
      * Default is true
      * */
     dismissOnEscape?: boolean;
+    /**
+     * Inline styles for the drawer root.
+     * `GeckoUIProvider` uses it to stack drawers opened with `Drawer.show()`.
+     * */
+    style?: CSSProperties;
 }
 
 /**
@@ -3488,18 +5566,26 @@ interface DrawerProps {
  * optional backdrop overlay, and flexible dismissal behaviors including ESC key and click-outside handling.
  *
  * @example
+ * Controlled usage:
+ *
+ * ```tsx
+ * const [open, setOpen] = useState(false);
+ *
+ * <Button onClick={() => setOpen(true)}>Open</Button>
+ * <Drawer open={open} onClose={() => setOpen(false)} placement="right" allowClickOutside>
+ *   <div className="p-6">Content here</div>
+ * </Drawer>
+ * ```
+ *
+ * @example
  * Mobile navigation menu:
  *
  * ```tsx
  * const [menuOpen, setMenuOpen] = useState(false);
  *
- * <button onClick={() => setMenuOpen(true)}>
- *   <MenuIcon />
- * </button>
- *
  * <Drawer
  *   open={menuOpen}
- *   handleClose={() => setMenuOpen(false)}
+ *   onClose={() => setMenuOpen(false)}
  *   placement="left"
  *   allowClickOutside
  *   dismissOnEscape
@@ -3510,92 +5596,11 @@ interface DrawerProps {
  *   </nav>
  * </Drawer>
  * ```
- *
- * @example
- * Filter panel with backdrop:
- *
- * ```tsx
- * const [filtersOpen, setFiltersOpen] = useState(false);
- *
- * <Drawer
- *   open={filtersOpen}
- *   handleClose={() => setFiltersOpen(false)}
- *   placement="right"
- *   allowClickOutside={true}
- *   backdropClassName="bg-black/60"
- *   className="w-96 p-6"
- * >
- *   <FilterPanel
- *     onApply={(filters) => {
- *       applyFilters(filters);
- *       setFiltersOpen(false);
- *     }}
- *   />
- * </Drawer>
- * ```
- *
- * @example
- * Notification center from top:
- *
- * ```tsx
- * <Drawer
- *   open={showNotifications}
- *   handleClose={() => setShowNotifications(false)}
- *   placement="top"
- *   hideBackdrop={false}
- *   allowClickOutside
- *   className="h-96 border-b shadow-lg"
- * >
- *   <NotificationList
- *     notifications={notifications}
- *     onMarkAllRead={handleMarkAllRead}
- *   />
- * </Drawer>
- * ```
- *
- * @example
- * Bottom sheet for mobile actions:
- *
- * ```tsx
- * <Drawer
- *   open={isBottomSheetOpen}
- *   handleClose={() => setBottomSheetOpen(false)}
- *   placement="bottom"
- *   allowClickOutside
- *   dismissOnEscape={false}
- *   backdropClassName="bg-black/40"
- *   className="h-64 rounded-t-2xl"
- * >
- *   <ActionSheet
- *     actions={mobileActions}
- *     onSelect={handleActionSelect}
- *   />
- * </Drawer>
- * ```
- *
- * @example
- * Settings panel without backdrop:
- *
- * ```tsx
- * <Drawer
- *   open={settingsVisible}
- *   handleClose={() => setSettingsVisible(false)}
- *   placement="right"
- *   hideBackdrop
- *   allowClickOutside={false}
- *   className="w-[600px] border-l"
- * >
- *   <SettingsPanel
- *     sections={settingsSections}
- *     onSave={saveSettings}
- *   />
- * </Drawer>
- * ```
  */
-declare function Drawer({ open, allowClickOutside, handleClose, hideBackdrop, placement, backdropClassName, className, children, dismissOnEscape }: DrawerProps): react_jsx_runtime.JSX.Element;
+declare function Drawer({ open, allowClickOutside, onClose, hideBackdrop, placement, backdropClassName, className, children, dismissOnEscape, style }: DrawerProps): react_jsx_runtime.JSX.Element;
 declare namespace Drawer {
-    var show: (node: ReactNode, options?: Omit<DrawerProps, "open" | "children">) => void;
-    var dismiss: () => void;
+    var show: (node: ReactNode, options?: Omit<DrawerProps, "open" | "children">) => string;
+    var dismiss: (id?: string) => void;
 }
 
 interface MenuProps extends PropsWithChildren {
@@ -3764,17 +5769,87 @@ declare function isTwoFileEqualByFileContent(file1: File, file2: File): Promise<
  * */
 declare const hasDisplayName: (displayName: string) => (e: ReactNode) => boolean;
 
+interface FormatNumericInputOptions {
+    /**
+     * Drop leading zeros and normalise the whole part.
+     * Turn it off for values like room numbers where "007" is meaningful.
+     * */
+    strict?: boolean;
+    /** Reject a leading minus sign */
+    positiveOnly?: boolean;
+    /** Digits kept after the decimal point. `0` removes the decimal point entirely. */
+    maxFractionDigits?: number;
+    /** Digits kept before the decimal point */
+    maxWholeDigitPlaces?: number;
+}
+/**
+ * Sanitises a partially typed number without converting it to a `number`.
+ *
+ * Keeping the value a string is what lets someone type "2." on the way to "2.5":
+ * a round trip through `parseFloat` would collapse it to "2" and eat the decimal
+ * point as they type.
+ *
+ * @example
+ * ```ts
+ * formatNumericInput("2.");      // "2."
+ * formatNumericInput("007");     // "7"
+ * formatNumericInput("007", { strict: false });          // "007"
+ * formatNumericInput("1.239", { maxFractionDigits: 2 }); // "1.23"
+ * ```
+ * */
+declare const formatNumericInput: (rawValue: string, { strict, positiveOnly, maxFractionDigits, maxWholeDigitPlaces }?: FormatNumericInputOptions) => string;
+
 declare const getDataAttributes: (props: Record<string, any>) => Record<string, string>;
 
+/**
+ * Split props into the `data-*` attributes and everything else.
+ *
+ * Components whose root element is not the one receiving `...rest` use this to keep
+ * `data-*` on the root, next to the state attributes the styles already key off,
+ * rather than leaking them onto an inner element.
+ */
+declare const splitDataAttributes: <T extends Record<string, any>>(props: T) => {
+    dataAttributes: Record<string, unknown>;
+    rest: Omit<T, `data-${string}`>;
+};
+
 declare function isAsyncFn(fn: unknown): boolean;
 
+/**
+ * Warn about a mistake only a developer can fix. Silent in production builds.
+ *
+ * tsup is told not to replace `process.env.NODE_ENV` while building this library, or the
+ * value would be fixed at publish time — see the `define` in tsup.config.ts.
+ */
+declare function devWarn(message: string): void;
+
+/**
+ * The single element to merge `asChild`-style props into, or `null` when there isn't one.
+ *
+ * `Children.only` would be the obvious choice, but it throws, and a library component
+ * cannot take the whole page down over its children. Under RSC a child can also reach a
+ * client component as an unresolved lazy chunk rather than an element, so callers need a
+ * path that falls back to their own wrapper instead of crashing.
+ */
+declare const asChildElement: (children: ReactNode) => ReactElement | null;
+
 declare class BaseFilePickerHandler {
     accept: string;
     removeDuplicates: boolean;
+    multiple: boolean;
+    preview: boolean;
+    /** How many more files may be taken on this run, not the field's own `max`. */
+    room?: number;
     oldFiles: FilePickerFile[];
+    /** Everything turned away on this run, and why, for the caller to report. */
+    rejected: FileRejection[];
     constructor(accept?: string, removeDuplicates?: boolean, opts?: {
         oldFiles?: FilePickerFile[];
+        multiple?: boolean;
+        preview?: boolean;
+        room?: number;
     });
+    private turnAway;
     onDrop(_: DataTransferItemList | undefined): Promise<FilePickerFile[]>;
     open(options?: OpenFilePickerOptions): Promise<FilePickerFile[]>;
     protected addFileIfValid(file: FilePickerFile, data?: FilePickerFile[]): Promise<FilePickerFile[]>;
@@ -3786,4 +5861,4 @@ declare class FileOnlyPickerHandler extends BaseFilePickerHandler {
 
 declare const FilePicker: typeof FileOnlyPickerHandler;
 
-export { type ActionsArgs, Alert, type AlertProps, type AlertVariantMap, BaseDateRangeInput, type BaseDateRangeInputProps, type BaseSelectProps, Button, type ButtonColorMap, type ButtonProps, type ButtonSizeMap, type ButtonVariantMap, _default as Calendar, type CalendarActiveProps, type CalendarOverload, type CalendarProps, type CalendarRangeModeProps, type CalendarRef, type CalendarSingleModeProps, CalendarType, Checkbox, type CheckboxProps, ConfirmDialog, type ConfirmDialogActionsArgs, type ConfirmDialogContentProps, type ConfirmDialogOptions, CounterInput, type CounterInputProps, type CounterInputSizeMap, type CustomSelectOptionArgs, type CustomSelectOptionBaseArgs, type DataAttributeProps, type DateFormat$1 as DateFormat, DateInput, type DateInputProps, type DateRange, DateRangeInput, type DateRangeInputProps, type DayCellRenderProps, Dialog, type DialogContentProps, type DialogOptions, Drawer, type DrawerPlacementMap, type DrawerProps, FilePicker, type FilePickerFile, type FilePickerOptions, type FileSize, type FileWithPreview, type FocusedOption, GeckoUIPortal, type GeckoUIPortalProps, Input, InputError, type InputErrorProps, type InputProps, Label, type LabelProps, LoadingButton, type LoadingButtonProps, Menu, type MenuContextProps, MenuItem, type MenuItemProps, type MenuProps, MenuTrigger, type MenuTriggerProps, type MenuTriggerRenderProps, type MultiSelectProps, type MultiSelectTriggerProps, type MultiSelectTriggerRenderProps, OTPInput, type OTPInputProps, type OpenFilePickerFn, type OpenFilePickerOptions, Pagination, type PaginationProps, type RHFBaseProps, RHFCheckbox, type RHFCheckboxProps, RHFController, RHFCounterInput, type RHFCounterInputProps, RHFCurrencyInput, type RHFCurrencyInputProps, RHFDateInput, type RHFDateInputProps, RHFDateRangeInput, type RHFDateRangeInputProps, RHFError, type RHFErrorProps, type RHFErrorRenderProps, RHFFileInput, type RHFFileInputProps, RHFFilePicker, type RHFFilePickerBaseProps, type RHFFilePickerProps, type RHFFilePickerRenderProps, type RHFFilePickerRendererProps, RHFInput, RHFInputGroup, type RHFInputGroupProps, type RHFInputProps, RHFNumberInput, type RHFNumberInputProps, RHFOTPInput, type RHFOTPInputProps, RHFRadio, type RHFRadioProps, type RHFRenderArgs, RHFSelect, type RHFSelectOverload, type RHFSelectProps, RHFSwitch, type RHFSwitchProps, RHFTextarea, type RHFTextareaProps, Radio, type RadioProps, Select, SelectConsumer, type SelectConsumerProps, type SelectContextProps, SelectDropdownSearch, SelectEmpty, type SelectEmptyProps, SelectOption, type SelectOptionConfig, type SelectOptionElement, type SelectOptionProps, type SelectOverload, type SelectProps, SelectTrigger, type SelectTriggerBaseRenderProps, type SelectTriggerOverload, type SelectTriggerProps, type SelectionMode, type SingleSelectProps, type SingleSelectTriggerProps, type SingleSelectTriggerRenderProps, Spinner, Switch, type SwitchProps, type SwitchSizeMap, Textarea, type TextareaProps, Tooltip, type TooltipProps, type UseFilePickerOptions, type UseFilePickerReturn, fileToUInt8Array, getDataAttributes, hasDisplayName, isAsyncFn, isTwoFileEqualByFileContent, toThousandsSeparatorFormat, useClickOutside, useEscListener, useFilePicker, useMenu, usePreventDefault, useSelect };
+export { Accordion, type AccordionContextProps, AccordionHeader, type AccordionHeaderProps, AccordionItem, type AccordionItemContextProps, type AccordionItemProps, AccordionPanel, type AccordionPanelProps, type AccordionProps, type AccordionSizeMap, type AccordionValue, type AccordionVariantMap, type ActionsArgs, Alert, type AlertColorMap, type AlertProps, Avatar, type AvatarColorMap, AvatarGroup, type AvatarGroupOverflow, type AvatarGroupProps, type AvatarProps, type AvatarShapeMap, type AvatarSizeMap, Badge, type BadgeColorMap, type BadgeProps, type BadgeShapeMap, type BadgeSizeMap, type BadgeVariantMap, type BaseSelectProps, Breadcrumb, BreadcrumbItem, type BreadcrumbItemProps, type BreadcrumbProps, type BreadcrumbSizeMap, Button, type ButtonColorMap, type ButtonProps, type ButtonSizeMap, type ButtonVariantMap, _default as Calendar, type CalendarActiveProps, type CalendarOverload, type CalendarProps, type CalendarRangeModeProps, type CalendarRef, type CalendarSingleModeProps, CalendarType, Checkbox, type CheckboxProps, type ColorFormat, ColorInput, type ColorInputProps, type ColorInputRenderState, ColorPicker, type ColorPickerProps, type ColorPickerRenderState, ConfirmDialog, type ConfirmDialogActionsArgs, type ConfirmDialogContentProps, type ConfirmDialogOptions, CounterInput, type CounterInputProps, type CounterInputSizeMap, type CustomSelectOptionArgs, type CustomSelectOptionBaseArgs, type DataAttributeProps, type DateFormat$1 as DateFormat, DateInput, type DateInputProps, type DateRange, DateRangeInput, type DateRangeInputProps, type DayCellRenderProps, Dialog, type DialogContentProps, type DialogOptions, type DialogProps, Drawer, type DrawerPlacementMap, type DrawerProps, FileInput, type FileInputProps, FilePicker, type FilePickerFile, type FileRejection, type FileRejectionReason, type FileSize, type FocusedOption, type FormatNumericInputOptions, GeckoUIProvider, type GeckoUIProviderProps, type Hsva, Input, InputError, type InputErrorProps, type InputProps, Label, type LabelProps, LoadingButton, type LoadingButtonProps, Menu, type MenuContextProps, MenuItem, type MenuItemProps, type MenuProps, MenuTrigger, type MenuTriggerProps, type MenuTriggerRenderProps, type MultiFileRenderState, type MultiSelectProps, type MultiSelectTriggerProps, type MultiSelectTriggerRenderProps, OTPInput, type OTPInputProps, type OpenFilePickerFn, type OpenFilePickerOptions, Pagination, type PaginationProps, type PickedFile, Popover, PopoverContent, type PopoverContentProps, type PopoverContextProps, type PopoverProps, PopoverTrigger, type PopoverTriggerProps, type PreviewFile, Progress, type ProgressColorMap, type ProgressLabel, type ProgressProps, type ProgressSizeMap, type RHFBaseProps, RHFCheckbox, type RHFCheckboxProps, RHFColorInput, type RHFColorInputProps, RHFController, RHFCounterInput, type RHFCounterInputProps, RHFCurrencyInput, type RHFCurrencyInputProps, RHFDateInput, type RHFDateInputProps, RHFDateRangeInput, type RHFDateRangeInputProps, RHFError, type RHFErrorProps, type RHFErrorRenderProps, RHFFileInput, type RHFFileInputProps, RHFInput, RHFInputGroup, type RHFInputGroupProps, type RHFInputProps, RHFNumberInput, type RHFNumberInputProps, RHFOTPInput, type RHFOTPInputProps, RHFRadio, type RHFRadioProps, RHFRangeSlider, type RHFRangeSliderProps, RHFRating, type RHFRatingProps, type RHFRenderArgs, RHFSelect, type RHFSelectOverload, type RHFSelectProps, RHFSlider, type RHFSliderProps, RHFSwitch, type RHFSwitchProps, RHFTagInput, type RHFTagInputProps, RHFTextarea, type RHFTextareaProps, RHFTimeInput, type RHFTimeInputProps, Radio, type RadioProps, RangeSlider, type RangeSliderProps, Rating, type RatingColorMap, type RatingProps, type RatingSizeMap, type Rgba, Select, SelectConsumer, type SelectConsumerProps, type SelectContextProps, SelectDropdownSearch, SelectEmpty, type SelectEmptyProps, SelectOption, type SelectOptionConfig, type SelectOptionElement, type SelectOptionProps, type SelectOverload, type SelectProps, SelectTrigger, type SelectTriggerBaseRenderProps, type SelectTriggerOverload, type SelectTriggerProps, type SelectionMode, type SingleFileRenderState, type SingleSelectProps, type SingleSelectTriggerProps, type SingleSelectTriggerRenderProps, Skeleton, type SkeletonAnimationMap, type SkeletonProps, type SkeletonShapeMap, Slider, type SliderColorMap, type SliderLabel, type SliderMark, type SliderProps, type SliderSizeMap, type SliderThumb, Spinner, Step, type StepProps, type StepRenderArgs, type StepStatus, Stepper, type StepperOrientationMap, type StepperProps, type StepperSizeMap, Switch, type SwitchProps, type SwitchSizeMap, Tab, TabList, type TabListProps, TabPanel, type TabPanelProps, type TabProps, Tabs, type TabsContextProps, type TabsOrientation, type TabsProps, type TabsSizeMap, type TabsVariantMap, TagInput, TagInputOption, type TagInputOptionProps, type TagInputProps, type TagInputTag, Textarea, type TextareaProps, type TimeFormat, TimeInput, type TimeInputProps, type TimeParts, type ToastAction, type ToastOptions, type ToastPosition, type ToastPromiseMessages, type ToastRecord, type ToastVariant, Toaster, type ToasterOptions, Tooltip, type TooltipProps, type UseFilePickerOptions, type UseFilePickerReturn, asChildElement, devWarn, fileToUInt8Array, formatColor, formatNumericInput, getDataAttributes, hasDisplayName, isAsyncFn, isTwoFileEqualByFileContent, parseColor, splitDataAttributes, toThousandsSeparatorFormat, toast, useAccordion, useAccordionItem, useClickOutside, useEscListener, useFilePicker, useMenu, usePopover, usePreventDefault, useScrollLock, useSelect, useTabs, useTagInput };