import { type VariantProps } from 'class-variance-authority';
import type { LucideIcon } from 'lucide-react';
import * as React from 'react';
/**
 * Size and color variants shared by every Strix icon.
 *
 * `color` resolves to the `--color-icon-*` semantic tokens, so an icon follows
 * the active theme without the caller doing anything. `inherit` is the default
 * and is usually what you want: the icon then takes the color of surrounding
 * text, which is how icons inside buttons and links stay correct automatically.
 *
 * A subset of the 51 minted `--color-icon-*` roles; any role omitted here is still
 * reachable as `className="text-icon-<role>"`, which wins through `cn()`.
 *
 * `destructive` is not the brand red — in dark it is `tertiary-500` #d97e79, a salmon.
 * The red is `notification-error` #db132a, which is why the trio is in the union.
 */
export declare const iconVariants: (props?: ({
    size?: "lg" | "md" | "sm" | "xl" | "xs" | null | undefined;
    color?: "accent" | "inherit" | "disabled" | "error" | "destructive" | "success" | "primary" | "secondary" | "tertiary" | "warning" | "inverse" | "notification-error" | "notification-success" | "notification-warning" | null | undefined;
} & import("class-variance-authority/types").ClassProp) | undefined) => string;
export declare const ICON_GRADIENTS: readonly ["blue-primary", "blue-secondary", "blue-balance", "blue-card-active", "mint-primary", "mint-secondary", "lime-primary", "lavender-primary"];
export type IconGradient = (typeof ICON_GRADIENTS)[number];
export interface IconGradientDef {
    attrs: {
        x1: number;
        y1: number;
        x2: number;
        y2: number;
    };
    stops: {
        offset: string;
        color: string;
    }[];
}
/**
 * SVG gradient definitions, generated from the `--gradients-*` tokens by
 * `scripts/build-icon-gradients.mjs`.
 *
 * SVG `<linearGradient>` cannot consume a CSS `linear-gradient()` value, so this
 * data has to exist in a form SVG understands. Deriving it from the token layer
 * rather than hand-writing it means there is only one place a gradient is
 * defined. Regenerate after changing any gradient token.
 */
export declare const GRADIENT_VARIANTS: Record<IconGradient, IconGradientDef>;
interface UseIconGradientResult {
    fill: string;
    defs: React.ReactNode;
}
/**
 * Returns the `<defs>` and the `fill` reference for a named gradient. Called
 * with `undefined` it returns a `currentColor` fill and no defs, so a component
 * can pass `gradient` through conditionally without branching.
 *
 * The gradient id is derived from `useId()`, so several instances of the same
 * icon on one page do not collide.
 */
export declare function useIconGradient(gradient: IconGradient | undefined): UseIconGradientResult;
export interface IconProps extends Omit<React.SVGProps<SVGSVGElement>, 'color'>, VariantProps<typeof iconVariants> {
    /**
     * Optional gradient fill. Only the hand-authored icons that ship gradient
     * artwork honor this; icons wrapped by {@link createIcon} ignore it, because
     * a Lucide glyph paints with `currentColor` and has no element to attach a
     * gradient to.
     */
    gradient?: IconGradient;
}
export type IconComponent = React.ForwardRefExoticComponent<IconProps & React.RefAttributes<SVGSVGElement>>;
/**
 * Wrap a Lucide glyph as a Strix icon: token-driven size and color, `cn()`
 * class merging so a caller's `className` wins, and a forwarded ref.
 *
 * Icons are decorative by default (`aria-hidden`), which is correct for the
 * common case of an icon beside a text label. Pass an `aria-label` when the
 * icon is the only content — that removes `aria-hidden` and promotes it to
 * `role="img"` so assistive tech announces it.
 */
export declare function createIcon(Glyph: LucideIcon, displayName: string): IconComponent;
export {};
//# sourceMappingURL=icon.d.ts.map