svelte-docsmith 0.2.0 → 0.3.0

package/dist/ui/prop.svelte

@@ -14,7 +14,7 @@
 		type?: string;
 		/** Mark the property as required. */
 		required?: boolean;
-		/** Default value, shown in its own column. */
+		/** Default value, shown alongside the type. */
 		default?: string;
 		/** Description. */
 		children?: Snippet;
@@ -22,7 +22,8 @@
 
 	// Split a union into per-value chips so long ones wrap as a tidy pill group
 	// instead of ugly broken text. Skip splitting when the type is a generic
-	// (`Array<A | B>`) where a top-level `|` split would be wrong.
+	// (`Array<A | B>`) or a signature (`() => …`) where a top-level `|` split
+	// would be wrong — those render as one chip that wraps on its own.
 	const typeParts = $derived.by(() => {
 		if (!type) return [];
 		if (/[<(]/.test(type)) return [type];
@@ -31,46 +32,64 @@
 			.map((s) => s.trim())
 			.filter(Boolean);
 	});
+	const solo = $derived(typeParts.length === 1);
 </script>
 
-<tr>
-	<td class="prop-name">
-		<code>{name}</code>
+<div class="prop-row">
+	<div class="prop-head">
+		<code class="prop-name">{name}</code>
 		{#if required}<span class="prop-required">required</span>{/if}
-	</td>
-	<td class="prop-type">
-		{#each typeParts as part (part)}
-			<code class="type-chip">{part}</code>
-		{/each}
-	</td>
-	<td class="prop-default">
+
+		{#if type}
+			<span class="prop-types">
+				{#each typeParts as part (part)}
+					<code class="type-chip" class:type-chip-solo={solo}>{part}</code>
+				{/each}
+			</span>
+		{/if}
+
 		{#if defaultValue !== undefined}
-			<code>{defaultValue}</code>
-		{:else}
-			<span class="prop-none" aria-hidden="true">—</span>
+			<span class="prop-default">
+				<span class="prop-default-label">default</span>
+				<code>{defaultValue}</code>
+			</span>
 		{/if}
-	</td>
-	<td class="prop-desc">
-		{#if children}{@render children()}{/if}
-	</td>
-</tr>
+	</div>
+
+	{#if children}
+		<div class="prop-desc">{@render children()}</div>
+	{/if}
+</div>
 
 <style>
+	.prop-row {
+		padding: 0.95rem 1rem;
+		border-top: 1px solid var(--border);
+	}
+	.prop-row:first-child {
+		border-top: none;
+	}
+
+	/* Name + required + type + default flow on one wrapping line. */
+	.prop-head {
+		display: flex;
+		flex-wrap: wrap;
+		align-items: center;
+		gap: 0.4rem 0.6rem;
+		min-width: 0;
+	}
+
 	/* Name is the anchor you scan for: mono, ink, medium weight. */
 	.prop-name {
-		white-space: nowrap;
-	}
-	.prop-name code {
 		font-family: var(--font-mono, ui-monospace, monospace);
 		font-size: 0.8125rem;
 		font-weight: 600;
 		color: var(--foreground);
 	}
+
 	/* Solid brand pill — the sanctioned primary-foreground-on-primary pairing,
 	   so it stays legible in both themes (terracotta-on-tint fails AA in light). */
 	.prop-required {
-		display: inline-block;
-		margin-left: 0.45rem;
 		padding: 0.05rem 0.4rem;
 		border-radius: 9999px;
 		background: var(--primary);
@@ -78,17 +97,18 @@
 		font-size: 0.625rem;
 		font-weight: 600;
 		letter-spacing: 0.02em;
-		vertical-align: 0.1em;
+		text-transform: uppercase;
 	}
 
 	/* Type values as chips: a union wraps as a neat pill group, each token
-	   unbroken. Single types render as one chip. */
-	.prop-type {
-		max-width: 26rem;
+	   unbroken. A lone signature/generic wraps within itself on narrow screens. */
+	.prop-types {
+		display: inline-flex;
+		flex-wrap: wrap;
+		gap: 0.3rem;
+		min-width: 0;
 	}
 	.type-chip {
-		display: inline-block;
-		margin: 0.1rem 0.3rem 0.1rem 0;
 		padding: 0.05rem 0.4rem;
 		border-radius: 0.4rem;
 		border: 1px solid var(--border);
@@ -98,22 +118,36 @@
 		color: var(--foreground);
 		white-space: nowrap;
 	}
+	.type-chip-solo {
+		white-space: normal;
+		overflow-wrap: anywhere;
+		max-width: 100%;
+	}
 
+	/* Default sits at the end of the line, pushed right when there's room. */
 	.prop-default {
+		display: inline-flex;
+		align-items: baseline;
+		gap: 0.35rem;
+		margin-left: auto;
 		white-space: nowrap;
 	}
+	.prop-default-label {
+		font-size: 0.7rem;
+		color: var(--muted-foreground);
+	}
 	.prop-default code {
 		font-family: var(--font-mono, ui-monospace, monospace);
-		font-size: 0.8125rem;
+		font-size: 0.78rem;
 		color: var(--foreground);
 	}
-	.prop-none {
-		color: var(--muted-foreground);
-	}
 
 	.prop-desc {
-		color: var(--foreground);
+		margin-top: 0.5rem;
+		color: var(--muted-foreground);
+		font-size: 0.875rem;
 		line-height: 1.55;
+		max-width: 68ch;
 	}
 	.prop-desc :global(code) {
 		font-family: var(--font-mono, ui-monospace, monospace);
@@ -121,6 +155,7 @@
 		padding: 0.05em 0.3em;
 		border-radius: 0.3rem;
 		background: color-mix(in oklch, var(--muted) 60%, transparent);
+		color: var(--foreground);
 	}
 	.prop-desc :global(a) {
 		color: var(--primary);

package/dist/ui/prop.svelte.d.ts

@@ -6,7 +6,7 @@ type $$ComponentProps = {
     type?: string;
     /** Mark the property as required. */
     required?: boolean;
-    /** Default value, shown in its own column. */
+    /** Default value, shown alongside the type. */
     default?: string;
     /** Description. */
     children?: Snippet;

package/dist/ui/props-table.svelte

@@ -18,6 +18,9 @@
 	    <Prop name="variant" type="'a' | 'b'" default="'a'">Visual intent.</Prop>
 	    <Prop name="href" type="string" required>Turns it into a link.</Prop>
 	  </PropsTable>
+
+	Rows stack (name/type/default on one line, description below) so long type
+	signatures never force a horizontal scroll or crush the description.
 -->
 <div class="props-table not-prose">
 	{#if title}
@@ -26,20 +29,8 @@
 			<span class="props-table-caption-name">{title}</span>
 		</div>
 	{/if}
-	<div class="props-table-scroll">
-		<table>
-			<thead>
-				<tr>
-					<th class="col-prop">Prop</th>
-					<th class="col-type">Type</th>
-					<th class="col-default">Default</th>
-					<th class="col-desc">Description</th>
-				</tr>
-			</thead>
-			<tbody>
-				{@render children()}
-			</tbody>
-		</table>
+	<div class="props-list">
+		{@render children()}
 	</div>
 </div>
 
@@ -49,12 +40,11 @@
 		border: 1px solid var(--border);
 		border-radius: var(--radius);
 		background: var(--card);
-		/* Clip the scroll region to the rounded corners. */
 		overflow: hidden;
 	}
 
-	/* Caption = which component. Mono + ink weight, distinct from the quiet
-	   column-header row below it so the two never read as one grey slab. */
+	/* Caption = which component. Mono + ink weight, distinct from the rows below
+	   it so the header never reads as one grey slab. */
 	.props-table-caption {
 		display: flex;
 		align-items: center;
@@ -78,50 +68,8 @@
 		color: var(--foreground);
 	}
 
-	.props-table-scroll {
-		overflow-x: auto;
-	}
-	.props-table table {
-		width: 100%;
-		border-collapse: collapse;
-		font-size: 0.875rem;
-	}
-
-	/* Column headers: quiet labels, no fill — the caption owns the emphasis. */
-	.props-table :global(thead th) {
-		text-align: left;
-		font-size: 0.75rem;
-		font-weight: 500;
-		color: var(--muted-foreground);
-		padding: 0.55rem 1rem;
-		border-bottom: 1px solid var(--border);
-		white-space: nowrap;
-	}
-	/* Prop / Default shrink to their content; Type flexes; Description holds width. */
-	.props-table :global(.col-prop),
-	.props-table :global(.col-default) {
-		width: 1%;
-	}
-	.props-table :global(.col-desc) {
-		width: 40%;
-	}
-
-	.props-table :global(tbody td) {
-		padding: 0.7rem 1rem;
-		vertical-align: baseline;
-		border-top: 1px solid var(--border);
-		transition: background-color 120ms ease;
-	}
-	.props-table :global(tbody tr:first-child td) {
-		border-top: none;
-	}
-	.props-table :global(tbody tr:hover td) {
-		background: color-mix(in oklch, var(--muted) 45%, transparent);
-	}
-
-	@media (prefers-reduced-motion: reduce) {
-		.props-table :global(tbody td) {
-			transition: none;
-		}
+	/* Each child <Prop> is a `.prop-row` with its own border-top. */
+	.props-list {
+		min-width: 0;
 	}
 </style>

package/dist/ui/search-trigger.svelte

@@ -0,0 +1,31 @@
+<script lang="ts">
+	import SearchIcon from '@lucide/svelte/icons/search';
+	import { useSearch } from '../search/context.svelte.js';
+
+	const { class: className = '' }: { class?: string } = $props();
+
+	const search = useSearch();
+
+	// Resolve the modifier label client-side so SSR stays platform-neutral.
+	let isMac = $state(false);
+	$effect(() => {
+		isMac = navigator.platform.toLowerCase().includes('mac');
+	});
+</script>
+
+{#if search}
+	<button
+		type="button"
+		onclick={() => (search.open = true)}
+		class="text-muted-foreground hover:text-foreground border-border/50 bg-muted/40 hover:bg-muted focus-visible:ring-ring inline-flex h-8 items-center gap-2 rounded-md border px-2.5 text-sm transition-colors focus-visible:ring-2 focus-visible:outline-none {className}"
+	>
+		<SearchIcon class="size-4 shrink-0" />
+		<span class="hidden sm:inline">Search</span>
+		<kbd
+			class="border-border/60 bg-background text-muted-foreground pointer-events-none ml-2 hidden h-5 items-center gap-0.5 rounded border px-1.5 font-mono text-[10px] font-medium sm:inline-flex"
+		>
+			{isMac ? '⌘' : 'Ctrl'}K
+		</kbd>
+		<span class="sr-only">Search documentation</span>
+	</button>
+{/if}

package/dist/ui/search-trigger.svelte.d.ts

@@ -0,0 +1,6 @@
+type $$ComponentProps = {
+    class?: string;
+};
+declare const SearchTrigger: import("svelte").Component<$$ComponentProps, {}, "">;
+type SearchTrigger = ReturnType<typeof SearchTrigger>;
+export default SearchTrigger;

package/dist/ui/search.svelte

@@ -0,0 +1,167 @@
+<script lang="ts">
+	import { goto } from '$app/navigation';
+	import * as Command from './shadcn/command/index.js';
+	import { useSearch } from '../search/context.svelte.js';
+	import type { SearchDoc } from '../config.js';
+	import type { SearchEngine } from '../search/create-search.js';
+	import CornerDownLeft from '@lucide/svelte/icons/corner-down-left';
+	import FileText from '@lucide/svelte/icons/file-text';
+	import LoaderCircle from '@lucide/svelte/icons/loader-circle';
+	import SearchIcon from '@lucide/svelte/icons/search';
+
+	const {
+		load,
+		placeholder = 'Search documentation...'
+	}: {
+		/**
+		 * Lazily provide the generated search records. Wired by the consumer so the
+		 * index is code-split and only fetched when the palette first opens, e.g.
+		 * `() => import('svelte-docsmith/search').then((m) => m.docs)`.
+		 */
+		load: () => Promise<SearchDoc[]>;
+		placeholder?: string;
+	} = $props();
+
+	const search = useSearch();
+
+	let query = $state('');
+	let engine = $state<SearchEngine | null>(null);
+	let status = $state<'idle' | 'loading' | 'error'>('idle');
+
+	const trimmed = $derived(query.trim());
+	const results = $derived(engine && trimmed ? engine.search(query) : []);
+
+	// Build the index the first time the palette opens; keep it for later opens.
+	async function ensureEngine() {
+		if (engine || status === 'loading') return;
+		status = 'loading';
+		try {
+			const [{ createSearchEngine }, docs] = await Promise.all([
+				import('../search/create-search.js'),
+				load()
+			]);
+			engine = createSearchEngine(docs);
+			status = 'idle';
+		} catch (error) {
+			console.error('[svelte-docsmith] failed to load the search index', error);
+			status = 'error';
+		}
+	}
+
+	$effect(() => {
+		if (search?.open) ensureEngine();
+	});
+
+	function onWindowKeydown(event: KeyboardEvent) {
+		if ((event.metaKey || event.ctrlKey) && event.key.toLowerCase() === 'k') {
+			event.preventDefault();
+			if (search) search.open = !search.open;
+		}
+	}
+
+	function select(path: string) {
+		if (search) search.open = false;
+		query = '';
+		goto(path);
+	}
+</script>
+
+<svelte:window onkeydown={onWindowKeydown} />
+
+{#if search}
+	<Command.Dialog
+		bind:open={search.open}
+		shouldFilter={false}
+		title="Search"
+		description="Search the documentation"
+		class="ring-border/70 shadow-2xl ring-1 sm:max-w-xl"
+	>
+		<Command.Input bind:value={query} {placeholder} />
+
+		<div class="bg-border/50 -mx-1 mt-1 h-px"></div>
+
+		<Command.List class="scrollbar-slim max-h-[min(24rem,60vh)] px-2 py-2">
+			{#if status === 'loading'}
+				<div class="text-muted-foreground flex items-center justify-center gap-2 py-10 text-sm">
+					<LoaderCircle class="size-4 animate-spin" />
+					Loading search…
+				</div>
+			{:else if status === 'error'}
+				<div class="text-muted-foreground px-4 py-10 text-center text-sm">
+					Search is unavailable right now.
+				</div>
+			{:else if !trimmed}
+				<div
+					class="text-muted-foreground flex flex-col items-center gap-3 px-4 py-10 text-center text-sm"
+				>
+					<span
+						class="bg-muted/60 text-muted-foreground flex size-11 items-center justify-center rounded-full"
+					>
+						<SearchIcon class="size-5" />
+					</span>
+					<span>Search across every page of the documentation.</span>
+				</div>
+			{:else if results.length === 0}
+				<div class="text-muted-foreground px-4 py-10 text-center text-sm">
+					No results for <span class="text-foreground font-medium">“{trimmed}”</span>.
+				</div>
+			{:else}
+				{#each results as result (result.path)}
+					<Command.LinkItem
+						href={result.path}
+						onSelect={() => select(result.path)}
+						class="group/result mb-0.5 flex items-center gap-3 rounded-lg px-2.5 py-2 aria-selected:bg-accent aria-selected:text-accent-foreground"
+					>
+						<span
+							class="border-border/60 bg-muted/40 text-muted-foreground group-aria-selected/result:border-accent-foreground/20 group-aria-selected/result:text-accent-foreground flex size-8 shrink-0 items-center justify-center rounded-md border"
+						>
+							<FileText class="size-4" />
+						</span>
+
+						<span class="flex min-w-0 flex-1 flex-col gap-0.5">
+							<span class="flex items-center gap-2">
+								<span class="truncate font-medium">{result.title}</span>
+								{#if result.section}
+									<span
+										class="border-border/60 text-muted-foreground group-aria-selected/result:border-accent-foreground/20 group-aria-selected/result:text-accent-foreground/80 ml-auto shrink-0 rounded-full border px-2 py-0.5 text-[10px] font-medium tracking-wide uppercase"
+									>
+										{result.section}
+									</span>
+								{/if}
+							</span>
+							{#if result.snippet}
+								<span
+									class="text-muted-foreground group-aria-selected/result:text-accent-foreground/80 line-clamp-1 text-xs"
+								>
+									{result.snippet}
+								</span>
+							{/if}
+						</span>
+
+						<CornerDownLeft
+							class="text-muted-foreground group-aria-selected/result:text-accent-foreground size-4 shrink-0 opacity-0 group-aria-selected/result:opacity-100"
+						/>
+					</Command.LinkItem>
+				{/each}
+			{/if}
+		</Command.List>
+
+		<div
+			class="border-border/50 text-muted-foreground -mx-1 flex items-center gap-4 border-t px-4 py-2 text-[11px]"
+		>
+			<span class="flex items-center gap-1.5">
+				<kbd class="border-border/60 bg-muted/40 rounded border px-1.5 py-0.5 font-sans">↑</kbd>
+				<kbd class="border-border/60 bg-muted/40 rounded border px-1.5 py-0.5 font-sans">↓</kbd>
+				to navigate
+			</span>
+			<span class="flex items-center gap-1.5">
+				<kbd class="border-border/60 bg-muted/40 rounded border px-1.5 py-0.5 font-sans">↵</kbd>
+				to open
+			</span>
+			<span class="ml-auto flex items-center gap-1.5">
+				<kbd class="border-border/60 bg-muted/40 rounded border px-1.5 py-0.5 font-sans">esc</kbd>
+				to close
+			</span>
+		</div>
+	</Command.Dialog>
+{/if}

package/dist/ui/search.svelte.d.ts

@@ -0,0 +1,13 @@
+import type { SearchDoc } from '../config.js';
+type $$ComponentProps = {
+    /**
+     * Lazily provide the generated search records. Wired by the consumer so the
+     * index is code-split and only fetched when the palette first opens, e.g.
+     * `() => import('svelte-docsmith/search').then((m) => m.docs)`.
+     */
+    load: () => Promise<SearchDoc[]>;
+    placeholder?: string;
+};
+declare const Search: import("svelte").Component<$$ComponentProps, {}, "">;
+type Search = ReturnType<typeof Search>;
+export default Search;

package/dist/ui/shadcn/accordion/accordion.svelte.d.ts

@@ -1,4 +1,4 @@
 import { Accordion as AccordionPrimitive } from 'bits-ui';
-declare const Accordion: import("svelte").Component<AccordionPrimitive.RootProps, {}, "ref" | "value">;
+declare const Accordion: import("svelte").Component<AccordionPrimitive.RootProps, {}, "value" | "ref">;
 type Accordion = ReturnType<typeof Accordion>;
 export default Accordion;

package/dist/ui/shadcn/command/command-dialog.svelte

@@ -0,0 +1,42 @@
+<script lang="ts">
+	import type { Command as CommandPrimitive, Dialog as DialogPrimitive } from 'bits-ui';
+	import type { Snippet } from 'svelte';
+	import Command from './command.svelte';
+	import * as Dialog from '../dialog/index.js';
+	import { cn, type WithoutChildrenOrChild } from '../../../shadcn.js';
+
+	let {
+		open = $bindable(false),
+		ref = $bindable(null),
+		value = $bindable(''),
+		title = 'Command Palette',
+		description = 'Search for a command to run...',
+		showCloseButton = false,
+		portalProps,
+		children,
+		class: className,
+		...restProps
+	}: WithoutChildrenOrChild<DialogPrimitive.RootProps> &
+		WithoutChildrenOrChild<CommandPrimitive.RootProps> & {
+			portalProps?: DialogPrimitive.PortalProps;
+			children: Snippet;
+			title?: string;
+			description?: string;
+			showCloseButton?: boolean;
+			class?: string;
+		} = $props();
+</script>
+
+<Dialog.Root bind:open {...restProps}>
+	<Dialog.Header class="sr-only">
+		<Dialog.Title>{title}</Dialog.Title>
+		<Dialog.Description>{description}</Dialog.Description>
+	</Dialog.Header>
+	<Dialog.Content
+		class={cn('rounded-xl! top-1/3 translate-y-0 overflow-hidden p-0', className)}
+		{showCloseButton}
+		{portalProps}
+	>
+		<Command {...restProps} bind:value bind:ref {children} />
+	</Dialog.Content>
+</Dialog.Root>

package/dist/ui/shadcn/command/command-dialog.svelte.d.ts

@@ -0,0 +1,14 @@
+import type { Command as CommandPrimitive, Dialog as DialogPrimitive } from 'bits-ui';
+import type { Snippet } from 'svelte';
+import { type WithoutChildrenOrChild } from '../../../shadcn.js';
+type $$ComponentProps = WithoutChildrenOrChild<DialogPrimitive.RootProps> & WithoutChildrenOrChild<CommandPrimitive.RootProps> & {
+    portalProps?: DialogPrimitive.PortalProps;
+    children: Snippet;
+    title?: string;
+    description?: string;
+    showCloseButton?: boolean;
+    class?: string;
+};
+declare const CommandDialog: import("svelte").Component<$$ComponentProps, {}, "value" | "ref" | "open">;
+type CommandDialog = ReturnType<typeof CommandDialog>;
+export default CommandDialog;

package/dist/ui/shadcn/command/command-empty.svelte

@@ -0,0 +1,17 @@
+<script lang="ts">
+	import { Command as CommandPrimitive } from 'bits-ui';
+	import { cn } from '../../../shadcn.js';
+
+	let {
+		ref = $bindable(null),
+		class: className,
+		...restProps
+	}: CommandPrimitive.EmptyProps = $props();
+</script>
+
+<CommandPrimitive.Empty
+	bind:ref
+	data-slot="command-empty"
+	class={cn('py-6 text-center text-sm', className)}
+	{...restProps}
+/>

package/dist/ui/shadcn/command/command-empty.svelte.d.ts

@@ -0,0 +1,4 @@
+import { Command as CommandPrimitive } from 'bits-ui';
+declare const CommandEmpty: import("svelte").Component<CommandPrimitive.EmptyProps, {}, "ref">;
+type CommandEmpty = ReturnType<typeof CommandEmpty>;
+export default CommandEmpty;

package/dist/ui/shadcn/command/command-group.svelte

@@ -0,0 +1,33 @@
+<script lang="ts">
+	import { Command as CommandPrimitive, useId } from 'bits-ui';
+	import { cn } from '../../../shadcn.js';
+
+	let {
+		ref = $bindable(null),
+		class: className,
+		children,
+		heading,
+		value,
+		...restProps
+	}: CommandPrimitive.GroupProps & {
+		heading?: string;
+	} = $props();
+</script>
+
+<CommandPrimitive.Group
+	bind:ref
+	data-slot="command-group"
+	class={cn(
+		'text-foreground **:[[cmdk-group-heading]]:text-muted-foreground overflow-hidden p-1 **:[[cmdk-group-heading]]:px-2 **:[[cmdk-group-heading]]:py-1.5 **:[[cmdk-group-heading]]:text-xs **:[[cmdk-group-heading]]:font-medium',
+		className
+	)}
+	value={value ?? heading ?? `----${useId()}`}
+	{...restProps}
+>
+	{#if heading}
+		<CommandPrimitive.GroupHeading class="text-muted-foreground px-2 py-1.5 text-xs font-medium">
+			{heading}
+		</CommandPrimitive.GroupHeading>
+	{/if}
+	<CommandPrimitive.GroupItems {children} />
+</CommandPrimitive.Group>

package/dist/ui/shadcn/command/command-group.svelte.d.ts

@@ -0,0 +1,7 @@
+import { Command as CommandPrimitive } from 'bits-ui';
+type $$ComponentProps = CommandPrimitive.GroupProps & {
+    heading?: string;
+};
+declare const CommandGroup: import("svelte").Component<$$ComponentProps, {}, "ref">;
+type CommandGroup = ReturnType<typeof CommandGroup>;
+export default CommandGroup;

package/dist/ui/shadcn/command/command-input.svelte

@@ -0,0 +1,36 @@
+<script lang="ts">
+	import { Command as CommandPrimitive } from 'bits-ui';
+	import { cn } from '../../../shadcn.js';
+	import * as InputGroup from '../input-group/index.js';
+	import SearchIcon from '@lucide/svelte/icons/search';
+
+	let {
+		ref = $bindable(null),
+		class: className,
+		value = $bindable(''),
+		...restProps
+	}: CommandPrimitive.InputProps = $props();
+</script>
+
+<div data-slot="command-input-wrapper" class="p-1 pb-0">
+	<InputGroup.Root
+		class="bg-input/30 border-input/30 h-8! rounded-lg! shadow-none! *:data-[slot=input-group-addon]:pl-2!"
+	>
+		<CommandPrimitive.Input
+			{value}
+			data-slot="command-input"
+			class={cn(
+				'w-full text-sm outline-hidden disabled:cursor-not-allowed disabled:opacity-50',
+				className
+			)}
+			{...restProps}
+		>
+			{#snippet child({ props })}
+				<InputGroup.Input {...props} bind:value bind:ref />
+			{/snippet}
+		</CommandPrimitive.Input>
+		<InputGroup.Addon>
+			<SearchIcon class="size-4 shrink-0 opacity-50" />
+		</InputGroup.Addon>
+	</InputGroup.Root>
+</div>