/**
 * @usevyre/react — Tag
 *
 * AI CONTEXT:
 * ┌─────────────────────────────────────────────────────────┐
 * │ Component:  Tag                                         │
 * │ Import:     import { Tag } from "@usevyre/react"        │
 * │                                                         │
 * │ Props:                                                  │
 * │   variant  = "default"(default)|"accent"|"danger"      │
 * │   size     = "sm"|"md"(default)|"lg"                    │
 * │   onRemove = () => void  (renders × remove button)      │
 * │   onClick  = () => void  (makes the tag interactive)    │
 * │                                                         │
 * │ Standalone display tag/chip. NOT an input — for tag     │
 * │ INPUT use TagsInput. Group multiple with TagGroup.      │
 * └─────────────────────────────────────────────────────────┘
 *
 * @example
 * <Tag>Design</Tag>
 * <Tag variant="accent" size="lg">Featured</Tag>
 * <Tag onRemove={() => removeFilter("react")}>react</Tag>
 * <Tag onClick={() => toggleFilter("vue")}>vue</Tag>
 */
import React from "react";
import type { BaseProps } from "../../types";
export type TagVariant = "default" | "accent" | "danger";
export type TagSize = "sm" | "md" | "lg";
export interface TagProps extends Omit<React.HTMLAttributes<HTMLSpanElement>, "onClick">, BaseProps {
    /** Visual style */
    variant?: TagVariant;
    /** Size scale */
    size?: TagSize;
    /** When provided, renders a × button that calls this on click */
    onRemove?: () => void;
    /** When provided, makes the whole tag interactive (button-like) */
    onClick?: () => void;
    /** Disable interaction (only relevant with onClick or onRemove) */
    disabled?: boolean;
}
export declare const Tag: React.ForwardRefExoticComponent<TagProps & React.RefAttributes<HTMLSpanElement>>;