import type { ThemeVars } from '@coinbase/cds-common/core/theme';
import type { Rect } from '@coinbase/cds-common/types/Rect';
import {
  type AnimatedProp,
  FontSlant,
  FontWeight,
  type SkParagraph,
  TextAlign,
} from '@shopify/react-native-skia';
import { type ChartInset } from '../utils/chart';
/**
 * The supported content types for ChartText.
 * Pass a string for simple text, or a SkParagraph for advanced rich text formatting.
 */
export type ChartTextChildren = AnimatedProp<string | SkParagraph>;
/**
 * Horizontal alignment options for chart text.
 */
export type TextHorizontalAlignment = 'left' | 'center' | 'right';
/**
 * Vertical alignment options for chart text.
 */
export type TextVerticalAlignment = 'top' | 'middle' | 'bottom';
export type ChartTextBaseProps = {
  /**
   * The text color.
   * @default theme.color.fgMuted
   */
  color?: string;
  /**
   * The background color of the text's background rectangle.
   * @default theme.color.bgElevation1 if elevated, otherwise 'transparent'
   */
  background?: string;
  /**
   * Whether the text's background should have an elevated appearance with a shadow.
   */
  elevated?: boolean;
  /**
   * When true, disables automatic repositioning to fit within bounds.
   */
  disableRepositioning?: boolean;
  /**
   * Optional bounds rectangle to constrain the text within. If provided, text will be positioned
   * to stay within these bounds. Defaults to the full chart bounds when not provided.
   */
  bounds?: Rect;
  /**
   * Callback fired when text dimensions change.
   * Used for collision detection and smart positioning.
   * Returns the adjusted position and dimensions.
   */
  onDimensionsChange?: (rect: Rect) => void;
  /**
   * Inset around the text content for the background rect.
   * Only affects the background, text position remains unchanged.
   */
  inset?: number | ChartInset;
  /**
   * Border radius for the background rectangle.
   * @default 4
   */
  borderRadius?: number;
};
export type ChartTextProps = ChartTextBaseProps & {
  /**
   * The text content to display.
   * Pass a string for simple text rendering, or build your own SkParagraph for advanced formatting.
   * @example
   * // Simple text
   * <ChartText x={100} y={100}>Hello World</ChartText>
   *
   * @example
   * // Advanced rich text with SkParagraph
   * const paragraph = useMemo(() => {
   *   const builder = Skia.ParagraphBuilder.Make(style, fontProvider);
   *   builder.pushStyle({ fontSize: 14, fontWeight: 400 });
   *   builder.addText('Regular ');
   *   builder.pushStyle({ fontSize: 14, fontWeight: 700 });
   *   builder.addText('Bold');
   *   builder.pop();
   *   const para = builder.build();
   *   para.layout(width);
   *   return para;
   * }, [fontProvider, width]);
   * <ChartText x={100} y={100}>{paragraph}</ChartText>
   */
  children: ChartTextChildren;
  /**
   * The desired x position in pixels.
   * @note Text will be automatically positioned to fit within bounds unless `disableRepositioning` is true.
   */
  x: AnimatedProp<number>;
  /**
   * The desired y position in pixels.
   * @note Text will be automatically positioned to fit within bounds unless `disableRepositioning` is true.
   */
  y: AnimatedProp<number>;
  /**
   * Horizontal offset in pixels to adjust the final x position.
   * Useful for fine-tuning placement without affecting alignment.
   */
  dx?: AnimatedProp<number>;
  /**
   * Vertical offset in pixels to adjust the final y position.
   * Useful for fine-tuning placement or elevation.
   */
  dy?: AnimatedProp<number>;
  /**
   * Horizontal alignment of the component.
   * @default 'center'
   */
  horizontalAlignment?: AnimatedProp<TextHorizontalAlignment>;
  /**
   * Vertical alignment of the component.
   * @default 'middle'
   */
  verticalAlignment?: AnimatedProp<TextVerticalAlignment>;
  /**
   * Text alignment of the SkParagraph
   * @note when providing a custom SkParagraph as children, you still need to pass in the alignment used.
   * @default TextAlign.Left
   */
  paragraphAlignment?: TextAlign;
  /**
   * Theme font to use for text rendering.
   * This sets both fontSize and fontWeight from the theme.
   * @note this will not adjust the actual font family used,
   * that is only adjusted by using fontFamilies on ChartText or at chart level
   * @default 'label2'
   */
  font?: ThemeVars.Font;
  /**
   * Font families override for Skia
   * @example
   * ['Helvetica', 'sans-serif']
   */
  fontFamilies?: string[];
  /**
   * Font size override in pixels.
   * Overrides the size from the font prop.
   * @example
   * // Use label1 font weight but with custom size
   * <ChartText font="label1" fontSize={18}>Text</ChartText>
   */
  fontSize?: number;
  /**
   * Font weight.
   * Overrides the weight from the font prop.
   */
  fontWeight?: FontWeight;
  /**
   * Font style (normal or italic).
   * @default FontSlant.Upright
   */
  fontStyle?: FontSlant;
  /**
   * Opacity of the text and background.
   * @default 1
   */
  opacity?: AnimatedProp<number>;
};
export declare const ChartText: import('react').NamedExoticComponent<ChartTextProps>;
//# sourceMappingURL=ChartText.d.ts.map