import { Color } from '../types.js';
export declare const FocusRing: (props: {
    /** Extra classes for the focus ring `<span>` (typically used to match the host's corner radius). */
    className?: string;
    /**
     * Which interactive group's focus state should reveal this ring. The ring is hidden by default
     * (scale 95, opacity 0) and animates in when the matching ancestor receives focus.
     *
     * Each value targets the corresponding `group/<name>` Tailwind group on its parent component:
     * - `'button'` - reveals on `:focus-visible` (keyboard focus only).
     * - `'input'` - reveals when the wrapper has a focused `<input>`.
     * - `'textarea'` - reveals when the wrapper has a focused `[contenteditable]`.
     * - `'checkbox'` / `'switch'` / `'radio'` / `'slider'` - reveal on `:focus-visible` of the
     *   wrapper's hidden native input.
     *
     * Pass an unknown value to opt out of the auto-reveal classes (use `force` instead).
     */
    group?: string;
    /** Accent color for the ring. Default: theme accent. */
    color?: Color;
    /**
     * Always show the ring, regardless of focus state. Used for error/invalid states
     * (e.g. `Input` passes `force={!valid}` and a red color).
     */
    force?: boolean;
    /**
     * When `true` (default), the ring sits offset outside the host (`-inset-1.5`). When `false`, it
     * renders flush against the host (`inset-0`) so it doesn't contribute to a scroll container's overflow.
     */
    offset?: boolean;
}) => import("react/jsx-runtime").JSX.Element;
//# sourceMappingURL=FocusRing.d.ts.map