import * as React from "react";
import { type VariantProps } from "class-variance-authority";
import type { ShapeProp, ToneProp } from "../../props/vocabulary/index.js";
export type BadgeVariant = "default" | "secondary" | "outline" | "dashed";
/**
 * Badge tones extend the shared status `ToneProp` with a brand `primary` tone — a SOFT brand pill
 * (tinted fill + brand text), the dashboard "role pill" pattern. The status tones stay status-only;
 * for a SOLID brand fill use `variant="default"`.
 */
export type BadgeTone = ToneProp | "primary";
declare const badgeVariants: (props?: ({
    variant?: "dashed" | "default" | "outline" | "secondary" | "tinted" | null | undefined;
    shape?: "default" | "pill" | "sharp" | null | undefined;
} & import("class-variance-authority/types").ClassProp) | undefined) => string;
export interface BadgeProps extends Omit<React.HTMLAttributes<HTMLDivElement>, "children">, Omit<VariantProps<typeof badgeVariants>, "variant" | "shape"> {
    variant?: BadgeVariant | null;
    /**
     * Render element — `div` (default) or `span` when the chip sits in a PHRASING context and a
     * `<div>` would be invalid HTML: inside a `TabsTrigger`/`PopoverTrigger`/`Button` (all render a
     * `<button>`, whose content model is phrasing content only), inside a `<label>` or a `<p>`.
     * It swaps the TAG only — the chip's own `inline-flex` box, icon and label are unchanged, and
     * both the icon `<svg>` and the label `<span>` are already phrasing content.
     */
    as?: "div" | "span";
    /** Corner shape — `default` (badge radius) · `pill` (fully rounded) · `sharp` (square). */
    shape?: ShapeProp | null;
    tone?: BadgeTone | null;
    /**
     * The entity's OWN colour — a status colour, an issue type, a tag — as a CSS
     * colour. A third axis beside `variant` (structure) and `tone` (meaning):
     * this one carries DATA, a colour a person picked in a settings screen.
     *
     * The chip is washed rather than filled, and the reason is a contrast floor
     * rather than taste: no foreground clears WCAG AA against every colour a
     * picker can produce (near-black and white measure equal at luminance 0.2029,
     * both 4.15:1). Washing the colour `--badge-tint-fill` into
     * `--badge-tint-surface` and keeping the surface's own label makes the ratio
     * a function of the tokens instead — 8.52:1 at the defaults, worst case
     * across the sRGB cube on both themes.
     *
     * Wins over `tone` and over `variant`'s fill when both are given.
     */
    color?: string;
    icon?: React.ComponentType<{
        className?: string;
    }> | null;
    status?: string;
    /**
     * Lining, fixed-width figures — for a chip whose content is a COUNT that sits in a column with
     * other counts (a queue length per row, an unread tally per tab, a defect count per site). With
     * proportional figures a `1` is narrower than a `0`, so the chips jitter and the numbers do not
     * line up down the column; it is the same axis `Text`, `TableCell` and `StatCard` already carry,
     * and its absence here was the asymmetry rather than a decision.
     *
     * MEASURE IT BEFORE YOU EXPECT PIXELS TO MOVE. With the stack this library ships,
     * `font-variant-numeric` changes nothing: measured in Chromium at the chip's own 12.47px,
     * `"1111"` and `"0000"` both advance **31.094px** with and without `tabular-nums`, because the
     * resolved face already gives its figures one advance. What this prop buys is the DECLARATION —
     * it survives a service retuning `--font-family-sans` to a face whose figures are proportional,
     * which is the same reason `Text`, `TableCell` and `StatCard` carry the axis.
     *
     * It is also NOT the fix for chips of DIFFERENT WIDTHS down a column: `11` and `100` are two
     * and three figures, so they are two widths whatever the face does. That is a minimum measure on
     * the chip, and it belongs to the screen.
     *
     * There WAS a legal move — `<Badge><Text size="xs" tabular>12</Text></Badge>` measures the same
     * 12.47px as the chip's own label. It just requires the call site to know that a Badge's type
     * step is `xs`, which is the chip's own `--badge-font-size` token and not a fact a consumer
     * should have to carry: retune that token in a theme and every such call site silently desyncs.
     *
     * Off by default. Tabular figures are wider than proportional ones in a face that has both, so a
     * chip carrying WORDS should not pay for them.
     */
    tabular?: boolean;
    children?: React.ReactNode;
    /**
     * antd `Tag` `closable` + `onClose` — one callback when the user activates the × the chip draws.
     * Named `onRemove` (not `onClose`) because this DS already uses `onClose` on overlays and
     * `onValueChange` on fields; the chip remover is not a dismiss surface. Omitting it is antd
     * `closable={false}`: no × is rendered.
     *
     * The × accessible name is built from the visible label (`children`, or the resolved `status`
     * label) via `navigation.filterBar.removeFilter`, e.g. `getByRole('button', { name: /期限: 今週/ })`.
     * When `children` is not a string (a link, a formatted node) the name is read from the label's
     * rendered text instead, so several removable chips never share one bare "Delete" (gh#706).
     */
    onRemove?: () => void;
    /**
     * The × button's full accessible name, verbatim — antd 5.15+ `closable={{ 'aria-label' }}`.
     * Wins over the name derived from the label. Use it when the chip's text alone does not say what
     * removing it does.
     */
    removeLabel?: string;
    /** Disables only the × when `onRemove` is set (FilterBar bar/chip disabled). Label stays visible. */
    removeDisabled?: boolean;
}
export declare function Badge({ as: Element, className, variant, shape, tone, color, icon, status, tabular, style, children, onRemove, removeLabel: removeLabelProp, removeDisabled, ...props }: BadgeProps): React.JSX.Element;
/**
 * Status-aware badge with the shared domain-status-to-tone mapping. `Badge` remains the
 * general-purpose primitive.
 */
export declare const StatusBadge: typeof Badge;
export {};