UI Components

// Error display component
interface AnErrorOccurredProps {
  children?: React.ReactNode;
}
function AnErrorOccurred(props: AnErrorOccurredProps): JSX.Element;

// Permission-based page access control
interface CheckPagePermissionsProps {
  permissions: Array<{ action: string; subject: string }>;
  children: React.ReactNode;
  fallback?: React.ComponentType;
}
function CheckPagePermissions(props: CheckPagePermissionsProps): JSX.Element;

// Permission checking wrapper  
interface CheckPermissionsProps {
  children: React.ReactNode;
  permissions?: Array<{ action: string; subject: string }>;
}
function CheckPermissions(props: CheckPermissionsProps): JSX.Element;

// Modal confirmation dialog
interface ConfirmDialogProps {
  isOpen: boolean;
  onToggleDialog: () => void;
  title?: TranslationMessage;
  bodyText?: TranslationMessage;
  onConfirm?: () => void;
}
function ConfirmDialog(props: ConfirmDialogProps): JSX.Element;

// Content container component
interface ContentBoxProps {
  children: React.ReactNode;
  title?: string;
  subtitle?: string;
  icon?: React.ReactNode;
  titleEllipsis?: boolean;
}
function ContentBox(props: ContentBoxProps): JSX.Element;

// Permission-based rendering
<CheckPermissions permissions={[{ action: 'read', subject: 'plugin::my-plugin.entity' }]}>
  <MyProtectedComponent />
</CheckPermissions>

// Confirmation dialog
<ConfirmDialog
  isOpen={showDialog}
  onToggleDialog={setShowDialog}
  title="Delete Entry"
  bodyText="Are you sure you want to delete this entry?"
  onConfirm={handleDelete}
  isConfirmButtonLoading={isDeleting}
/>

// Date and time picker component
interface DateTimePickerProps {
  value?: string | Date;
  onChange: (value: string | Date | null) => void;
  disabled?: boolean;
  error?: string | TranslationMessage;
  description?: string | TranslationMessage;
  intlLabel: TranslationMessage;
  name: string;
  step?: number;
  required?: boolean;
}
function DateTimePicker(props: DateTimePickerProps): JSX.Element;

// Formik form wrapper (deprecated - use Formik directly)
interface FormProps extends Omit<FormikFormProps, 'noValidate'> {
  children: React.ReactNode;
}
function Form(props: FormProps): JSX.Element;

// Generic input field with type support
interface GenericInputProps {
  type: string;
  name: string;
  value?: any;
  onChange?: (event: { target: { name: string; value: any; type: string } }) => void;
  error?: string | TranslationMessage;
  description?: string | TranslationMessage;
  disabled?: boolean;
  intlLabel?: TranslationMessage;
  placeholder?: string | TranslationMessage;
  required?: boolean;
  step?: number;
  max?: number;
  min?: number;
  attribute?: any;
}
function GenericInput(props: GenericInputProps): JSX.Element;

// Restricted/disabled input field
interface NotAllowedInputProps {
  name: string;
  intlLabel: TranslationMessage;
  description?: TranslationMessage;
}
function NotAllowedInput(props: NotAllowedInputProps): JSX.Element;

// React-select wrapper component
interface ReactSelectProps {
  value?: any;
  options: Array<{ label: string; value: any }>;
  onChange: (value: any) => void;
  isMulti?: boolean;
  placeholder?: string;
  isDisabled?: boolean;
  isClearable?: boolean;
  isSearchable?: boolean;
  name?: string;
}
function ReactSelect(props: ReactSelectProps): JSX.Element;

// Generic input field
<GenericInput
  type="text"
  name="title"
  value={formData.title}
  onChange={handleInputChange}
  intlLabel={{ id: 'form.title.label', defaultMessage: 'Title' }}
  required
/>

// Date time picker
<DateTimePicker
  name="publishedAt"
  value={publishDate}
  onChange={setPublishDate}
  intlLabel={{ id: 'form.publishDate.label', defaultMessage: 'Publish Date' }}
/>

// Advanced table with selection and actions
interface TableProps<TRows extends { id: Entity.ID } = { id: Entity.ID }> {
  children?: React.ReactNode;
  contentType: string;
  headers?: Array<TableHeader>;
  rows?: Array<TRows>;
  isLoading?: boolean;
  withBulkActions?: boolean;
  withMainAction?: boolean;
  onConfirmDeleteAll?: (ids: Array<TRows['id']>) => Promise<void>;
  onConfirmDelete?: (id: TRows['id']) => Promise<void>;
  renderBulkActionsBar?: (props: {
    selectedEntries: Array<string | number>;
    clearSelectedEntries: () => void;
  }) => React.ReactNode;
  footer?: React.ReactNode;
  action?: React.ReactNode;
}
function DynamicTable<TRows extends { id: Entity.ID }>(props: TableProps<TRows>): JSX.Element;

// Basic table component
interface BasicTableProps {
  headers: Array<{ name: string; label: string }>;
  rows: Array<Record<string, any>>;
  className?: string;
}
function Table(props: BasicTableProps): JSX.Element;

// Empty table body placeholder
interface EmptyBodyTableProps {
  colSpan: number;
  content?: TranslationMessage;
  isLoading?: boolean;
  action?: React.ReactNode;
}
function EmptyBodyTable(props: EmptyBodyTableProps): JSX.Element;

// Table header interface
interface TableHeader {
  name: string;
  metadatas: {
    sortable: boolean;
    label: string;
    mainField?: { name: string };
  };
  fieldSchema?: { type: string };
}

// Dynamic table with bulk actions
<DynamicTable
  contentType="articles"
  headers={[
    { name: 'title', metadatas: { label: 'Title', sortable: true } },
    { name: 'status', metadatas: { label: 'Status', sortable: false } }
  ]}
  rows={articles}
  withBulkActions
  withMainAction
  onConfirmDelete={handleDelete}
  onConfirmDeleteAll={handleBulkDelete}
/>

// URL-synced filter list interface
interface FilterListURLQueryProps {
  filtersSchema: Array<FilterData>;
  displayedFilters: Array<{
    name: string;
    filter: Filter;
    operator: string;
    value: string;
  }>;
}
function FilterListURLQuery(props: FilterListURLQueryProps): JSX.Element;

// Popover-based filter interface with URL sync
interface FilterPopoverURLQueryProps {
  displayedFilters: Array<FilterData>;
  isVisible: boolean;
  onToggle: () => void;
  source?: string;
  slug?: string;
}
function FilterPopoverURLQuery(props: FilterPopoverURLQueryProps): JSX.Element;

// URL-synced page size selector
interface PageSizeURLQueryProps {
  trackedEvent?: string;
}
function PageSizeURLQuery(props: PageSizeURLQueryProps): JSX.Element;

// URL-synced pagination component
interface PaginationURLQueryProps {
  pagination: {
    page: number;
    pageCount: number;
    pageSize: number;
    total: number;
  };
}
function PaginationURLQuery(props: PaginationURLQueryProps): JSX.Element;

// URL-synced search input
interface SearchURLQueryProps {
  label: string;
  placeholder?: string;
  trackedEvent?: string;
}
function SearchURLQuery(props: SearchURLQueryProps): JSX.Element;

// Search with URL synchronization
<SearchURLQuery
  label="Search articles"
  placeholder="Search by title, content..."
  trackedEvent="didSearch"
/>

// Pagination with URL state
<PaginationURLQuery
  pagination={{
    page: 1,
    pageCount: 10,
    pageSize: 20,
    total: 200
  }}
/>

// Internal link component with router integration
interface LinkProps {
  to: string;
  children: React.ReactNode;
  isExternal?: boolean;
  onClick?: () => void;
}
function Link(props: LinkProps): JSX.Element;

// Button-styled link component
interface LinkButtonProps {
  to: string;
  children: React.ReactNode;
  variant?: 'default' | 'primary' | 'secondary' | 'tertiary' | 'success' | 'danger';
  disabled?: boolean;
  size?: 'S' | 'M' | 'L';
  startIcon?: React.ReactNode;
  endIcon?: React.ReactNode;
}
function LinkButton(props: LinkButtonProps): JSX.Element;

// Plugin injection zone for extensibility
interface InjectionZoneProps {
  area: string;
  children?: React.ReactNode;
}
function InjectionZone(props: InjectionZoneProps): JSX.Element;

// Router-integrated link
<Link to="/admin/plugins/my-plugin/settings">
  Plugin Settings
</Link>

// Button-styled navigation
<LinkButton to="/admin/content-manager" variant="primary" startIcon={<Plus />}>
  Create New Entry
</LinkButton>

// Empty state layout component
interface EmptyStateLayoutProps {
  icon?: React.ReactNode;
  content: React.ReactNode;
  action?: React.ReactNode;
  hasRadius?: boolean;
  shadow?: string;
}
function EmptyStateLayout(props: EmptyStateLayoutProps): JSX.Element;

// Full-page loading indicator
function LoadingIndicatorPage(): JSX.Element;

// No content placeholder component
interface NoContentProps {
  content?: React.ReactNode;
  action?: React.ReactNode;
}
function NoContent(props: NoContentProps): JSX.Element;

// No media placeholder
function NoMedia(): JSX.Element;

// No permissions placeholder
function NoPermissions(): JSX.Element;

// Status indicator component
interface StatusProps {
  variant: 'alternative' | 'danger' | 'neutral' | 'primary' | 'secondary' | 'success' | 'warning';
  children: React.ReactNode;
  size?: 'S' | 'M';
  showBullet?: boolean;
}
function Status(props: StatusProps): JSX.Element;

// Empty state with action
<EmptyStateLayout
  icon={<Document />}
  content="No articles found"
  action={
    <Button onClick={handleCreate}>
      Create your first article
    </Button>
  }
/>

// Status indicator
<Status variant="success" showBullet>
  Published
</Status>

// Relative time display component
interface RelativeTimeProps {
  timestamp: string | Date;
  customIntervals?: Array<{
    unit: Intl.RelativeTimeFormatUnit;
    threshold: number;
  }>;
}
function RelativeTime(props: RelativeTimeProps): JSX.Element;

// Settings page title with Helmet integration
interface SettingsPageTitleProps {
  name: string;
}
function SettingsPageTitle(props: SettingsPageTitleProps): JSX.Element;

// Relative time display
<RelativeTime timestamp={article.createdAt} />

// Page title with SEO
<SettingsPageTitle name="Plugin Settings" />