Navigation Controls

/**
 * Search input control that displays search prompt with keyboard shortcut
 * Renders as a button that can be clicked to open search functionality
 */
interface SearchControlProps extends BoxProps, ElementProps<'button'> {}

function SearchControl(props: SearchControlProps): JSX.Element;

import { SearchControl } from "@mantine/ds";

function Header() {
  return (
    <SearchControl 
      onClick={() => {
        // Open search modal or navigate to search page
        openSearchModal();
      }}
    />
  );
}

/**
 * Generic wrapper for header control buttons with tooltip support
 * @param tooltip - Tooltip text displayed on hover
 * @param children - Control content (usually an icon)
 */
interface HeaderControlProps extends BoxProps {
  tooltip: string;
  children: React.ReactNode;
}

function HeaderControl(props: HeaderControlProps): JSX.Element;

import { HeaderControl } from "@mantine/ds";
import { IconSettings } from "@tabler/icons-react";

function SettingsControl() {
  return (
    <HeaderControl tooltip="Open settings">
      <IconSettings size={18} />
    </HeaderControl>
  );
}

/**
 * Toggle control for switching between light and dark color schemes
 * Automatically handles color scheme state and provides appropriate icon
 */
function ColorSchemeControl(): JSX.Element;

/**
 * Control for toggling text direction between left-to-right and right-to-left
 * Useful for testing RTL languages and internationalization
 */
function DirectionControl(): JSX.Element;

/**
 * Pre-configured header control that links to Discord community
 * Uses Discord branding and opens link in new tab
 * @param link - Optional Discord invite link, defaults to meta.discordLink
 */
function DiscordControl(props: { link?: string }): JSX.Element;

/**
 * Pre-configured header control that links to GitHub repository
 * Uses GitHub branding and opens link in new tab
 * @param link - GitHub repository URL
 */
function GithubControl(props: { link: string }): JSX.Element;

/**
 * Container component for organizing multiple header controls
 * Provides consistent spacing and layout for control groups
 */
interface HeaderControlsProps extends BoxProps {
  onSearch?: () => void;
  githubLink?: string;
  withDirectionToggle?: boolean;
  withSearch?: boolean;
  withGithub?: boolean;
  withDiscord?: boolean;
  discordLink?: string;
  withColorScheme?: boolean;
}

function HeaderControls(props: HeaderControlsProps): JSX.Element;

/**
 * Mobile-optimized search control with touch-friendly sizing
 * Designed for responsive header layouts
 * @param onSearch - Callback function when search is triggered
 */
function SearchMobileControl(props: { onSearch: () => void }): JSX.Element;

import { 
  HeaderControls,
  ColorSchemeControl,
  DirectionControl,
  DiscordControl,
  GithubControl,
  SearchMobileControl
} from "@mantine/ds";

function MobileHeader() {
  return (
    <HeaderControls
      withSearch
      withColorScheme
      withDirectionToggle
      withDiscord
      withGithub
      githubLink="https://github.com/mantinedev/mantine"
      onSearch={() => openSearchModal()}
    >
      {/* Custom controls can still be added as children */}
    </HeaderControls>
  );
}

// Alternative: Individual controls
function CustomHeader() {
  return (
    <div>
      <SearchMobileControl onSearch={() => openSearchModal()} />
      <ColorSchemeControl />
      <DirectionControl />
      <DiscordControl link="https://discord.gg/mantine" />
      <GithubControl link="https://github.com/mantinedev/mantine" />
    </div>
  );
}

type BoxProps = Record<string, any>;
type ElementProps<T extends keyof JSX.IntrinsicElements, U extends string = never> = 
  Omit<JSX.IntrinsicElements[T], U>;