import React from 'react';
import { Animated, type StyleProp, Text, type TextStyle, type ViewStyle } from 'react-native';
import type { ThemeVars } from '@coinbase/cds-common/core/theme';
import type { IconSize, IconSourcePixelSize } from '@coinbase/cds-common/types/IconSize';
import type { SharedAccessibilityProps } from '@coinbase/cds-common/types/SharedAccessibilityProps';
import type { SharedProps } from '@coinbase/cds-common/types/SharedProps';
import type { PaddingProps } from '@coinbase/cds-common/types/SpacingProps';
/** Default font family for the CDS icon glyph font. */
export declare const DEFAULT_ICON_FONT_FAMILY = 'CoinbaseIcons';
/**
 * Shape of the glyph map an icon set must provide. Keys are
 * `${name}-${sourcePixelSize}-${'active' | 'inactive'}` and values are the
 * single Unicode character rendered in the icon font.
 */
export type GlyphMap<Name extends string> = Record<
  `${Name}-${IconSourcePixelSize}-${'active' | 'inactive'}`,
  string
>;
/** Arguments passed to a glyph resolver to look up an icon's glyph. */
export type IconGlyphResolverArgs<Name extends string> = {
  /** Glyph map bound to this icon set. */
  glyphMap: GlyphMap<Name>;
  /** Icon name requested via the `name` prop. */
  name: Name;
  /** Size token requested via the `size` prop. */
  size: IconSize;
  /** Resolved pixel size from the theme (includes device font scaling). */
  pixelSize: number;
  /** Whether the active variant was requested. */
  active: boolean;
};
/** Configuration used to bind an icon set to a typed `Icon` component. */
export type CreateIconConfig<Name extends string> = {
  /** Generated glyph map for this icon set. */
  glyphMap: GlyphMap<Name>;
  /**
   * Font family registered by the icon set's font (loaded via `expo-font`).
   * @default 'CoinbaseIcons'
   */
  fontFamily?: string;
  /**
   * Resolves the glyph to render for an icon from the glyph map. Override to
   * support a custom key format or size model. Defaults to the CDS scheme:
   * `${name}-${sourceSize}-${'active' | 'inactive'}`, where `sourceSize` is
   * `12`, `16`, or `24`.
   */
  getGlyph?: (args: IconGlyphResolverArgs<Name>) => string | undefined;
};
export type IconBaseProps<Name extends string = string> = SharedProps &
  PaddingProps &
  Pick<SharedAccessibilityProps, 'accessibilityLabel' | 'accessibilityHint'> & {
    /**
     * Size for a given icon.
     * @default m
     */
    size?: IconSize;
    /** Name of the icon, as defined in Figma. */
    name: Name;
    /**
     * Fallback element to render if unable to find an icon with matching name
     * @default null
     * */
    fallback?: null | React.ReactNode;
    /**
     * Toggles the active and inactive state of the navigation icon
     * @default false
     */
    active?: boolean;
    /** Color of the icon when used as a foreground.
     * @default primary
     */
    color?: ThemeVars.Color;
    /**
     * @deprecated Use `style`, `styles.icon`, or the `color` prop to customize icon color. This will be removed in a future major release.
     * @deprecationExpectedRemoval v10
     */
    dangerouslySetColor?: string | Animated.AnimatedInterpolation<string>;
    animated?: boolean;
  };
export type IconProps<Name extends string = string> = IconBaseProps<Name> & {
  /** Custom style applied to the outer container. */
  style?: Animated.WithAnimatedValue<StyleProp<TextStyle>>;
  /** Custom styles for individual elements of the Icon component */
  styles?: {
    /** Outer Box wrapper element */
    root?: StyleProp<ViewStyle>;
    /** Inner icon glyph Text element */
    icon?: StyleProp<TextStyle>;
  };
};
declare const getIconSourceSize: (iconSize: number) => IconSourcePixelSize;
/**
 * Creates a typed `Icon` component bound to a specific icon set (glyph map,
 * font family, and name union). The default CDS `Icon` is created from this
 * factory; consumers with their own icon package can create their own typed
 * icon component that reuses all of the CDS rendering, accessibility, and
 * theming behavior.
 */
export declare function createIcon<Name extends string>({
  glyphMap,
  fontFamily,
  getGlyph,
}: CreateIconConfig<Name>): React.MemoExoticComponent<
  ({
    ref,
    ..._props
  }: IconProps<Name> & {
    ref?: React.Ref<Text>;
  }) =>
    | string
    | number
    | bigint
    | boolean
    | Iterable<React.ReactNode>
    | Promise<
        | string
        | number
        | bigint
        | boolean
        | React.ReactPortal
        | React.ReactElement<unknown, string | React.JSXElementConstructor<any>>
        | Iterable<React.ReactNode>
        | null
        | undefined
      >
    | import('react/jsx-runtime').JSX.Element
    | null
>;
export { getIconSourceSize };
//# sourceMappingURL=createIcon.d.ts.map