Feat: expose complete stateStore as a slot prop (#38)

* feat: expose stateStore as prop

* chore: add changeset

* chore: update docs

* chore: format docs

.changeset/wicked-cars-compare.md

@@ -0,0 +1,5 @@
+---
+'cmdk-sv': patch
+---
+
+feat: expose state slot prop for Command.Root

README.md

@@ -119,6 +119,15 @@ You can make the arrow keys wrap around the list (when you reach the end, it goe
 <Command.Root loop />
 ```
 
+This component also exposes two additional slot props for `state` (the current reactive value of the command state) and `stateStore` (the underlying writable state store). These can be used to implement more advanced use cases, such as debouncing the search updates with the `stateStore.updateState` method:
+
+```svelte
+<Command.Root {state} let:stateStore>
+	{@const handleUpdateState = debounce(stateStore.updateState, 200)}
+	<CustomCommandInput {handleUpdateState} />
+</Command.Root>
+```
+
 ### Dialog `[cmdk-dialog]` `[cmdk-overlay]`
 
 Props are forwarded to [Command](#command-cmdk-root). Composes Bits UI's Dialog component. The overlay is always rendered. See the [Bits Documentation](https://bits-ui.com/docs/) for more information. Can be controlled by binding to the `open` prop.

src/lib/cmdk/components/Command.svelte

@@ -83,16 +83,23 @@
 		action: rootAction,
 		attrs: rootAttrs
 	};
+
+	$: slotProps = {
+		root,
+		label: { attrs: labelAttrs },
+		stateStore,
+		state: $stateStore
+	};
 </script>
 
 {#if asChild}
-	<slot {root} label={{ attrs: labelAttrs }} />
+	<slot {...slotProps} />
 {:else}
 	<div use:rootAction {...rootAttrs} {...$$restProps}>
 		<!-- svelte-ignore a11y-label-has-associated-control applied in attrs -->
 		<label {...labelAttrs}>
 			{label ?? ''}
 		</label>
-		<slot {root} label={{ attrs: labelAttrs }} />
+		<slot {...slotProps} />
 	</div>
 {/if}