Basic Content

/**
 * Text display component
 * @supported all platforms
 */
const Text: ComponentType<TextProps>;

interface TextProps extends StandardProps {
  /** Whether text is selectable
   * @supported weapp, alipay, swan, tt, qq, jd, h5
   * @default false
   */
  selectable?: boolean;
  /** Whether user can select text
   * @supported weapp, tt, qq, jd
   * @default false
   */
  userSelect?: boolean;
  /** Text space handling
   * @supported weapp, alipay, swan, tt, qq, jd, h5
   */
  space?: keyof TextProps.Space;
  /** Text decoding
   * @supported weapp, alipay, swan, tt, qq, jd, h5
   * @default false
   */
  decode?: boolean;
  /** Multi-line ellipsis, value must be greater than or equal to 1
   * @supported alipay
   */
  numberOfLines?: number;
  /** Maximum number of lines
   * @supported weapp, harmony
   */
  maxLines?: number;
  /** Text overflow handling
   * @supported weapp
   * @default 'visible'
   */
  overflow?: keyof TextProps.Overflow;
}

declare namespace TextProps {
  interface Space {
    /** Display consecutive spaces */
    ensp: '';
    /** Display consecutive spaces (wider) */
    emsp: '';
    /** Display consecutive spaces and line breaks */
    nbsp: '';
  }
  interface Overflow {
    /** Clip text */
    clip: '';
    /** Fade out */
    fade: '';
    /** Show ellipsis */
    ellipsis: '';
    /** Don't truncate text */
    visible: '';
  }
}

/**
 * Rich text rendering component
 * @supported all platforms
 */
const RichText: ComponentType<RichTextProps>;

interface RichTextProps extends StandardProps {
  /** Rich text nodes array or HTML string
   * @supported weapp, alipay, swan, tt, qq, jd, h5, rn
   */
  nodes?: RichTextNode[] | string;
  /** Text space handling
   * @supported weapp, alipay, swan, tt, qq, jd, h5
   */
  space?: keyof RichTextProps.Space;
}

declare namespace RichTextProps {
  interface Space {
    ensp: '';
    emsp: '';
    nbsp: '';
  }
}

interface RichTextNode {
  /** Node name/tag */
  name?: string;
  /** Node attributes */
  attrs?: Record<string, any>;
  /** Child nodes */
  children?: RichTextNode[];
  /** Node type */
  type?: 'node' | 'text';
  /** Text content for text nodes */
  text?: string;
}

/**
 * Icon display component with predefined icon set
 * @supported all platforms
 */
const Icon: ComponentType<IconProps>;

interface IconProps extends StandardProps {
  /** Icon type from predefined set
   * @supported weapp, alipay, swan, tt, qq, jd, h5, rn
   */
  type: keyof IconProps.Type;
  /** Icon size in pixels
   * @supported weapp, alipay, swan, tt, qq, jd, h5, rn
   * @default 23
   */
  size?: number;
  /** Icon color
   * @supported weapp, alipay, swan, tt, qq, jd, h5, rn
   */
  color?: string;
}

declare namespace IconProps {
  interface Type {
    success: '';
    success_no_circle: '';
    info: '';
    warn: '';
    waiting: '';
    cancel: '';
    download: '';
    search: '';
    clear: '';
    success_circle: '';
    info_circle: '';
    warn_circle: '';
    waiting_circle: '';
    cancel_circle: '';
    clear_circle: '';
    checkboxSelected: '';
    radioSelected: '';
    radioUnselect: '';
  }
}

import { Icon } from "@tarojs/components";

// Basic icons
<Icon type="success" size={30} color="#00C851" />
<Icon type="warn" size={25} color="#FF8800" />
<Icon type="info" size={20} color="#33B5E5" />

// Form control icons
<Icon type="checkboxSelected" size={18} />
<Icon type="radioSelected" size={18} />

/**
 * Progress bar component
 * @supported all platforms
 */
const Progress: ComponentType<ProgressProps>;

interface ProgressProps extends StandardProps {
  /** Progress percentage (0-100)
   * @supported weapp, alipay, swan, tt, qq, jd, h5, rn
   */
  percent?: number;
  /** Whether to show progress info
   * @supported weapp, alipay, swan, tt, qq, jd, h5, rn
   * @default false
   */
  showInfo?: boolean;
  /** Progress bar border radius
   * @supported weapp, alipay, swan, tt, qq, jd, h5, rn
   * @default 0
   */
  borderRadius?: number;
  /** Font size for progress info
   * @supported weapp, alipay, swan, tt, qq, jd, h5, rn
   * @default 16
   */
  fontSize?: number;
  /** Progress bar stroke width
   * @supported weapp, alipay, swan, tt, qq, jd, h5, rn
   * @default 6
   */
  strokeWidth?: number;
  /** Progress bar color
   * @supported weapp, alipay, swan, tt, qq, jd, h5, rn
   * @default "#09BB07"
   */
  color?: string;
  /** Progress bar active color (for animation)
   * @supported weapp, alipay, swan, tt, qq, jd, h5, rn
   * @default "#09BB07"
   */
  activeColor?: string;
  /** Progress bar background color
   * @supported weapp, alipay, swan, tt, qq, jd, h5, rn
   * @default "#EBEBEB"
   */
  backgroundColor?: string;
  /** Whether progress bar is active (animated)
   * @supported weapp, alipay, swan, tt, qq, jd, h5, rn
   * @default false
   */
  active?: boolean;
  /** Active animation mode
   * @supported weapp, alipay, swan, tt, qq, jd, h5, rn
   * @default "backwards"
   */
  activeMode?: 'backwards' | 'forwards';
  /** Animation duration in milliseconds
   * @supported weapp, tt, qq, jd, h5
   * @default 30
   */
  duration?: number;
  /** Progress completion callback */
  onActiveEnd?: (event: TaroEvent) => void;
}

import { Progress } from "@tarojs/components";

// Basic progress bar
<Progress percent={30} showInfo />

// Styled progress bar
<Progress 
  percent={75} 
  showInfo 
  color="#FF6B6B" 
  backgroundColor="#F0F0F0"
  strokeWidth={8}
  borderRadius={4}
/>

// Animated progress bar
<Progress 
  percent={60} 
  active 
  activeMode="forwards"
  duration={50}
  onActiveEnd={() => console.log('Animation complete')}
/>

// Base text handling types
interface TextSelectionEvent extends TaroEvent {
  detail: {
    start: number;
    end: number;
  };
}

// Icon type definitions
type IconType = 
  | 'success' | 'success_no_circle' | 'success_circle'
  | 'info' | 'info_circle'
  | 'warn' | 'warn_circle'
  | 'waiting' | 'waiting_circle'
  | 'cancel' | 'cancel_circle'
  | 'download' | 'search' | 'clear' | 'clear_circle'
  | 'checkboxSelected' | 'radioSelected' | 'radioUnselect';

// Progress event types
interface ProgressActiveEndEvent extends TaroEvent {
  detail: {
    // Progress completion details
  };
}

// Rich text node structure
interface RichTextNodeAttrs {
  [key: string]: string | number | boolean;
}

interface RichTextTextNode {
  type: 'text';
  text: string;
}

interface RichTextElementNode {
  type?: 'node';
  name: string;
  attrs?: RichTextNodeAttrs;
  children?: RichTextNode[];
}

type RichTextNode = RichTextTextNode | RichTextElementNode;