import * as react_jsx_runtime from 'react/jsx-runtime';
import * as React from 'react';
import { ReactNode, ComponentProps } from 'react';
import * as class_variance_authority_types from 'class-variance-authority/types';
import { useRender } from '@base-ui/react/use-render';
import { VariantProps } from 'class-variance-authority';

declare const badgeToneStyles: {
    readonly default: "bg-[var(--theme-background-badge-default)] text-[var(--theme-text-secondary)] border-[color:color-mix(in_srgb,var(--theme-stroke-default)_78%,transparent)]";
    readonly gray: "bg-[var(--theme-background-badge-gray)] text-[var(--theme-text-secondary)] border-transparent";
    readonly red: "bg-[var(--theme-background-badge-red)] text-[#b11e1b] border-transparent dark:text-[#ee6e6c]";
    readonly orange: "bg-[var(--theme-background-badge-orange)] text-[#a73b0c] border-transparent dark:text-[#f38f36]";
    readonly amber: "bg-[var(--theme-background-badge-amber)] text-[#8a5800] border-transparent dark:text-[#f5bd1e]";
    readonly yellow: "bg-[var(--theme-background-badge-yellow)] text-[#816000] border-transparent dark:text-[#f5ca0f]";
    readonly lime: "bg-[var(--theme-background-badge-lime)] text-[#587f00] border-transparent dark:text-[#abe435]";
    readonly green: "bg-[var(--theme-background-badge-green)] text-[#33803f] border-transparent dark:text-[#66dc7e]";
    readonly emerald: "bg-[var(--theme-background-badge-emerald)] text-[#17785f] border-transparent dark:text-[#56d197]";
    readonly teal: "bg-[var(--theme-background-badge-teal)] text-[#0f776b] border-transparent dark:text-[#53d2be]";
    readonly cyan: "bg-[var(--theme-background-badge-cyan)] text-[#036f91] border-transparent dark:text-[#4ad0ef]";
    readonly sky: "bg-[var(--theme-background-badge-sky)] text-[#0f67aa] border-transparent dark:text-[#4db9fa]";
    readonly blue: "bg-[var(--theme-background-badge-blue)] text-[#2147dd] border-transparent dark:text-[#65a0fd]";
    readonly indigo: "bg-[var(--theme-background-badge-indigo)] text-[#4338ca] border-transparent dark:text-[#7e86fb]";
    readonly violet: "bg-[var(--theme-background-badge-violet)] text-[#6d28d9] border-transparent dark:text-[#a185fd]";
    readonly purple: "bg-[var(--theme-background-badge-purple)] text-[#7c3aed] border-transparent dark:text-[#b87efe]";
    readonly fuchsia: "bg-[var(--theme-background-badge-fuchsia)] text-[#9a15b1] border-transparent dark:text-[#dd72fa]";
    readonly pink: "bg-[var(--theme-background-badge-pink)] text-[#b4237b] border-transparent dark:text-[#ea6eb3]";
    readonly rose: "bg-[var(--theme-background-badge-rose)] text-[#be123c] border-transparent dark:text-[#f16e81]";
};
type BadgeTone = keyof typeof badgeToneStyles;
declare const badgeVariants: (props?: ({
    variant?: "default" | "soft" | "link" | "outline" | "secondary" | "ghost" | "destructive" | null | undefined;
    shape?: "default" | "pill" | null | undefined;
    size?: "sm" | "md" | null | undefined;
} & class_variance_authority_types.ClassProp) | undefined) => string;
interface BadgeProps extends useRender.ComponentProps<"span">, VariantProps<typeof badgeVariants> {
    leadingVisual?: ReactNode;
    trailingVisual?: ReactNode;
    tone?: BadgeTone;
}
declare function Badge({ children, className, leadingVisual, tone, trailingVisual, variant, shape, size, render, ...props }: BadgeProps): React.ReactElement<unknown, string | React.JSXElementConstructor<any>>;
declare function BadgeDot({ className, tone, ...props }: ComponentProps<"span"> & {
    tone?: BadgeTone;
}): react_jsx_runtime.JSX.Element;
/** −2px height vs default `size="sm"` + `shape="pill"` (1px less vertical padding per side). */
declare const badgeSmPillCompactClassName = "min-h-[18px] py-px";

export { Badge, BadgeDot, type BadgeProps, type BadgeTone, badgeSmPillCompactClassName, badgeVariants };
