import * as react_jsx_runtime from 'react/jsx-runtime';
import * as React$1 from 'react';

type SafeHTMLSpanAttrs = Omit<React$1.HTMLAttributes<HTMLSpanElement>, "onDrag" | "onDragStart" | "onDragEnd" | "onDragEnter" | "onDragLeave" | "onDragOver" | "onDrop">;
interface BadgeProps extends SafeHTMLSpanAttrs {
    /**
     * The content to display inside the badge.
     * - Omitted / undefined → renders as a small 6×6px dot (decorative).
     * - string | number    → renders as a large badge (min 16px height) with label.
     *
     * Numbers exceeding `max` are displayed as `{max}+`.
     * Strings longer than 4 characters are truncated to 4.
     */
    children?: React$1.ReactNode;
    /**
     * Maximum numeric value to display before appending "+".
     * Only applies when `children` is a number.
     * @example max={99} + children={150} → "99+"
     */
    max?: number;
    /**
     * Override the background (container) color.
     * Accepts any valid CSS color value.
     * Defaults to MD3 `error` token — `bg-m3-error`.
     */
    containerColor?: string;
    /**
     * Override the text/content color.
     * Accepts any valid CSS color value.
     * Defaults to MD3 `on-error` token — `text-m3-on-error`.
     */
    contentColor?: string;
}
interface BadgedBoxProps {
    /**
     * The badge element to overlay on the anchor.
     * Typically a `<Badge />`.
     */
    badge: React$1.ReactNode;
    /**
     * The anchor content that the badge is attached to.
     */
    children: React$1.ReactNode;
    /**
     * Additional className applied to the outer wrapper `span`.
     */
    className?: string;
    /**
    /**
     * Explicitly override size detection for badge positioning per MD3 specification.
     * - `'sm'` → Small badge (dot): BadgeOffset = 6dp → translate(50%, -50%)
     * - `'lg'` → Large badge (text): HOffset=12dp/VOffset=14dp → translate(35%, -35%)
     * When omitted, BadgedBox auto-detects by inspecting `badge` children prop.
     * @default auto-detected
     */
    size?: "sm" | "lg";
}
/**
 * MD3 Expressive Badge — dynamic status indicator.
 *
 * @example
 * ```tsx
 * // Small dot badge (no content) — decorative
 * <Badge />
 *
 * // Large badge with number (truncated at max)
 * <Badge max={99}>150</Badge>
 * // → displays "99+"
 *
 * // Large badge with text label
 * <Badge>NEW</Badge>
 *
 * // Custom colors
 * <Badge containerColor="#6750A4" contentColor="#FFFFFF">3</Badge>
 * ```
 *
 * @see https://m3.material.io/components/badge/overview
 */
declare const Badge: React$1.NamedExoticComponent<BadgeProps & React$1.RefAttributes<HTMLSpanElement>>;
/**
 * MD3 BadgedBox — positions a Badge at the top-trailing corner of an anchor.
 *
 * Implements MD3 offset specs from Badge.kt:
 * - Small badge (dot): `BadgeOffset = 6dp` → translate(50%, -50%)
 * - Large badge (text): `BadgeWithContentHorizontalOffset = 12dp` / `VerticalOffset = 14dp`
 *   → translate(35%, -35%)
 *
 * Auto-detects badge size by inspecting the badge element's children prop,
 * or accepts an explicit `size` override.
 *
 * @example
 * ```tsx
 * // Small dot on mail icon
 * <BadgedBox badge={<Badge />}>
 *   <Icon name="mail" />
 * </BadgedBox>
 *
 * // Count badge on notification icon
 * <BadgedBox badge={<Badge max={99}>{count}</Badge>}>
 *   <Icon name="notifications" />
 * </BadgedBox>
 * ```
 */
declare function BadgedBox({ badge, children, className, size, }: BadgedBoxProps): react_jsx_runtime.JSX.Element;

interface LoadingIndicatorProps extends Omit<React$1.HTMLAttributes<HTMLDivElement>, "children"> {
    /**
     * Visual style variant.
     * - `uncontained` (default): bare indicator, no container background
     * - `contained`: indicator inside a circular container
     *   (MD3 spec: 38dp container / 24dp active indicator)
     */
    variant?: "uncontained" | "contained";
    /**
     * Indicator size in dp (pixels). Clamped to the MD3 spec range [24dp, 240dp].
     * Defaults to 48dp.
     *
     * Size guidelines:
     * - Small displays: 24–48dp
     * - Medium displays: 48–80dp
     * - Large/XL displays (desktop): up to 240dp
     *
     * @default 48
     */
    size?: number;
    /**
     * Determinate progress value between 0 and 1.
     * - **Omit** (default) for indeterminate mode: continuous morphing loop.
     * - **Provide** for determinate mode: Circle→SoftBurst morph + counterclockwise rotation.
     *
     * @example `progress={0.7}` shows 70% progress
     */
    progress?: number;
    /**
     * Active indicator color override. Falls back to MD3 system color tokens.
     * Supports any valid CSS color value or CSS variable.
     * @example "#ff5722" | "var(--brand-color)"
     */
    color?: string;
    /**
     * Required accessible label describing what is loading.
     * @example "Loading news article"
     */
    "aria-label": string;
}
declare const LoadingIndicator: React$1.ForwardRefExoticComponent<LoadingIndicatorProps & React$1.RefAttributes<HTMLDivElement>>;

interface ProgressBaseProps extends Omit<React$1.HTMLAttributes<HTMLDivElement>, "children"> {
    /**
     * Current progress percentage value (between 0 and 100).
     * If provided, the indicator will display in Determinate state.
     * If omitted (undefined), the indicator defaults to Indeterminate state.
     *
     * @example
     * ```tsx
     * <ProgressIndicator value={45} aria-label="Loading profile..." />
     * ```
     */
    value?: number;
    /**
     * Accessible label describing the purpose of the progress indicator for screen readers (required).
     */
    "aria-label": string;
    /**
     * Track thickness of the progress indicator (in px).
     * - For Linear: height of the progress bar.
     * - For Circular: stroke thickness of the circle outline.
     *
     * @example
     * trackHeight={8} // Thicker than default
     */
    trackHeight?: number;
    /**
     * Color of the active progress indicator.
     * Defaults to `currentColor` of the parent element for easy styling via utility classes.
     *
     * @example
     * color="var(--md-sys-color-primary)" // Custom design token
     */
    color?: string;
    /**
     * Color of the track (inactive background portion).
     * Defaults to a surface-calculated tone or subtle opacity.
     */
    trackColor?: string;
}
interface LinearProgressProps extends ProgressBaseProps {
    /** Variant classification for Linear progress bar layout. */
    variant: "linear";
    /**
     * Shape profile of the active indicator.
     * - `flat`: Smooth solid line (default)
     * - `wavy`: Dynamic animated wave line
     */
    shape?: "flat" | "wavy";
    /**
     * Shape profile of the background track.
     * - `flat`: Smooth solid line (default)
     * - `wavy`: Static or dynamic wave line
     */
    trackShape?: "flat" | "wavy";
    /**
     * Wave amplitude (applies when `shape` or `trackShape` is "wavy").
     * Specifies the height offset of the wave ripples.
     */
    amplitude?: number;
    /**
     * Wavelength of a single wave cycle (applies when `shape` is "wavy" in determinate mode).
     * Distance between adjacent crests.
     */
    wavelength?: number;
    /**
     * Wavelength reserved for continuous animation in Indeterminate Wavy mode.
     */
    indeterminateWavelength?: number;
    /**
     * Gap size between active indicator segments and background track.
     * Can be set to `0` for seamless continuous touching lines.
     *
     * @example
     * ```tsx
     * <ProgressIndicator variant="linear" shape="wavy" gapSize={0} /> // Seamless wave
     * ```
     */
    gapSize?: number;
    /**
     * Wave oscillation speed multiplier. Defaults to `1`.
     * Increase value (e.g. 1.5, 2) for faster wave movement.
     */
    waveSpeed?: number;
    /**
     * Crawler speed multiplier along the track for Indeterminate mode.
     * Defaults to `1`.
     */
    crawlerSpeed?: number;
    /**
     * Configuration for wave damping near edge thresholds (<= 10% or >= 90%).
     * - `md3`: Smoothly flattens wave amplitude to zero near edges (Google MD3 standard).
     * - `continuous`: Ignores damping, preserving wave motion across all percentages.
     *
     * @example
     * ```tsx
     * <ProgressIndicator variant="linear" shape="wavy" determinateAnimation="continuous" />
     * ```
     */
    determinateAnimation?: "md3" | "continuous";
    /**
     * Physics movement style for Indeterminate Linear mode.
     * - `md3`: Renders two sliding & stretching physics-simulated lines (Google MD3 standard).
     * - `continuous`: Renders a continuous smooth looping bar.
     *
     * @example
     * ```tsx
     * <ProgressIndicator variant="linear" indeterminateAnimation="continuous" />
     * ```
     */
    indeterminateAnimation?: "md3" | "continuous";
    /**
     * Toggle stop indicator dot at the end of the track.
     * - `true`: Always displays a tiny stop indicator dot at the end of the path
     * - `false`: Completely disabled
     * - `"auto"`: Stop dot appears and fades in only when progress reaches 100%
     */
    showStopIndicator?: boolean | "auto";
}
interface CircularProgressProps extends ProgressBaseProps {
    /** Variant classification for Circular progress indicator. */
    variant: "circular";
    /**
     * Display diameter of the circular progress ring in px.
     *
     * @example
     * ```tsx
     * <ProgressIndicator variant="circular" size={48} aria-label="Loading..." />
     * ```
     */
    size?: number;
    /**
     * Stroke style profile of the ring outline.
     * - `flat`: Solid line with rounded caps.
     * - `wavy`: Oscillating wavy line pattern.
     */
    shape?: "flat" | "wavy";
    /**
     * Shape profile of the background track in Determinate mode.
     * - `flat`: Smooth circular ring line (default)
     * - `wavy`: Matching wave line contour as the active indicator
     *
     * @default "flat"
     */
    trackShape?: "flat" | "wavy";
    /**
     * Wave amplitude profile for `wavy` circular indicators.
     */
    amplitude?: number;
    /** Wavelength cycle total around the circumference. */
    wavelength?: number;
    /** Gap distance separating line ends. */
    gapSize?: number;
    /**
     * Speed multiplier for wavy animation ripples. Defaults to `1`.
     */
    waveSpeed?: number;
    /**
     * Speed multiplier for Indeterminate circular crawler rotation.
     */
    crawlerSpeed?: number;
    /**
     * Controls track visibility in Indeterminate mode.
     * - `true`: Track is always visible behind the active indicator.
     * - `false`: Track is hidden (transparent).
     * - `"auto"`: Follows M3 defaults — hidden for `flat`, visible for `wavy`.
     *
     * @default "auto"
     */
    showTrack?: boolean | "auto";
    /**
     * Minimum arc fraction for indeterminate animation (0–1).
     * Controls how small the arc gets at its shortest point.
     *
     * @default 0.1 (matching M3 Kotlin)
     */
    minProgress?: number;
    /**
     * Maximum arc fraction for indeterminate animation (0–1).
     * Controls how large the arc gets at its longest point.
     *
     * @default 0.8 (matching M3 Kotlin)
     */
    maxProgress?: number;
    /**
     * Configuration for wave damping near edge thresholds (<= 10% or >= 95%) in Determinate Wavy mode.
     * - `md3`: Smoothly flattens wave amplitude to zero near edges (Google MD3 standard: Flat → Wavy → Flat).
     * - `continuous`: Ignores damping, preserving wave motion across all percentages (0–100%).
     *
     * @default "md3"
     */
    determinateAnimation?: "md3" | "continuous";
    /**
     * Amplitude range for wavy indeterminate mode as `[min, max]`.
     * The amplitude modulates between these values based on the arc length.
     * - When arc is short → amplitude approaches `min` (flatter).
     * - When arc is long → amplitude approaches `max` (wavier).
     *
     * @default [0, effectiveAmplitude] (matching Kotlin: flat when short, full wave when long)
     */
    amplitudeRange?: [number, number];
}
type ProgressIndicatorProps = LinearProgressProps | CircularProgressProps;

/**
 * Progress Indicator component based on Material Design 3 Expressive guidelines.
 * Flexible support for 2 presentation variants: Linear and Circular,
 * with smooth dynamic Wavy shape profiles.
 *
 * @example
 * ```tsx
 * // Determinate Flat Linear
 * <ProgressIndicator variant="linear" value={60} aria-label="Loading profile..." />
 *
 * // Indeterminate Wavy Linear
 * <ProgressIndicator variant="linear" shape="wavy" aria-label="Connecting to server..." />
 *
 * // Determinate Flat Circular
 * <ProgressIndicator variant="circular" value={45} size={48} aria-label="Syncing..." />
 * ```
 */
declare const ProgressIndicator: React$1.ForwardRefExoticComponent<ProgressIndicatorProps & React$1.RefAttributes<HTMLDivElement>>;

/**
 * Duration preset for the snackbar auto-dismiss timer.
 * - `'short'` → 4 000 ms (default, MD3 spec)
 * - `'long'`  → 7 000 ms
 * - `number`  → custom milliseconds
 */
type SnackbarDuration = "short" | "long" | number;
/**
 * Resolution value returned by the `showSnackbar()` promise.
 * - `'action-performed'` → user clicked the action button
 * - `'dismissed'`        → auto-dismissed or close button clicked
 */
type SnackbarResult = "action-performed" | "dismissed";
/**
 * Visual configuration for a single snackbar instance.
 */
interface SnackbarVisuals {
    /** Main message text. */
    message: string;
    /** Label for the optional action button. */
    actionLabel?: string;
    /** When `true`, renders a close (X) icon button. @default false */
    withDismissAction?: boolean;
    /**
     * When `true`, renders the action button below the message (Column layout).
     * Use when both message and actionLabel are long.
     * @default false
     */
    actionOnNewLine?: boolean;
    /**
     * Auto-dismiss duration.
     * @default 'short' (4 000 ms)
     */
    duration?: SnackbarDuration;
    /** Additional className applied to the snackbar container. */
    className?: string;
}
/**
 * Internal runtime data for a currently-displayed snackbar.
 * Includes the resolve callback to settle the caller's promise.
 */
interface SnackbarData {
    /** Unique key for AnimatePresence element diffing. */
    id: string;
    /** Visual configuration. */
    visuals: SnackbarVisuals;
    /** Settles the promise returned by `showSnackbar()`. */
    resolve: (result: SnackbarResult) => void;
}
/** Props for the pure `Snackbar` display component. */
interface SnackbarProps {
    /** Runtime data including message, actions, and resolve callback. */
    data: SnackbarData;
    /** Additional className merged onto the snackbar container. */
    className?: string;
}
/** Props for the `SnackbarHost` component. */
interface SnackbarHostProps {
    /** State returned by `useSnackbarState()`. */
    state: UseSnackbarStateReturn;
    /** Additional className applied to the fixed host wrapper. */
    className?: string;
}
/** Return type of `useSnackbarState`. */
interface UseSnackbarStateReturn {
    /** Currently visible snackbar data, or `null` when idle. */
    current: SnackbarData | null;
    /**
     * Show a snackbar with the given visuals.
     * Returns a promise that resolves when the snackbar is dismissed or the action is triggered.
     */
    showSnackbar: (visuals: SnackbarVisuals) => Promise<SnackbarResult>;
    /** Internal dismiss handler — called by `SnackbarHost`. */
    _dismiss: (result: SnackbarResult) => void;
}
/**
 * Low-level hook that manages the snackbar queue and current state.
 *
 * Uses a `ref`-based queue (mutex pattern) so that enqueueing never
 * triggers a re-render storm — only the state transition does.
 *
 * @example
 * ```tsx
 * // Used internally by SnackbarProvider
 * const state = useSnackbarState();
 * return <SnackbarHost state={state} />;
 * ```
 */
declare function useSnackbarState(): UseSnackbarStateReturn;
/**
 * MD3 Expressive Snackbar — pure display component.
 *
 * Renders a single snackbar with message, optional action button, and
 * optional dismiss icon button. Handles its own auto-dismiss timer.
 *
 * @remarks
 * - Uses `role="status"` + `aria-live="polite"` for screen reader announcements.
 * - All entrance/exit animation is handled by the parent `SnackbarHost` via
 *   `AnimatePresence` + `SNACKBAR_ANIM`.
 * - Do NOT render this component directly — use `SnackbarHost`.
 *
 * @example
 * ```tsx
 * // Internal usage inside SnackbarHost — not for direct use
 * <Snackbar data={currentSnackbarData} />
 * ```
 */
declare const Snackbar: React$1.NamedExoticComponent<SnackbarProps>;
/**
 * MD3 SnackbarHost — renders the AnimatePresence container for snackbar queue.
 *
 * Place this once in your app layout. It will show snackbars one at a time,
 * dequeuing the next one as each dismisses.
 *
 * @example
 * ```tsx
 * // Typically used inside SnackbarProvider — not directly
 * const state = useSnackbarState();
 * <SnackbarHost state={state} />
 * ```
 */
declare function SnackbarHost({ state, className }: SnackbarHostProps): react_jsx_runtime.JSX.Element;
declare namespace SnackbarHost {
    var displayName: string;
}
interface SnackbarContextValue {
    showSnackbar: (visuals: SnackbarVisuals) => Promise<SnackbarResult>;
}
declare const SnackbarContext: React$1.Context<SnackbarContextValue | null>;
/**
 * MD3 SnackbarProvider — context provider for imperative snackbar API.
 *
 * Wrap your application (or a section of it) with this provider.
 * Then use `useSnackbar()` in any descendant to show snackbars.
 *
 * @example
 * ```tsx
 * // In your root layout:
 * <SnackbarProvider>
 *   <App />
 * </SnackbarProvider>
 *
 * // In any component:
 * const { showSnackbar } = useSnackbar();
 * await showSnackbar({ message: 'Saved!', actionLabel: 'Undo' });
 * ```
 */
declare function SnackbarProvider({ children }: {
    children: React$1.ReactNode;
}): react_jsx_runtime.JSX.Element;
declare namespace SnackbarProvider {
    var displayName: string;
}
/**
 * Hook that returns the `showSnackbar` function from the nearest `SnackbarProvider`.
 *
 * @throws {Error} if used outside of a `SnackbarProvider`.
 *
 * @example
 * ```tsx
 * function SaveButton() {
 *   const { showSnackbar } = useSnackbar();
 *
 *   const handleSave = async () => {
 *     const result = await showSnackbar({
 *       message: 'Changes saved',
 *       actionLabel: 'Undo',
 *     });
 *     if (result === 'action-performed') undoSave();
 *   };
 *
 *   return <button onClick={handleSave}>Save</button>;
 * }
 * ```
 */
declare function useSnackbar(): SnackbarContextValue;

type TooltipPlacement = "top" | "bottom" | "left" | "right" | "auto";
type TooltipTrigger = "hover" | "focus" | "click" | "long-press" | "manual";
interface TooltipStateConfig {
    initialVisible?: boolean;
    isPersistent?: boolean;
    duration?: number;
}
interface TooltipState {
    isVisible: boolean;
    show: () => void;
    dismiss: () => void;
}
interface CaretConfig {
    enabled: boolean;
    width?: number;
    height?: number;
    customPath?: string;
}
interface TooltipBoxProps {
    children: React$1.ReactNode;
    tooltip: React$1.ReactNode;
    placement?: TooltipPlacement;
    trigger?: TooltipTrigger | TooltipTrigger[];
    state?: TooltipState;
    spacingFromAnchor?: number;
    disabled?: boolean;
    className?: string;
    showDelay?: number;
    hideDelay?: number;
    "aria-label"?: string;
}
interface PlainTooltipProps extends React$1.HTMLAttributes<HTMLDivElement> {
    children: React$1.ReactNode;
    caret?: CaretConfig | null;
    maxWidth?: number;
    className?: string;
    containerColor?: string;
    textColor?: string;
    "data-side"?: "top" | "bottom" | "left" | "right";
}
interface RichTooltipProps extends Omit<React$1.HTMLAttributes<HTMLDivElement>, "title"> {
    children?: React$1.ReactNode;
    title?: React$1.ReactNode;
    action?: React$1.ReactNode;
    caret?: CaretConfig | null;
    maxWidth?: number;
    className?: string;
    colors?: {
        container?: string;
        title?: string;
        body?: string;
        action?: string;
    };
    "data-side"?: "top" | "bottom" | "left" | "right";
}

declare const PlainTooltip: React$1.ForwardRefExoticComponent<PlainTooltipProps & React$1.RefAttributes<HTMLDivElement>>;

declare const RichTooltip: React$1.ForwardRefExoticComponent<RichTooltipProps & React$1.RefAttributes<HTMLDivElement>>;

declare const TooltipTokens: {
    readonly PlainTooltip: {
        readonly containerColor: "var(--md-sys-color-inverse-surface)";
        readonly textColor: "var(--md-sys-color-inverse-on-surface)";
        readonly shape: "rounded-[4px]";
        readonly font: "text-[12px] font-normal tracking-[0.4px] leading-[16px]";
        readonly height: "min-h-6";
        readonly padding: "px-2 py-1";
        readonly maxWidth: "max-w-50";
    };
    readonly RichTooltip: {
        readonly containerColor: "var(--md-sys-color-surface-container)";
        readonly elevation: "shadow-md";
        readonly shape: "rounded-[12px]";
        readonly paddingTop: "pt-3";
        readonly paddingBottom: "pb-2";
        readonly paddingX: "px-4";
        readonly maxWidth: "max-w-80";
        readonly subheadColor: "var(--md-sys-color-on-surface-variant)";
        readonly subheadFont: "text-[14px] font-medium leading-[20px]";
        readonly bodyColor: "var(--md-sys-color-on-surface-variant)";
        readonly bodyFont: "text-[14px] font-normal leading-[20px]";
        readonly actionColor: "var(--md-sys-color-primary)";
        readonly actionFont: "text-[14px] font-medium leading-[20px]";
    };
};

declare function TooltipBox({ children, tooltip, placement, trigger, state: controlledState, spacingFromAnchor, disabled, className, showDelay, hideDelay, "aria-label": ariaLabel, }: TooltipBoxProps): react_jsx_runtime.JSX.Element;

interface TooltipCaretProps {
    side: "top" | "bottom" | "left" | "right";
    width?: number;
    height?: number;
    color?: string;
    customPath?: string;
    className?: string;
}
declare function TooltipCaretShape({ side, width, height, color, customPath, className, }: TooltipCaretProps): react_jsx_runtime.JSX.Element;

interface PositionState {
    top: number;
    left: number;
    actualSide: "top" | "bottom" | "left" | "right";
}
declare function useTooltipPosition(anchorRef: React.RefObject<HTMLElement | null>, tooltipRef: React.RefObject<HTMLElement | null>, placement: TooltipPlacement, spacing: number, isVisible: boolean): PositionState;

declare function useTooltipState(config?: TooltipStateConfig): TooltipState;

export { Badge, type BadgeProps, BadgedBox, type BadgedBoxProps, type CaretConfig, type CircularProgressProps, type LinearProgressProps, LoadingIndicator, type LoadingIndicatorProps, PlainTooltip, type PlainTooltipProps, ProgressIndicator, type ProgressIndicatorProps, RichTooltip, type RichTooltipProps, Snackbar, SnackbarContext, type SnackbarData, type SnackbarDuration, SnackbarHost, type SnackbarHostProps, type SnackbarProps, SnackbarProvider, type SnackbarResult, type SnackbarVisuals, TooltipBox, type TooltipBoxProps, TooltipCaretShape, type TooltipPlacement, type TooltipState, type TooltipStateConfig, TooltipTokens, type TooltipTrigger, type UseSnackbarStateReturn, useSnackbar, useSnackbarState, useTooltipPosition, useTooltipState };