/**
 * @fileoverview TypeScript type declarations for Fluent Grow intrinsic elements
 * 
 * This file provides type declarations for using Fluent Grow with React,
 * allowing custom components to be used in JSX with full type checking
 * and autocomplete support in the editor.
 * 
 * @author Veelv
 * @license MIT
 */

/**
 * JSX namespace that extends the default interfaces to include Fluent Grow components
 * 
 * This declaration allows the use of Fluent Grow Web Components
 * directly in React/JSX code with proper TypeScript typing.
 */
declare namespace JSX {
  /**
   * Interface that defines the intrinsic elements available in JSX
   * 
   * Each element is mapped to its respective HTML interfaces
   * with appropriate attributes and properties.
   */
  interface FluentBaseProps extends React.HTMLAttributes<HTMLElement> {
    variant?: 'primary' | 'secondary' | 'outline' | 'ghost' | 'transparent';
    size?: 'small' | 'medium' | 'large' | 'sm' | 'md' | 'lg';
    loading?: boolean | string;
    disabled?: boolean | string;
    color?: string;
  }

  interface IntrinsicElements {
    'fluent-button': React.DetailedHTMLProps<React.ButtonHTMLAttributes<HTMLButtonElement> & FluentBaseProps, HTMLButtonElement>;
    'fluent-input': React.DetailedHTMLProps<React.InputHTMLAttributes<HTMLInputElement> & FluentBaseProps, HTMLInputElement>;
    'fluent-select': React.DetailedHTMLProps<React.SelectHTMLAttributes<HTMLSelectElement> & FluentBaseProps, HTMLSelectElement>;
    'fluent-textarea': React.DetailedHTMLProps<React.TextareaHTMLAttributes<HTMLTextAreaElement> & FluentBaseProps, HTMLTextAreaElement>;
    'fluent-checkbox': React.DetailedHTMLProps<React.InputHTMLAttributes<HTMLInputElement> & FluentBaseProps, HTMLInputElement>;
    'fluent-radio': React.DetailedHTMLProps<React.InputHTMLAttributes<HTMLInputElement> & FluentBaseProps, HTMLInputElement>;
    'fluent-switch': React.DetailedHTMLProps<FluentBaseProps, HTMLElement>;
    'fluent-slider': React.DetailedHTMLProps<FluentBaseProps, HTMLElement>;
    'fluent-progress': React.DetailedHTMLProps<FluentBaseProps, HTMLElement>;
    'fluent-spinner': React.DetailedHTMLProps<FluentBaseProps, HTMLElement>;
    'fluent-badge': React.DetailedHTMLProps<FluentBaseProps, HTMLElement>;
    'fluent-chip': React.DetailedHTMLProps<FluentBaseProps, HTMLElement>;
    'fluent-avatar': React.DetailedHTMLProps<FluentBaseProps, HTMLElement>;
    'fluent-avatar-group': React.DetailedHTMLProps<FluentBaseProps, HTMLElement>;
    'fluent-tooltip': React.DetailedHTMLProps<FluentBaseProps, HTMLElement>;
    'fluent-popover': React.DetailedHTMLProps<FluentBaseProps, HTMLElement>;
    'fluent-dropdown': React.DetailedHTMLProps<FluentBaseProps, HTMLElement>;
    'fluent-menu': React.DetailedHTMLProps<FluentBaseProps, HTMLElement>;
    'fluent-tabs': React.DetailedHTMLProps<FluentBaseProps, HTMLElement>;
    'fluent-accordion': React.DetailedHTMLProps<FluentBaseProps, HTMLElement>;
    'fluent-modal': React.DetailedHTMLProps<FluentBaseProps, HTMLElement>;
    'fluent-notification': React.DetailedHTMLProps<FluentBaseProps, HTMLElement>;
    'fluent-toast': React.DetailedHTMLProps<FluentBaseProps, HTMLElement>;
    'fluent-card': React.DetailedHTMLProps<FluentBaseProps, HTMLElement>;
    'fluent-breadcrumb': React.DetailedHTMLProps<FluentBaseProps, HTMLElement>;
    'fluent-pagination': React.DetailedHTMLProps<FluentBaseProps, HTMLElement>;
    'fluent-skeleton': React.DetailedHTMLProps<FluentBaseProps, HTMLElement>;
    'fluent-label': React.DetailedHTMLProps<React.LabelHTMLAttributes<HTMLLabelElement> & FluentBaseProps, HTMLLabelElement>;
    'fluent-text': React.DetailedHTMLProps<FluentBaseProps, HTMLElement>;
    'fluent-title': React.DetailedHTMLProps<FluentBaseProps, HTMLElement>;
    'fluent-form': React.DetailedHTMLProps<React.FormHTMLAttributes<HTMLFormElement> & FluentBaseProps, HTMLFormElement>;
    'fluent-form-message': React.DetailedHTMLProps<FluentBaseProps, HTMLElement>;
    'fluent-datepicker': React.DetailedHTMLProps<FluentBaseProps, HTMLElement>;
    'fluent-autocomplete': React.DetailedHTMLProps<FluentBaseProps, HTMLElement>;
    'fluent-table': React.DetailedHTMLProps<React.TableHTMLAttributes<HTMLTableElement> & FluentBaseProps, HTMLTableElement>;
    'fluent-stepper': React.DetailedHTMLProps<FluentBaseProps, HTMLElement>;
  }
}

export {};