import { HTMLMotionProps } from 'motion/react';
import * as React from 'react';
import { d as MD3SlotWidth } from './md3-BQhRygSi.js';

/**
 * @file icon-button.tsx
 *
 * MD3 Expressive Icon Button component.
 *
 * An icon-only button with shape morphing, ripple effect, loading state,
 * and toggle variant. Requires `aria-label` for accessibility since there
 * is no visible text label.
 *
 * @see https://m3.material.io/components/icon-buttons/overview
 */

type MotionButtonProps = Omit<HTMLMotionProps<"button">, "children" | "color">;
/**
 * Base props for the Icon Button component.
 *
 * @see {@link IconButtonProps} for the full discriminated union.
 * @see https://m3.material.io/components/icon-buttons/overview
 */
interface BaseIconButtonProps extends MotionButtonProps {
    /**
     * Visual color style following MD3 color roles.
     * @default "standard"
     */
    colorStyle?: "standard" | "filled" | "tonal" | "outlined";
    /**
     * Button container size.
     * Sizes: XS=32dp, SM=40dp, MD=56dp, LG=96dp, XL=136dp.
     * @default "sm"
     */
    size?: "xs" | "sm" | "md" | "lg" | "xl";
    /**
     * Container width ratio per MD3 Expressive icon button specification.
     * Controls horizontal compression/expansion independent of `size`.
     * - `"narrow"` – compressed aspect ratio, suited for dense toolbars.
     * - `"default"` – 1:1 square/round aspect ratio (standard icon button).
     * - `"wide"` – extended width, for icon buttons with more visual weight.
     *
     * Note: This prop controls the width-to-height ratio, not the physical size scale.
     * Use `size` to control the container height/diameter.
     * Use `fullWidth` (Button) for stretching to container width — different concept.
     * @default "default"
     */
    width?: MD3SlotWidth;
    /**
     * Container shape controlling border-radius morphing.
     * - `round`: fully circular (CornerFull).
     * - `square`: rounded square (CornerMedium–CornerExtraLarge per size).
     * @default "round"
     */
    shape?: "round" | "square";
    /**
     * An optional icon to display when the icon button is in a selected toggle state (`variant="toggle"` and `selected={true}`).
     * If omitted, falls back to `children`.
     */
    selectedIcon?: React.ReactNode;
    /**
     * When `true`, replaces the icon with an animated loading indicator.
     * Interaction is blocked and `aria-busy` is set.
     * @default false
     */
    loading?: boolean;
    /**
     * Spinner style shown while `loading={true}`.
     * @default "loading-indicator"
     */
    loadingVariant?: "loading-indicator" | "circular";
    /** Explicit icon size override in px */
    iconSize?: number | "inherit";
    /** Icon content — typically a single SVG icon component. */
    children: React.ReactNode;
    /**
     * Accessible label — **REQUIRED** because icon buttons have no visible text.
     *
     * @example "Close", "Add to favourites", "Toggle dark mode"
     * @see https://m3.material.io/components/icon-buttons/accessibility
     */
    "aria-label": string;
    /**
     * Change the component to the underlying child element and merge props/behavior.
     * Useful when wrapping in Next.js `<Link>` or custom anchor tags.
     * @default false
     */
    asChild?: boolean;
}
/**
 * Complete `IconButton` props — discriminated union that enforces
 * `selected` is only valid with `variant="toggle"`.
 *
 * @example
 * ```tsx
 * // Standard
 * <IconButton aria-label="Close" onClick={handleClose}>
 *   <XIcon />
 * </IconButton>
 *
 * // Toggle
 * <IconButton
 *   variant="toggle"
 *   selected={isLiked}
 *   aria-label={isLiked ? "Unlike" : "Like"}
 *   colorStyle="filled"
 *   onClick={() => setIsLiked(!isLiked)}
 * >
 *   <HeartIcon />
 * </IconButton>
 * ```
 *
 * @see https://m3.material.io/components/icon-buttons/overview
 */
type IconButtonProps = BaseIconButtonProps & ({
    variant?: "default";
    selected?: never;
} | {
    variant: "toggle";
    selected: boolean;
});
/**
 * MD3 Expressive Icon Button.
 *
 * An icon-only button with spring shape morphing, ripple effect, loading state support,
 * and an optional toggle variant. Compliant with MD3 Expressive sizing and WCAG 2.5.5
 * (touch target minimum for XS and SM sizes).
 *
 * @remarks
 * - `aria-label` is **required** — icon buttons have no visible text label.
 * - `variant="toggle"` requires `selected: boolean`.
 * - Touch target is automatically extended to 48dp for `xs` and `sm` sizes.
 *
 * @example
 * ```tsx
 * <IconButton aria-label="Close" onClick={handleClose}>
 *   <XIcon />
 * </IconButton>
 *
 * <IconButton
 *   variant="toggle"
 *   selected={isBookmarked}
 *   aria-label={isBookmarked ? "Remove bookmark" : "Bookmark"}
 *   colorStyle="filled"
 *   onClick={toggleBookmark}
 * >
 *   <BookmarkIcon />
 * </IconButton>
 * ```
 *
 * @see https://m3.material.io/components/icon-buttons/overview
 */
declare const IconButton: React.NamedExoticComponent<(Omit<BaseIconButtonProps & {
    variant?: "default";
    selected?: never;
}, "ref"> | Omit<BaseIconButtonProps & {
    variant: "toggle";
    selected: boolean;
}, "ref">) & React.RefAttributes<HTMLButtonElement>>;

export { type BaseIconButtonProps as B, IconButton as I, type IconButtonProps as a };