components-svelte 0.1.0

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2026 Kimenzo
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,103 @@
+# ProductClient Svelte Components
+
+Svelte 5 components for documentation sites. The package provides composable documentation primitives with TypeScript types and a compiled stylesheet.
+
+## Requirements
+
+- Svelte 5.57 or newer
+- Node.js 20 or newer, or Bun
+- Tailwind CSS 4 when extending the component styles with application utilities
+
+## Installation
+
+```bash
+npm install components-svelte
+```
+
+The package can also be installed with pnpm, yarn, or Bun.
+
+## Setup
+
+Import the compiled stylesheet once from your application entrypoint or global stylesheet:
+
+```css
+@import "components-svelte/styles.css";
+```
+
+The stylesheet includes the component design tokens, base styles, utilities, and code-block styles. Import it before application overrides so local styles can take precedence.
+
+## Usage
+
+Components are native Svelte 5 components. They are not React wrappers.
+
+```svelte
+<script lang="ts">
+  import { Callout, CodeBlock } from "components-svelte";
+</script>
+
+<Callout variant="info" title="Getting started">
+  {#snippet children()}
+    <p>Install the package and import the stylesheet once.</p>
+  {/snippet}
+</Callout>
+
+<CodeBlock language="typescript">
+  {#snippet children()}const ready = true;{/snippet}
+</CodeBlock>
+```
+
+Svelte snippets are used for component content where a component accepts children or named slots:
+
+```svelte
+<script lang="ts">
+  import { Card } from "components-svelte";
+</script>
+
+<Card title="ProductClient">
+  {#snippet children()}
+    <p>Documentation primitives for your product.</p>
+  {/snippet}
+</Card>
+```
+
+## Component families
+
+- Accordion
+- Badge
+- Callout
+- Card
+- Code Block
+- Code Group
+- Color
+- Columns
+- Expandable
+- Frame
+- Icon
+- Mermaid
+- Panel
+- Property
+- Search
+- Steps
+- Tabs
+- Tile
+- Tooltip
+- Tree
+- Update
+- View
+
+Compound APIs are exported from the main entrypoint, including `Accordion.Group`, `Color.Row`, `Color.Item`, `Steps.Item`, `Tabs.Item`, `Tree.File`, and `Tree.Folder`.
+
+## Development
+
+```bash
+bun install
+bun run check
+bun run build:package
+bun run storybook
+```
+
+`bun run build:package` generates the typed component package in `dist` and the public `styles.css` export. The Vite app build remains available through `bun run build`.
+
+## License
+
+MIT

package/dist/components/Search.svelte

@@ -0,0 +1,320 @@
+<script lang="ts">
+  import { cn } from "../utils/cn";
+  import { Search as SearchIcon, ChevronRight, Loader2, SearchX } from "@lucide/svelte";
+  import { fade, scale } from "svelte/transition";
+  import { tick } from "svelte";
+  import type { Snippet } from "svelte";
+
+  export type SearchResult = {
+    id: string;
+    header: string;
+    content: string;
+    link: string;
+    icon?: Snippet;
+    metadata?: {
+      breadcrumbs?: string[];
+      [key: string]: unknown;
+    };
+  };
+
+  export type SearchProps = {
+    onSearch?: (query: string) => void;
+    results?: SearchResult[];
+    isOpen: boolean;
+    onClose: () => void;
+    isLoading?: boolean;
+    placeholder?: string;
+    recentSearches?: SearchResult[];
+    onSelectResult?: (result: SearchResult, query: string) => void;
+    class?: string;
+    emptyState?: Snippet;
+    loadingState?: Snippet;
+    position?: "top" | "center";
+    paddingTop?: string;
+    ref?: HTMLInputElement | null;
+  };
+
+  let {
+    onSearch,
+    results = [],
+    isOpen = $bindable(false),
+    onClose,
+    isLoading = false,
+    placeholder = "Search...",
+    recentSearches = [],
+    onSelectResult,
+    class: className,
+    emptyState,
+    loadingState,
+    position = "top",
+    paddingTop = "64px",
+    ref = $bindable(null),
+  }: SearchProps = $props();
+
+  let query = $state("");
+  let isContentScrolled = $state(false);
+  let inputRef: HTMLInputElement | null = $state(null);
+  let activeIndex = $state(-1);
+
+  $effect(() => {
+    if (inputRef) ref = inputRef;
+  });
+
+  $effect(() => {
+    if (!isOpen) {
+      query = "";
+      isContentScrolled = false;
+      activeIndex = -1;
+    }
+  });
+
+  // Focus handling — mirrors React autoFocus, with blur on close
+  $effect(() => {
+    if (isOpen && inputRef) {
+      tick().then(() => {
+        inputRef?.focus();
+      });
+    } else if (!isOpen && inputRef) {
+      inputRef?.blur();
+    }
+  });
+
+  // Global Esc and click-outside via window — mirrors React Dialog closeOnEscape + backdrop click
+  // Also handles autofocus return — after close, blur is handled above
+  $effect(() => {
+    if (!isOpen) return;
+    const handleWindowKeyDown = (e: KeyboardEvent) => {
+      if (e.key === "Escape") {
+        e.preventDefault();
+        onClose();
+      }
+    };
+    window.addEventListener("keydown", handleWindowKeyDown);
+    return () => window.removeEventListener("keydown", handleWindowKeyDown);
+  });
+
+  $effect(() => {
+    void query;
+    void results.length;
+    void recentSearches.length;
+    activeIndex = -1;
+  });
+
+  function handleQueryChange(value: string) {
+    query = value;
+    onSearch?.(value);
+  }
+
+  function handleSelectOption(result: SearchResult) {
+    if (!result) return;
+    onSelectResult?.(result, query);
+    onClose();
+  }
+
+  function handleKeyDown(e: KeyboardEvent) {
+    const target = e.target as HTMLInputElement;
+    if (e.key === "ArrowDown") {
+      e.preventDefault();
+      if (allResults.length === 0) return;
+      activeIndex = (activeIndex + 1) % allResults.length;
+      return;
+    }
+    if (e.key === "ArrowUp") {
+      e.preventDefault();
+      if (allResults.length === 0) return;
+      activeIndex = (activeIndex - 1 + allResults.length) % allResults.length;
+      return;
+    }
+    if (e.key === "Enter") {
+      if ((e.metaKey || e.ctrlKey) && query && results.length > 0 && !isLoading) {
+        e.preventDefault();
+        const firstResult = results[0];
+        if (firstResult) handleSelectOption(firstResult);
+        return;
+      }
+      if (activeIndex >= 0 && allResults[activeIndex]) {
+        e.preventDefault();
+        handleSelectOption(allResults[activeIndex] as SearchResult);
+        return;
+      }
+    }
+    if (e.key === "Escape") {
+      e.preventDefault();
+      onClose();
+      return;
+    }
+    if (e.key === "Tab" && (results.length > 0 || recentSearches.length > 0)) {
+      e.preventDefault();
+      target.setSelectionRange(target.value.length, target.value.length);
+    }
+  }
+
+  function handleScroll(e: Event) {
+    const target = e.target as HTMLElement;
+    isContentScrolled = target.scrollTop > 0;
+  }
+
+  let showRecentSearches = $derived(!query && recentSearches.length > 0 && results.length === 0);
+  let showResults = $derived(!!query && results.length > 0 && !isLoading);
+  let showEmptyState = $derived(!!query && !isLoading && results.length === 0);
+  let allResults = $derived(showRecentSearches ? recentSearches : showResults ? results : []);
+</script>
+
+<!-- Mirrors React <Transition show={isOpen}><Dialog> — no extra portal, same fixed overlay/panel, React vision preserved -->
+{#if isOpen}
+  <!-- svelte-ignore a11y_click_events_have_key_events -->
+  <!-- svelte-ignore a11y_no_static_element_interactions -->
+  <div class={cn("relative z-50", className)}>
+    <!-- Overlay — fixed, backdrop-blur, closes on click — mirrors React TransitionChild overlay -->
+    <div
+      class="fixed inset-0 bg-black/20 backdrop-blur-sm dark:bg-black/40"
+      onclick={onClose}
+      in:fade={{ duration: 100 }}
+      out:fade={{ duration: 50 }}
+    ></div>
+
+    <!-- Container — mirrors React fixed inset-0 flex justify-center -->
+    <!-- svelte-ignore a11y_click_events_have_key_events -->
+    <!-- svelte-ignore a11y_no_static_element_interactions -->
+    <div
+      class={cn("fixed inset-0 z-10 flex justify-center p-4", position === "top" ? "items-start" : "items-center")}
+      style={position === "top" ? `padding-top: ${paddingTop}` : undefined}
+      onclick={onClose}
+    >
+      <!-- Panel — mirrors React DialogPanel, stopPropagation so click inside doesn't close, with scale transform -->
+      <!-- svelte-ignore a11y_click_events_have_key_events -->
+      <!-- svelte-ignore a11y_no_static_element_interactions -->
+      <div
+        class="flex w-full max-w-[640px] flex-col overflow-hidden rounded-2xl border border-stone-200 bg-white shadow-2xl dark:border-white/10 dark:bg-stone-900"
+        onclick={(e) => e.stopPropagation()}
+        in:scale={{ duration: 100, start: 0.95, opacity: 0 }}
+        out:fade={{ duration: 50 }}
+      >
+        <div
+          class={cn("relative z-10 h-14 border-transparent border-b p-1.5 transition", isContentScrolled && "border-stone-200 dark:border-white/10")}
+        >
+          <!-- svelte-ignore a11y_autofocus -->
+          <input
+            bind:this={inputRef}
+            autocomplete="off"
+            autofocus
+            class={cn(
+              "peer h-full w-full rounded-xl bg-white pr-14 pl-11 text-stone-950 tracking-tight shadow-sm outline-none ring ring-black/5 transition placeholder:text-stone-400 focus:ring-black/90 dark:bg-stone-900 dark:text-white dark:focus:ring-white placeholder:dark:text-white/50",
+              "[&::-webkit-search-cancel-button]:appearance-none [&::-webkit-search-decoration]:appearance-none",
+              !isContentScrolled && query && "shadow-lg"
+            )}
+            oninput={(e) => handleQueryChange((e.target as HTMLInputElement).value)}
+            onkeydown={handleKeyDown}
+            placeholder={placeholder}
+            type="search"
+            value={query}
+          />
+          <SearchIcon class="absolute top-1/2 left-5 -translate-y-1/2 text-stone-950 opacity-50 peer-focus:opacity-100 dark:text-white" size={18} />
+          {#if query}
+            <div class="absolute top-1/2 right-6 flex -translate-y-1/2 items-center justify-center gap-1 rounded-md bg-stone-950/5 px-1.5 py-1.5 font-medium text-xs text-zinc-950/70 leading-[9px] dark:bg-white/5 dark:text-white/70">
+              ESC
+            </div>
+          {/if}
+        </div>
+
+        <div class="mx-1.5 max-h-[calc(100vh-10rem)] overflow-y-auto" onscroll={handleScroll} role="listbox">
+          {#if showRecentSearches}
+            <div class="flex items-center justify-between px-2.5 py-2">
+              <span class="truncate text-sm text-stone-500">Recent searches</span>
+            </div>
+            {#each recentSearches as result, i (result.id)}
+              <button
+                type="button"
+                class="w-full text-left last:mb-2"
+                onclick={() => handleSelectOption(result)}
+                onmouseenter={() => activeIndex = i}
+                onmouseleave={() => activeIndex = -1}
+              >
+                <div class={cn("flex w-full cursor-pointer items-start gap-2 rounded-xl border border-transparent bg-transparent px-3 py-2 text-stone-500 transition-colors focus:ring-0 focus:ring-offset-0", activeIndex === i && "bg-stone-100 dark:bg-white/5")}>
+                  {#if result.icon}
+                    <div class="shrink-0 self-center text-stone-700 dark:text-stone-300">
+                      {@render result.icon()}
+                    </div>
+                  {/if}
+                  <div class="flex flex-1 flex-col gap-1">
+                    {#if result.metadata?.breadcrumbs && result.metadata.breadcrumbs.length > 0}
+                      <div class="flex items-center gap-1 truncate text-stone-500 text-xs dark:text-stone-400">
+                        {#each result.metadata.breadcrumbs as crumb, idx}
+                          {#if idx > 0}<span class="text-stone-400"> &gt; </span>{/if}<span class="truncate">{crumb}</span>
+                        {/each}
+                      </div>
+                    {/if}
+                    <div class="truncate font-medium text-sm text-stone-900 dark:text-white">{result.header}</div>
+                    {#if result.content}<div class="line-clamp-2 text-sm text-stone-600 dark:text-stone-400">{result.content}</div>{/if}
+                  </div>
+                  {#if activeIndex === i}<ChevronRight class="size-5 shrink-0 self-center text-stone-400 dark:text-stone-500" />{/if}
+                </div>
+              </button>
+            {/each}
+          {/if}
+
+          {#if showResults}
+            {#each results as result, i (result.id)}
+              {@const offset = showRecentSearches ? recentSearches.length : 0}
+              <button
+                type="button"
+                class="w-full text-left last:mb-2"
+                onclick={() => handleSelectOption(result)}
+                onmouseenter={() => activeIndex = offset + i}
+                onmouseleave={() => activeIndex = -1}
+              >
+                <div class={cn("flex w-full cursor-pointer items-start gap-2 rounded-xl border border-transparent bg-transparent px-3 py-2 text-stone-500 transition-colors focus:ring-0 focus:ring-offset-0", activeIndex === offset + i && "bg-stone-100 dark:bg-white/5")}>
+                  {#if result.icon}
+                    <div class="shrink-0 self-center text-stone-700 dark:text-stone-300">
+                      {@render result.icon()}
+                    </div>
+                  {/if}
+                  <div class="flex flex-1 flex-col gap-1">
+                    {#if result.metadata?.breadcrumbs && result.metadata.breadcrumbs.length > 0}
+                      <div class="flex items-center gap-1 truncate text-stone-500 text-xs dark:text-stone-400">
+                        {#each result.metadata.breadcrumbs as crumb, idx}
+                          {#if idx > 0}<span class="text-stone-400"> &gt; </span>{/if}<span class="truncate">{crumb}</span>
+                        {/each}
+                      </div>
+                    {/if}
+                    <div class="truncate font-medium text-sm text-stone-900 dark:text-white">{result.header}</div>
+                    {#if result.content}<div class="line-clamp-2 text-sm text-stone-600 dark:text-stone-400">{result.content}</div>{/if}
+                  </div>
+                  {#if activeIndex === offset + i}<ChevronRight class="size-5 shrink-0 self-center text-stone-400 dark:text-stone-500" />{/if}
+                </div>
+              </button>
+            {/each}
+          {/if}
+
+          {#if isLoading && query}
+            <div class="flex flex-col items-center justify-center gap-3 px-2.5 py-12">
+              {#if loadingState}
+                {@render loadingState()}
+              {:else}
+                <Loader2 class="size-6 animate-spin text-stone-400 dark:text-stone-500" />
+                <div class="text-center">
+                  <p class="font-medium text-sm text-stone-700 dark:text-stone-300">Searching...</p>
+                  <p class="mt-1 text-stone-500 text-xs dark:text-stone-400">Finding results for "{query}"</p>
+                </div>
+              {/if}
+            </div>
+          {/if}
+
+          {#if showEmptyState}
+            <div class="flex flex-col items-center justify-center gap-3 px-2.5 py-12">
+              {#if emptyState}
+                {@render emptyState()}
+              {:else}
+                <SearchX class="size-6 text-stone-300 dark:text-stone-600" />
+                <div class="text-center">
+                  <p class="font-medium text-sm text-stone-700 dark:text-stone-300">No results found</p>
+                  <p class="mt-1 text-stone-500 text-xs dark:text-stone-400">Try searching with different keywords</p>
+                </div>
+              {/if}
+            </div>
+          {/if}
+        </div>
+      </div>
+    </div>
+  </div>
+{/if}

package/dist/components/Search.svelte.d.ts

@@ -0,0 +1,31 @@
+import type { Snippet } from "svelte";
+export type SearchResult = {
+    id: string;
+    header: string;
+    content: string;
+    link: string;
+    icon?: Snippet;
+    metadata?: {
+        breadcrumbs?: string[];
+        [key: string]: unknown;
+    };
+};
+export type SearchProps = {
+    onSearch?: (query: string) => void;
+    results?: SearchResult[];
+    isOpen: boolean;
+    onClose: () => void;
+    isLoading?: boolean;
+    placeholder?: string;
+    recentSearches?: SearchResult[];
+    onSelectResult?: (result: SearchResult, query: string) => void;
+    class?: string;
+    emptyState?: Snippet;
+    loadingState?: Snippet;
+    position?: "top" | "center";
+    paddingTop?: string;
+    ref?: HTMLInputElement | null;
+};
+declare const Search: import("svelte").Component<SearchProps, {}, "ref" | "isOpen">;
+type Search = ReturnType<typeof Search>;
+export default Search;

package/dist/components/SearchButton.svelte

@@ -0,0 +1,82 @@
+<script lang="ts">
+  import { Search } from "@lucide/svelte";
+  import { cn } from "../utils/cn";
+  import type { Snippet } from "svelte";
+  import type { HTMLButtonAttributes } from "svelte/elements";
+  import { getContext } from "svelte";
+
+  // Svelte props for SearchButton — replaces React ButtonHTMLAttributes + forwardRef
+  // In Svelte 5, forwardRef is replaced by bind:this with $bindable ref prop
+  export type SearchButtonProps = HTMLButtonAttributes & {
+    showShortcut?: boolean;
+    shortcutText?: string;
+    class?: string;
+    children?: Snippet;
+    // Svelte event handler — replaces React onClick prop
+    onclick?: (e: MouseEvent) => void;
+    // Svelte ref binding — replaces React forwardRef
+    ref?: HTMLElement | null;
+  };
+
+  let {
+    showShortcut = true,
+    shortcutText = "⌘K",
+    class: className,
+    children,
+    onclick,
+    ref = $bindable(null),
+    ...restProps
+  }: SearchButtonProps = $props();
+
+  // Svelte context — replaces React useSearch() / SearchContext
+  // When SearchProvider is ported, it will setContext with { open, close, toggle, isOpen }
+  type SearchContextValue = {
+    open: () => void;
+    close: () => void;
+    toggle: () => void;
+    isOpen: boolean;
+  };
+  const searchContext = getContext<SearchContextValue | null>("search-context");
+
+  // Svelte click handler — replaces React handleClick that called context?.open()
+  function handleClick(e: MouseEvent) {
+    // Svelte context open — mirrors React context?.open()
+    searchContext?.open();
+    onclick?.(e);
+  }
+</script>
+
+<button
+  bind:this={ref}
+  type="button"
+  class={cn(
+    "flex w-full items-center gap-2 px-3 py-2 text-left text-sm",
+    "bg-transparent",
+    "border border-stone-200 dark:border-white/10",
+    "rounded-xl",
+    "text-stone-500",
+    "hover:border-stone-300 dark:hover:border-white/20",
+    "focus:outline-none focus:ring-0 focus:ring-offset-0",
+    "transition-colors",
+    "cursor-pointer",
+    className
+  )}
+  onclick={handleClick}
+  {...restProps}
+>
+  <Search class="shrink-0 text-stone-800 dark:text-stone-500" size={16} />
+  <span class="flex-1 text-stone-500 dark:text-stone-400">
+    {#if children}
+      {@render children()}
+    {:else}
+      Search...
+    {/if}
+  </span>
+  {#if showShortcut}
+    <kbd
+      class="hidden items-center gap-0.5 rounded px-1.5 py-0.5 font-medium font-sans text-stone-500 text-xs sm:inline-flex dark:text-stone-400"
+    >
+      {shortcutText}
+    </kbd>
+  {/if}
+</button>

package/dist/components/SearchButton.svelte.d.ts

@@ -0,0 +1,13 @@
+import type { Snippet } from "svelte";
+import type { HTMLButtonAttributes } from "svelte/elements";
+export type SearchButtonProps = HTMLButtonAttributes & {
+    showShortcut?: boolean;
+    shortcutText?: string;
+    class?: string;
+    children?: Snippet;
+    onclick?: (e: MouseEvent) => void;
+    ref?: HTMLElement | null;
+};
+declare const SearchButton: import("svelte").Component<SearchButtonProps, {}, "ref">;
+type SearchButton = ReturnType<typeof SearchButton>;
+export default SearchButton;

package/dist/components/SearchProvider.svelte

@@ -0,0 +1,87 @@
+<script lang="ts">
+  import { setContext, onMount } from "svelte";
+  import Search from "./Search.svelte";
+  import type { SearchProps } from "./Search.svelte";
+  import type { Snippet } from "svelte";
+
+  // Svelte SearchContextValue — mirrors React SearchContextValue
+  export type SearchContextValue = {
+    isOpen: boolean;
+    open: () => void;
+    close: () => void;
+    toggle: () => void;
+  };
+
+  export type SearchProviderProps = {
+    children?: Snippet;
+    shortcutKey?: string;
+    requireModifier?: boolean;
+    searchProps: Omit<SearchProps, "isOpen" | "onClose">;
+  };
+
+  let {
+    children,
+    shortcutKey = "k",
+    requireModifier = true,
+    searchProps,
+  }: SearchProviderProps = $props();
+
+  // Svelte state — replaces React useState
+  let isOpen = $state(false);
+
+  // Svelte handlers — replaces React useCallback
+  function open() {
+    isOpen = true;
+  }
+  function close() {
+    isOpen = false;
+  }
+  function toggle() {
+    isOpen = !isOpen;
+  }
+
+  // Svelte context — replaces React createContext + Provider
+  // Use getter for isOpen so consumers see reactive value
+  const contextValue: SearchContextValue = {
+    get isOpen() {
+      return isOpen;
+    },
+    open,
+    close,
+    toggle,
+  };
+  setContext("search-context", contextValue);
+
+  // Svelte effect — replaces React useEffect for global shortcut
+  $effect(() => {
+    const handleKeyDown = (e: KeyboardEvent) => {
+      const modifierPressed = e.metaKey || e.ctrlKey;
+      const shouldTrigger = requireModifier
+        ? modifierPressed && e.key.toLowerCase() === shortcutKey.toLowerCase()
+        : e.key.toLowerCase() === shortcutKey.toLowerCase();
+
+      if (shouldTrigger) {
+        // Skip if user is typing in editable element and no modifier
+        if (!modifierPressed) {
+          const target = e.target as HTMLElement;
+          const isEditable =
+            target.tagName === "INPUT" ||
+            target.tagName === "TEXTAREA" ||
+            target.isContentEditable;
+          if (isEditable) return;
+        }
+        e.preventDefault();
+        toggle();
+      }
+    };
+
+    window.addEventListener("keydown", handleKeyDown);
+    return () => window.removeEventListener("keydown", handleKeyDown);
+  });
+</script>
+
+{#if children}
+  {@render children()}
+{/if}
+<!-- @ts-ignore - searchProps contains required Search props -->
+<Search {...searchProps} bind:isOpen onClose={close} />

package/dist/components/SearchProvider.svelte.d.ts

@@ -0,0 +1,17 @@
+import type { SearchProps } from "./Search.svelte";
+import type { Snippet } from "svelte";
+export type SearchContextValue = {
+    isOpen: boolean;
+    open: () => void;
+    close: () => void;
+    toggle: () => void;
+};
+export type SearchProviderProps = {
+    children?: Snippet;
+    shortcutKey?: string;
+    requireModifier?: boolean;
+    searchProps: Omit<SearchProps, "isOpen" | "onClose">;
+};
+declare const SearchProvider: import("svelte").Component<SearchProviderProps, {}, "">;
+type SearchProvider = ReturnType<typeof SearchProvider>;
+export default SearchProvider;