import { type ReactNode } from "react";
/** Border and fill of a selectable surface that isn't selected. */
export declare const SELECTABLE_SURFACE_CLASS = "border border-border bg-surface transition-colors duration-[120ms] hover:bg-surface-2";
/** The one selected highlight: brand border, brand fill at 5%. */
export declare const SELECTED_SURFACE_CLASS = "border-brand bg-brand/5 hover:bg-brand/8";
/**
 * Classes for any selectable surface (a card, a template, a picker row), so
 * every selected state in the app looks the same.
 */
export declare function selectableSurface(selected: boolean, className?: string): string;
/** The small check badge that marks the selected card, in the top corner. */
export declare function SelectedCheck({ className }: {
    className?: string;
}): import("react").JSX.Element;
/**
 * - `ring` (default): brand border, faint brand fill and a check in the corner.
 * - `radio`: neutral border; only the radio dot shows the selection.
 * - `list`: no cards, just radio, title and description rows.
 */
export type ChoiceCardsVariant = "ring" | "radio" | "list";
export interface ChoiceCardsProps {
    /** The selected option. Use with `onValueChange`, or pass `defaultValue`. */
    value?: string | undefined;
    defaultValue?: string | undefined;
    onValueChange?: ((value: string) => void) | undefined;
    variant?: ChoiceCardsVariant | undefined;
    /** The question, shown above the options: "Who can use it?". */
    label?: ReactNode | undefined;
    /** One line under the label, when the question needs context. */
    description?: ReactNode | undefined;
    /** Accessible name when there is no visible label. */
    "aria-label"?: string | undefined;
    /**
     * `stack` (default) puts options under each other, as in dialogs. `grid`
     * puts them two across once the group is at least 560px wide.
     */
    layout?: "stack" | "grid" | undefined;
    /** What went wrong and what to do: "Choose who can use it." */
    error?: ReactNode | undefined;
    disabled?: boolean | undefined;
    required?: boolean | undefined;
    /** Form field name, for native form submission. */
    name?: string | undefined;
    className?: string | undefined;
    children: ReactNode;
}
/**
 * 2-3 options whose consequences need a sentence each. Keyboard: Tab into the
 * group, arrow keys move and select, Space selects.
 */
export declare function ChoiceCards({ value, defaultValue, onValueChange, variant, label, description, "aria-label": ariaLabel, layout, error, disabled, required, name, className, children, }: ChoiceCardsProps): import("react").JSX.Element;
export interface ChoiceCardProps {
    value: string;
    title: ReactNode;
    /** The consequence of picking it, in one sentence. */
    description?: ReactNode | undefined;
    /** A 16px lucide icon. Shown on cards, dropped in the plain list. */
    icon?: ReactNode | undefined;
    /** Quiet detail after the title, for example "3 permissions". */
    meta?: ReactNode | undefined;
    disabled?: boolean | undefined;
    /** Why it can't be picked and who can change that. Shown under the description. */
    disabledReason?: ReactNode | undefined;
    className?: string | undefined;
}
/** One option inside `ChoiceCards`. The whole card is the radio. */
export declare function ChoiceCard({ value, title, description, icon, meta, disabled, disabledReason, className, }: ChoiceCardProps): import("react").JSX.Element;
/** Placeholder while the options load, in the same geometry as the cards. */
export declare function ChoiceCardsSkeleton({ count, variant, label, className, }: {
    count?: number | undefined;
    variant?: ChoiceCardsVariant | undefined;
    /** Keep the real question visible while the options load. */
    label?: ReactNode | undefined;
    className?: string | undefined;
}): import("react").JSX.Element;