import * as class_variance_authority_types from 'class-variance-authority/types';
import { VariantProps } from 'class-variance-authority';
import React__default from 'react';

/**
 * Surface colours the search can be themed with — the footer's thirteen-name
 * vocabulary (see `footerColors` in footer.tsx) plus `default`, the nswds-app
 * grey-100 chip that headers embed on a white surface.
 *
 * Every derived colour resolves from a single `--search-ink` token, so a
 * variant only declares its surface utilities and that one value. This map
 * replaces the FOUR parallel 14-entry cva tables in the nswds-app source
 * (surface / collapsed / button / focus): each of those tables was a manual
 * projection of the same underlying ink, so they are collapsed into the
 * derivations below.
 *
 * The derivations are written literally here (once) rather than per-variant:
 * Tailwind scans source text for class names, so a template-built arbitrary
 * property would never be emitted. Mirrors footer.tsx (`--footer-*`) and
 * link.tsx (`--link-halo`).
 *
 * Expanded text/surface pairs are the ones verified for footer.tsx: every
 * light pair clears WCAG 2.2 AA (1.4.3, 4.5:1) — the worst are `primary-600`
 * (4.57:1) and `accent-600` (5.18:1) — and in dark mode all clear AAA (worst
 * 13.6:1). The collapsed chip renders no text, only the icon, which paints in
 * the same ink.
 */
declare const expandableSearchVariants: (props?: ({
    variant?: "default" | "white" | "primary-800" | "primary-600" | "primary-400" | "primary-200" | "grey-800" | "grey-600" | "grey-400" | "grey-200" | "accent-800" | "accent-600" | "accent-400" | "accent-200" | null | undefined;
} & class_variance_authority_types.ClassProp) | undefined) => string;
type ExpandableSearchVariant = NonNullable<VariantProps<typeof expandableSearchVariants>['variant']>;
type ExpandableSearchProps = React__default.ComponentPropsWithoutRef<'form'> & VariantProps<typeof expandableSearchVariants> & {
    /**
     * Called with the current query when the form submits (Enter in the field
     * or a click on the search button). Not called if a supplied `onSubmit`
     * prevented the event's default.
     */
    onAction?: (value: string) => void;
    /** Initial query. A non-empty value renders the field expanded. */
    defaultValue?: string;
    ref?: React__default.Ref<HTMLFormElement>;
};
type ExpandableSearchButtonProps = Omit<React__default.ComponentPropsWithoutRef<'button'>, 'type'> & {
    [key: `data-${string}`]: string | number | boolean | undefined;
};
type ExpandableSearchFieldProps = Omit<React__default.ComponentPropsWithoutRef<'input'>, 'type' | 'value' | 'defaultValue'> & {
    /**
     * Accessible name for the input, rendered as a visually-hidden `<label>`
     * and mirrored as `aria-label`. Defaults to `'Search'`.
     */
    label?: string;
    /** Accessible name for the submit button. Defaults to `'Search'`. */
    buttonLabel?: string;
    /** Extra props for the submit button (its `type` is pinned to `submit`). */
    buttonProps?: ExpandableSearchButtonProps;
    ref?: React__default.Ref<HTMLInputElement>;
};
/**
 * Site-search disclosure: a 48px search chip that expands into a text field
 * whenever it holds focus or a value, and submits the query to `onAction`.
 * Compose it as `<ExpandableSearch>` (the form root, owning the value and the
 * focus-within state) around one `<ExpandableSearchField>` (the input and its
 * submit button) — typically inside `HeaderActions`.
 *
 * Ported from nswds-app's `ExpandableSearch`. The mechanic is kept verbatim —
 * the collapsed control IS the text input, styled as a chip, so that the very
 * first focus or tap both reveals and focuses the field with no extra step.
 * Expansion is pure CSS keyed on the active state; no Base UI primitive is
 * used because none models this pattern (it is a styled form, not a popup —
 * focus never moves, nothing is portalled, nothing needs ARIA beyond the
 * label).
 *
 * Accessibility contract:
 * - The input carries a visually-hidden `<label>` and an `aria-label`
 *   (default "Search"), and is `type='search'` with `enterKeyHint='search'`,
 *   so its role and purpose are announced while it still looks like a button
 *   (WCAG 2.2, 4.1.2; the source input was an unlabelled-by-type text input).
 * - Keyboard focus shows a 2px ink outline drawn inside the chip — the
 *   source's ring was its own surface colour against a hardcoded white offset
 *   and could vanish entirely (2.4.7, 2.4.13). See `searchFocusClassName`.
 * - Enter submits; Escape clears (native `type='search'` behaviour); an empty
 *   blurred field collapses back to the chip.
 * - Expansion and halo transitions honour `prefers-reduced-motion` (2.3.3).
 *
 * Departures from the nswds-app source, beyond those above:
 * - React 19 `ref` prop instead of `forwardRef`.
 * - Four parallel 14-entry variant tables replaced by one ink-driven map —
 *   see `expandableSearchVariants`.
 * - Expanded width `w-96` → `w-[min(24rem,80vw)]` so the field can never
 *   overflow a small viewport (1.4.10 Reflow).
 * - The expanded state no longer sets `outline-none` (it would have killed
 *   the new focus indicator; the source could afford it because its
 *   indicator was a box-shadow ring).
 * - Expanded text selection uses `select-text`, not the source's
 *   `select-auto` — `auto` computes from the root's `select-none` parent, so
 *   the source's expanded field was unselectable.
 * - A consumer `onChange` on the field is chained after the context update
 *   instead of replacing it (the source's spread order let it clobber the
 *   controlled handler).
 *
 * The root deliberately does not claim `role='search'`: where the component
 * is the page's site search, add it yourself (one search landmark per page).
 */
declare function ExpandableSearch({ className, onAction, defaultValue, onSubmit, onFocusCapture, onBlurCapture, variant, ref, ...props }: ExpandableSearchProps): React__default.JSX.Element;
/**
 * The input and its submit button. Must be rendered inside `ExpandableSearch`,
 * which owns the value and the focus-within state.
 *
 * The submit button is `pointer-events-none` while collapsed — deliberately,
 * per the source: collapsed, the input overlays the exact same 48px square and
 * OWNS the click, so a tap lands on the input, focuses it, and expands the
 * field. Making the button clickable there would submit an empty query
 * instead of opening the field. It also never traps keyboard focus while
 * collapsed: the input precedes it in tab order, and focusing the input
 * expands the field before the button is reached.
 */
declare function ExpandableSearchField({ className, id, label, 'aria-label': ariaLabel, autoComplete, enterKeyHint, onChange, buttonLabel, buttonProps, ref, ...props }: ExpandableSearchFieldProps): React__default.JSX.Element;

export { ExpandableSearch, type ExpandableSearchButtonProps, ExpandableSearchField, type ExpandableSearchFieldProps, type ExpandableSearchProps, type ExpandableSearchVariant, expandableSearchVariants };