Store Management

/**
 * Creates store and actions bundle for a new spotlight instance
 * @returns Tuple containing the store and action methods
 */
function createSpotlight(): readonly [SpotlightStore, SpotlightActions];

/**
 * Creates a new spotlight store instance
 * @returns New spotlight store with initial state
 */
function createSpotlightStore(): SpotlightStore;

interface SpotlightActions {
  /** Opens the spotlight */
  open(): void;
  /** Closes the spotlight */
  close(): void;
  /** Toggles the spotlight open/closed state */
  toggle(): void;
}

type SpotlightStore = MantineStore<SpotlightState>;

interface SpotlightState {
  /** Whether the spotlight is currently open */
  opened: boolean;
  /** Index of currently selected action */
  selected: number;
  /** ID of the actions list element */
  listId: string;
  /** Current search query */
  query: string;
  /** Whether the actions list is empty */
  empty: boolean;
  /** Set of registered action IDs */
  registeredActions: Set<string>;
}

import { createSpotlight, SpotlightRoot } from "@mantine/spotlight";

// Create a custom spotlight instance
function CustomSpotlightComponent() {
  const [store, spotlight] = createSpotlight();

  return (
    <div>
      <button onClick={spotlight.open}>Open Custom Spotlight</button>
      <button onClick={spotlight.close}>Close Custom Spotlight</button>
      <button onClick={spotlight.toggle}>Toggle Custom Spotlight</button>
      
      <SpotlightRoot store={store}>
        {/* Spotlight content */}
      </SpotlightRoot>
    </div>
  );
}

/**
 * Hook to consume spotlight store state
 * @param store - The spotlight store to subscribe to
 * @returns Current state of the spotlight store
 */
function useSpotlight(store: SpotlightStore): SpotlightState;

import { useSpotlight, createSpotlight } from "@mantine/spotlight";

function SpotlightStatus() {
  const [store] = createSpotlight();
  const { opened, query, selected } = useSpotlight(store);

  return (
    <div>
      <p>Spotlight is {opened ? 'open' : 'closed'}</p>
      <p>Current query: {query}</p>
      <p>Selected index: {selected}</p>
    </div>
  );
}

/** Global spotlight actions object */
const spotlight: SpotlightActions;

/** Global spotlight store instance */
const spotlightStore: SpotlightStore;

/**
 * Opens the global spotlight instance
 */
function openSpotlight(): void;

/**
 * Closes the global spotlight instance
 */
function closeSpotlight(): void;

/**
 * Toggles the global spotlight instance
 */
function toggleSpotlight(): void;

import { 
  spotlight, 
  openSpotlight, 
  closeSpotlight, 
  toggleSpotlight 
} from "@mantine/spotlight";

// Using the global instance
function GlobalSpotlightControls() {
  return (
    <div>
      {/* Using the spotlight object */}
      <button onClick={spotlight.open}>Open</button>
      <button onClick={spotlight.close}>Close</button>
      <button onClick={spotlight.toggle}>Toggle</button>
      
      {/* Or using standalone functions */}
      <button onClick={openSpotlight}>Open Global</button>
      <button onClick={closeSpotlight}>Close Global</button>
      <button onClick={toggleSpotlight}>Toggle Global</button>
    </div>
  );
}

const spotlightActions: {
  /** Opens the spotlight */
  open(store: SpotlightStore): void;
  /** Closes the spotlight */
  close(store: SpotlightStore): void;
  /** Toggles the spotlight */
  toggle(store: SpotlightStore): void;
  /** Updates store state */
  updateState(update: (state: SpotlightState) => Partial<SpotlightState>, store: SpotlightStore): void;
  /** Sets the selected action index */
  setSelectedAction(index: number, store: SpotlightStore): void;
  /** Sets the actions list ID */
  setListId(id: string, store: SpotlightStore): void;
  /** Selects an action by index */
  selectAction(index: number, store: SpotlightStore): number;
  /** Selects the next action */
  selectNextAction(store: SpotlightStore): number;
  /** Selects the previous action */
  selectPreviousAction(store: SpotlightStore): number;
  /** Triggers the currently selected action */
  triggerSelectedAction(store: SpotlightStore): void;
  /** Registers an action ID */
  registerAction(id: string, store: SpotlightStore): () => void;
  /** Sets the search query */
  setQuery(query: string, store: SpotlightStore): void;
  /** Clears the spotlight state */
  clearSpotlightState(options: { clearQuery: boolean | undefined }, store: SpotlightStore): void;
};

import { spotlightActions, createSpotlightStore } from "@mantine/spotlight";

function AdvancedSpotlightControl() {
  const store = createSpotlightStore();

  const handleCustomOpen = () => {
    // Set a custom query when opening
    spotlightActions.open(store);
    spotlightActions.setQuery("help", store);
  };

  const handleSelectFirst = () => {
    spotlightActions.selectAction(0, store);
  };

  return (
    <div>
      <button onClick={handleCustomOpen}>Open with Query</button>
      <button onClick={handleSelectFirst}>Select First Action</button>
    </div>
  );
}

import { createSpotlight, SpotlightRoot } from "@mantine/spotlight";

function MultipleSpotlights() {
  const [mainStore, mainSpotlight] = createSpotlight();
  const [helpStore, helpSpotlight] = createSpotlight();

  const mainActions = [
    { id: "home", label: "Home", onClick: () => navigate("/") },
    { id: "settings", label: "Settings", onClick: () => navigate("/settings") },
  ];

  const helpActions = [
    { id: "docs", label: "Documentation", onClick: () => window.open("/docs") },
    { id: "support", label: "Support", onClick: () => window.open("/support") },
  ];

  return (
    <div>
      <button onClick={mainSpotlight.open}>Open Main Menu</button>
      <button onClick={helpSpotlight.open}>Open Help Menu</button>

      <SpotlightRoot store={mainStore} shortcut="mod + k">
        {/* Main spotlight content */}
      </SpotlightRoot>

      <SpotlightRoot store={helpStore} shortcut="mod + h">
        {/* Help spotlight content */}
      </SpotlightRoot>
    </div>
  );
}

import { useSpotlight, createSpotlight, spotlightActions } from "@mantine/spotlight";

function SpotlightStateManager() {
  const [store, spotlight] = createSpotlight();
  const state = useSpotlight(store);

  const setCustomQuery = () => {
    spotlightActions.setQuery("custom search", store);
  };

  const clearState = () => {
    spotlightActions.clearSpotlightState({ clearQuery: true }, store);
  };

  return (
    <div>
      <p>State: {JSON.stringify(state, null, 2)}</p>
      <button onClick={setCustomQuery}>Set Custom Query</button>
      <button onClick={clearState}>Clear State</button>
    </div>
  );
}