import { type VariantProps } from 'class-variance-authority';
import * as React from 'react';
/**
 * A bordered, selectable tile: an optional leading icon, a label, and an optional line of
 * secondary text.
 *
 * Ported from the Figma atom `.button-selectable` (32 variants), with `.tab-item` expressed as
 * the `tab` variant rather than as a second component — see
 * `scripts/figma/bindings/button-selectable.json`. The two atoms are the same mechanism: a
 * bordered row carrying a logo and a label, whose border colour is its state. They differ only in
 * radius and padding, and in which accent the design file happened to reach for (`.tab-item`
 * uses the highlight blue, `.button-selectable` the brand red). Expressed in Strix's semantic
 * tokens that last difference disappears, because both are "this one is chosen".
 *
 * TWO OF FIGMA'S DECISIONS ARE NOW LOGGED CONFLICTS RATHER THAN DECLINES, one stands as a rule-4
 * addition, and one was reasoning about Figma's intent rather than about the evidence. Full numbers
 * in the binding and in `docs/FIGMA-EXCEPTIONS.md`.
 *
 *  1. **The resting border SHIPS.** Figma uses `gray-700`, 1.95:1 against the page where WCAG
 *     1.4.11 wants 3:1. Under rule 1 that is a conflict to record, not a value to substitute — it
 *     was `--color-border-control` (5.55:1 dark). Now `--color-border-tile`, which is its own role
 *     rather than `.tab-item`'s: Figma draws a 1px box here and a 2px underline there, so sharing
 *     one token would assert the two are one treatment.
 *
 *  2. **The hover fill SHIPS.** Figma tints the tile with `twilio-red` at 20% — an unbound literal,
 *     which Dev Mode confirms as a raw `bg-[rgba(219,19,42,0.2)]` with no `boundVariables`. It
 *     composites to 1.10:1 against the page: a fill nobody can see, and Figma's drawing. Minted as
 *     `--color-surface-tile-hover` over `--palette-alpha-twilio-red-alpha-200`, the THIRD 20% red in
 *     this file and distinct from the other two.
 *
 *  3. **The 2px selected border stays, and it is not a substitution.** Selected differs from Default
 *     only in border hue — gray to red, 2.35:1 between them — which WCAG 1.4.1 prohibits. Figma's
 *     colours are both taken; the extra 1px of width is an addition Figma never drew, which under
 *     rule 4 breaks no tie. `aria-pressed` answers assistive technology but not a sighted user who
 *     cannot separate the hues.
 *
 *  4. **`additionalInkOnHover` was a claim about intent, not evidence.** The decline read: Figma
 *     "brightens the second line to white on hover but leaves it grey when selected. That reads as
 *     an artefact of assembly rather than a decision." Whether a designer meant it is not ours to
 *     judge — Figma draws it, so it ships.
 */
declare const selectableTileStyles: (props?: ({
    variant?: "tab" | "tile" | "demo" | null | undefined;
    size?: "md" | "sm" | null | undefined;
    orientation?: "horizontal" | "vertical" | null | undefined;
    selected?: boolean | null | undefined;
} & import("class-variance-authority/types").ClassProp) | undefined) => string;
/**
 * The label's ramp: Figma's `font/size/extra-small` on `font/line-height/extra-small`.
 *
 * The weight is a `size` axis, not a constant: Figma's Small is `Paragraph/small-medium` (Medium →
 * 500) and Big is `Paragraph/small-semibold` (Semibold → 600).
 */
declare const labelStyles: (props?: ({
    size?: "md" | "sm" | null | undefined;
} & import("class-variance-authority/types").ClassProp) | undefined) => string;
/**
 * The secondary line: 12/18 at Book, inked Figma's `gray-300` at **7.43:1** on the page. It was
 * `--color-text-secondary`, chosen as "the same idea expressed in a role that has a measured light
 * value" — a light theme rule 3 removed, so there is no trip left to pay for.
 *
 * IT BRIGHTENS TO WHITE ON HOVER, which is Figma's drawing and used to be declined as reading "like
 * an accident of how the file was assembled rather than a decision". Whether a designer meant it is
 * not ours to judge; the file draws it and the ratio only improves (7.43:1 → 19.37:1). Figma leaves
 * the line grey when *selected*, which is why there is no `group-data-[selected]` counterpart here —
 * that asymmetry is the design too.
 */
declare const descriptionStyles: (props?: import("class-variance-authority/types").ClassProp | undefined) => string;
export type SelectableTileVariants = VariantProps<typeof selectableTileStyles>;
export interface SelectableTileProps extends Omit<React.ButtonHTMLAttributes<HTMLButtonElement>, 'children' | 'type'>, Omit<SelectableTileVariants, 'selected'> {
    /** The tile's primary text. */
    label: string;
    /** Optional second line, for a detail like a phone number. Figma's `additional-text`. */
    description?: string;
    /** Optional leading graphic. Figma pairs this with a product logo. */
    icon?: React.ReactNode;
    /**
     * Whether this tile is the chosen one. Emitted as `aria-pressed` and drawn with both an accent
     * border and a thicker one, so selection does not rest on colour alone.
     * @default false
     */
    selected?: boolean;
}
/**
 * A bordered tile the user picks from a set — a channel, a number, a destination.
 *
 * Renders a `<button type="button">` with `aria-pressed`, which is the toggle-button pattern: each
 * tile is independently on or off. For a set where exactly one may be chosen, prefer a radio group
 * — `aria-pressed` tells a screen reader "pressed", not "1 of 4 selected".
 *
 * @example <SelectableTile label="SMS" description="+1 415 555 0101" icon={<SmsIcon />} selected />
 * @example <SelectableTile variant="tab" size="md" label="Voice" onClick={choose} />
 */
export declare const SelectableTile: React.ForwardRefExoticComponent<SelectableTileProps & React.RefAttributes<HTMLButtonElement>>;
export { selectableTileStyles, labelStyles as selectableTileLabelStyles, descriptionStyles as selectableTileDescriptionStyles, };
//# sourceMappingURL=selectable-tile.d.ts.map