import * as React from 'react';
import { ComponentType, SVGProps, ButtonHTMLAttributes, ElementType, AnchorHTMLAttributes } from 'react';

/** Props for the Icon wrapper component. */
interface IconProps {
    /** The SVG icon component to render (e.g., from @tabler/icons-react). */
    icon: ComponentType<SVGProps<SVGSVGElement>>;
    /** Icon size in pixels. Affects both width/height and stroke width scaling. @default 20 */
    size?: number;
    /** Override the icon's stroke/fill color. Defaults to `currentColor`. */
    color?: string;
    /** Additional CSS class name for the wrapper element. */
    className?: string;
    /** Accessible label for the icon. Required when the icon conveys meaning not present in surrounding text. */
    "aria-label"?: string;
}

declare const Icon: React.ForwardRefExoticComponent<IconProps & React.RefAttributes<HTMLSpanElement>>;

/** Available button sizes. "small" = 28px tap target, "medium" = 32px. */
type IconButtonSize = "small" | "medium";
/** Button shape variant. "short" = square (default), "long" = pill / wider hit area. */
type IconButtonVariant = "short" | "long";
/**
 * Semantic intent controlling fill + color — mirrors `Button`'s `intent`.
 * - "secondary" — subtle transparent ghost with a brown glyph (default; the original IconButton look).
 * - "primary" — filled brown-100 background with a white glyph, for a prominent icon-only CTA.
 * - "error" — filled red background with a white glyph, for destructive / retry actions.
 */
type IconButtonIntent = "primary" | "secondary" | "error";
/** Props for the IconButton ghost-style button component. Extends the native button attribute set
 * (minus the props we own — `disabled`, `onClick`, `className`, `id`, `aria-label`) so consumers
 * can wire DOM-level events through, e.g. when wrapping IconButton in Radix's `Tooltip` /
 * `Popover` / `DropdownMenu` (which pass `onPointerEnter`, `onFocus`, `onBlur`, etc. via Slot). */
interface IconButtonProps extends Omit<ButtonHTMLAttributes<HTMLButtonElement>, "disabled" | "onClick" | "className" | "id" | "aria-label" | "type"> {
    /** The SVG icon component to render inside the button. */
    icon: ComponentType<SVGProps<SVGSVGElement>>;
    /** Button tap-target size. @default "small" */
    size?: IconButtonSize;
    /** Shape variant — "short" for square, "long" for pill. @default "short" */
    variant?: IconButtonVariant;
    /** Semantic intent controlling fill + color. "secondary" = ghost (default), "primary" = filled CTA, "error" = filled red. @default "secondary" */
    intent?: IconButtonIntent;
    /** Whether the button is in a toggled/active state (e.g., "liked"). */
    isSelected?: boolean;
    /** Whether the button is non-interactive. */
    disabled?: boolean;
    /** Click handler. */
    onClick?: () => void;
    /** Additional CSS class name. */
    className?: string;
    /** HTML `id` attribute. */
    id?: string;
    /** Polymorphic `as` prop — render as a different element (e.g., `"a"` or a custom component). */
    as?: ElementType;
    /** Accessible label for the button action. */
    "aria-label"?: string;
    /**
     * Anchor-only attributes forwarded when `as="a"`. Optional on every shape so the type works
     * polymorphically; the underlying element ignores them when rendering as a native `<button>`.
     */
    href?: AnchorHTMLAttributes<HTMLAnchorElement>["href"];
    target?: AnchorHTMLAttributes<HTMLAnchorElement>["target"];
    rel?: AnchorHTMLAttributes<HTMLAnchorElement>["rel"];
    download?: AnchorHTMLAttributes<HTMLAnchorElement>["download"];
}

/** Icon-only button. `forwardRef` + the rest-props spread so Radix `Slot`-based wrappers
 * (Tooltip, Popover, DropdownMenu) can attach refs and event handlers via `asChild`. */
declare const IconButton: React.ForwardRefExoticComponent<IconButtonProps & React.RefAttributes<HTMLButtonElement>>;

export { Icon, IconButton, type IconButtonIntent, type IconButtonProps, type IconButtonSize, type IconButtonVariant, type IconProps };
