import { type ReactNode } from "react";
import type { GestureResponderEvent } from "react-native";
import { type StatusColorTone, type Hue, type ColorTokens, type LayoutStyle, type ViewStyle, type TextStyle } from "../../style/index.js";
export type { Hue };
export interface ChipSkin {
    /** Container shape, height and gap (the one, compact size). */
    base: ViewStyle;
    /** Per-side horizontal insets: beside text, beside an icon (a leading icon, the selected
     *  check, a trailing element), and beside the remove control. The shell resolves
     *  paddingStart/End from it. */
    sidePadding: {
        text: number;
        icon: number;
        remove: number;
    };
    /** Label type. */
    labelType: TextStyle;
    /** The trailing count's type. */
    countType: TextStyle;
    /** The remove control's box (its disc, or the bare glyph). */
    removeSize: number;
    /** The remove "x" glyph inside that box. */
    removeGlyph: number;
    /** The remove disc's fill; omit for a bare glyph. */
    removeDisc?: string;
    /** Remove-button hitSlop, sized so glyph + slop reaches the platform's minimum
     *  touch target (44pt iOS / 48dp Android), biased away from the label: `left` is the
     *  side toward the label (the start; the shell mirrors it in a right-to-left layout). */
    removeHitSlop: {
        top: number;
        bottom: number;
        left: number;
        right: number;
    };
    /** The minimum a tappable chip's touch area grows to, measured from the chip (M3's 48dp
     *  on Android): the shortfall is made up on each side, so a chip wider than the minimum
     *  reaches no further sideways. Wins over `bodyHitSlop`. */
    bodyMinTarget?: number;
    /** A tappable chip's fixed touch slop on every side, where the skin sets no
     *  `bodyMinTarget` (web and iOS: 11, which clears 44pt around the 25pt pill; the web
     *  drops hitSlop). */
    bodyHitSlop?: number;
    /** The selected filter chip's leading check: its size, and whether it replaces a
     *  leading icon (M3) or leads only a chip that has none (the hand-off's web chip). */
    selectedCheck: {
        size: number;
        replacesIcon: boolean;
    } | null;
    /** A selected chip keeps an accent edge (the web); M3 drops the outline. */
    selectedEdge?: boolean;
    /** M3: an idle neutral chip is the bare container inside its field-border outline. Omit
     *  for the raised neutral fill inside the hairline. */
    outlined?: boolean;
    /** M3: a neutral chip's leading icon takes the accent ink. */
    accentIcon?: boolean;
    /** A hovering pointer brightens the chip by this factor (the web). */
    hoverBrightness?: number;
    /** The disabled chip's opacity. */
    disabledOpacity: number;
    /**
     * The `option` chip's geometry and type over this skin (the hand-off playground's knob
     * picks: 26 tall at the web row's `optionChip` corner, 9 at the sides, a 500 12px label, no check, no hover),
     * and the square an icon-only option takes. Omit where the platform's own chip is the
     * option (Material 3's filter chip).
     */
    option?: Pick<ChipSkin, "base" | "sidePadding" | "labelType" | "selectedCheck" | "hoverBrightness"> & {
        /** The 30 px square an icon-only option, or a `square` one, takes. */
        iconOnly: ViewStyle;
        /** The label type inside that square (the hand-off's "none" pick: 500 10 px mono). */
        tileLabelType: TextStyle;
    };
    /**
     * The `token` chip's geometry and type over this skin (the hand-off's Tokens chips: a
     * 32 px pill, 8 between elements, 12 on the text side and 6 beside the 20 px swatch, a
     * 500 12 px mono label, no check, no hover). Omit where the platform's own chip is the
     * token tag (Material 3).
     */
    token?: Pick<ChipSkin, "base" | "sidePadding" | "labelType" | "selectedCheck" | "hoverBrightness">;
    /**
     * The `link` chip's geometry and type over this skin (the hand-off's section card link
     * pill: 26 tall at the full round, 10 at both sides, 6 between elements, a 500 12/12
     * label, no check), and whether a press keeps the resting look (the hand-off draws no
     * press state). Its hover is the skin's link hover (the accent ink
     * inside the accent edge). Omit where the platform's own chip is the link (Material 3's
     * assist chip).
     */
    link?: Pick<ChipSkin, "base" | "sidePadding" | "labelType" | "selectedCheck"> & {
        steadyPress: boolean;
    };
    /** Smaller passive-tag geometry where the platform supports it. */
    small?: Pick<ChipSkin, "base" | "sidePadding" | "labelType" | "bodyMinTarget">;
}
export interface ChipProps {
    /** The chip label. */
    children?: ReactNode;
    /** A dimmed trailing count, set in the mono face. */
    count?: number | string;
    /** Pin a chip within an app-owned host layout. */
    start?: boolean;
    /** A leading element (e.g. an `<Icon />` or a small `<Avatar />`). An `<Icon />` is
     *  auto-tinted to the chip's label color unless it sets its own color. */
    icon?: ReactNode;
    /** A trailing element (e.g. a chevron for a menu trigger). Rendered after the label. */
    trailing?: ReactNode;
    /**
     * Makes the whole chip tappable (e.g. toggling a filter). Called with the press event,
     * which a ChipGroup option's Space key does not have, so an `href` chip that routes on the
     * client calls `event?.preventDefault()` here.
     */
    onPress?: (event?: GestureResponderEvent) => void;
    /**
     * Makes the chip a LINK to this destination (a route or a URL): on the web
     * react-native-web renders the chip as an `<a href>`, so middle-click, cmd-click and
     * open-in-new-tab work and assistive tech hears a link; it takes the link chip's hover
     * (the accent ink inside an accent edge) in place of the brightening. Native platforms
     * have no anchors, so pair it with an `onPress` that navigates through the host's
     * router, as Button's `href` does. While `disabled` the anchor is suppressed. A link is
     * not a toggle, so it is ignored on a selectable chip or a ChipGroup option.
     */
    href?: string;
    /**
     * Anchor attributes forwarded with `href` on the web (react-native-web's `hrefAttrs`):
     * `target`, `rel`, `download`. Ignored without `href`, and everywhere natively.
     */
    hrefAttrs?: {
        target?: "_blank" | "_self";
        rel?: string;
        download?: boolean | string;
    };
    /** Adds a trailing "×" remove button firing this handler. */
    onRemove?: () => void;
    /**
     * Turns the chip into a filter toggle that owns its own selected state: pressing
     * <!-- only: web ios -->
     * it lights up (to the accent's soft wash, inside an accent edge on the web and iOS)
     * <!-- /only -->
     * <!-- only: android -->
     * it lights up (to the accent's soft wash)
     * <!-- /only -->
     * and back. Selection is controlled via `selected`, uncontrolled via `defaultSelected`.
     */
    selectable?: boolean;
    /** Selected state for a selectable chip (CONTROLLED). Omit for uncontrolled use. */
    selected?: boolean;
    /** Initial selected state for an uncontrolled selectable chip. */
    defaultSelected?: boolean;
    /** Fired with the next selected state when a selectable chip is pressed. */
    onSelectedChange?: (selected: boolean) => void;
    /**
     * The chip's option value inside a ChipGroup: the chip is one option of the pick-one
     * set, selected when the group's value is this one, and reads as a radio. Ignored
     * outside a group.
     */
    value?: string | number;
    success?: boolean;
    warning?: boolean;
    /** The danger tone. This is the name the intent axis uses across the kit (Button,
     *  AlertDialog, and every chart) and the one the design hand-off uses here too. */
    destructive?: boolean;
    info?: boolean;
    neutral?: boolean;
    red?: boolean;
    orange?: boolean;
    amber?: boolean;
    yellow?: boolean;
    lime?: boolean;
    green?: boolean;
    emerald?: boolean;
    teal?: boolean;
    cyan?: boolean;
    sky?: boolean;
    blue?: boolean;
    indigo?: boolean;
    violet?: boolean;
    fuchsia?: boolean;
    purple?: boolean;
    pink?: boolean;
    rose?: boolean;
    gray?: boolean;
    secondary?: boolean;
    primary?: boolean;
    outline?: boolean;
    /**
     * A compact option in a settings panel, the hand-off playground's knob pick: 26 tall at a
     * small corner, a 500 12px label and no check, idle a bare field-border edge around the
     * muted ink, selected the accent's soft wash inside its edge. An icon-only option is a
     * 30 px square. A ChipGroup's `option` sets it on every chip.
     * <!-- only: web android -->
     * On Android an option is the Material 3 chip.
     * <!-- /only -->
     */
    option?: boolean;
    /**
     * A token tag, the hand-off's Tokens chip: a 32 px pill in the card fill inside the
     * hairline, 8 between elements, a 500 12 px mono label, 12 on the text side and 6 beside
     * its leading element, which is sized for a 20 px swatch
     * (`<Chip token icon={<Swatch tiny ring circle color={tokens.primary} />}>`).
     * <!-- only: web android -->
     * On Android a token tag is the Material 3 chip.
     * <!-- /only -->
     */
    token?: boolean;
    /**
     * A link to another page, the hand-off's section card link pill: 26 tall at the full
     * round, 10 at both sides, a 500 12 px label in the secondary ink on the popover fill
     * inside the field-border edge; a hovering pointer turns the label and the edge to the
     * accent. Pair it with `href` (and a trailing `<Icon arrowUpRight size={12} />`, which
     * takes the label's ink).
     * A press keeps the resting look, as the hand-off draws it.
     * <!-- only: web android -->
     * On Android a link is the Material 3 assist chip.
     * <!-- /only -->
     */
    link?: boolean;
    /**
     * Forces an `option` chip to the 30 px square an icon-only option takes, even when it
     * carries a label and no icon; a label inside the square is set in the tile's own type,
     * a 500 10 px mono line (the hand-off's "none" pick in an icon knob). Ignored off the
     * `option` look.
     */
    square?: boolean;
    /** A small metadata tag; option, token and link looks retain their own dimensions. */
    small?: boolean;
    disabled?: boolean;
    /** Keep resting opacity while pressed, preserving the reference filter treatment. */
    steadyPress?: boolean;
    accessibilityLabel?: string;
    /** E2E hook forwarded to the root element. */
    testID?: string;
    /** For layout composition only (not styling). */
    style?: LayoutStyle;
}
export declare function colorOf(p: ChipProps): {
    tone: StatusColorTone | null;
    hue: Hue | null;
    mutedGray: boolean;
};
/** The chip's look: `token` wins over `option`, and `option` over `link`; null is the chip itself. */
export type ChipLook = "token" | "option" | "link";
export declare function lookOf(p: Pick<ChipProps, "token" | "option" | "link">): ChipLook | null;
export declare const HUE_ANGLE: Record<Hue, number>;
export declare const HUE_CHIP: {
    readonly l: 0.7;
    readonly c: 0.15;
    readonly wash: 0.16;
    readonly edge: 0.3;
    readonly ink: {
        readonly l: 0.64;
        readonly c: 0.17;
        readonly mix: 0.72;
    };
};
export declare function hueChip(hue: Hue, tokens: ColorTokens, dark: boolean): {
    wash: string;
    edge: string;
    ink: string;
};
/** Build a Chip from a platform skin. */
export declare function createChip(platformSkin: ChipSkin): (props: ChipProps) => import("react").JSX.Element;
//# sourceMappingURL=chip.shared.d.ts.map