docs: showcase debounce reactive duration (#110)

package.json

@@ -43,7 +43,7 @@
 	"license": "MIT",
 	"devDependencies": {
 		"@changesets/cli": "^2.27.1",
-		"@huntabyte/eslint-config": "^0.3.1",
+		"@huntabyte/eslint-config": "^0.3.2",
 		"@svitejs/changesets-changelog-github-compact": "^1.1.0",
 		"eslint": "^9.1.1",
 		"eslint-plugin-svelte": "2.38.0",

sites/docs/content/utilities/use-debounce.md

@@ -21,23 +21,28 @@ category: Utilities
 	let count = $state(0);
 	let logged = $state("");
 	let isFirstTime = $state(true);
-
-	const logCount = useDebounce(() => {
-		if (isFirstTime) {
-			isFirstTime = false;
-			logged = `You pressed the button ${count} times!`;
-		} else {
-			logged = `You pressed the button ${count} times since last time!`;
-		}
-		count = 0;
-	}, 1000);
+	let debounceDuration = $state(1000);
+
+	const logCount = useDebounce(
+		() => {
+			if (isFirstTime) {
+				isFirstTime = false;
+				logged = `You pressed the button ${count} times!`;
+			} else {
+				logged = `You pressed the button ${count} times since last time!`;
+			}
+			count = 0;
+		},
+		() => debounceDuration
+	);
 
 	function ding() {
 		count++;
 		logCount();
 	}
 </script>
 
+<input type="number" bind:value={debounceDuration} />
 <button onclick={ding}>DING DING DING</button>
 <button onclick={logCount.cancel} disabled={!logCount.pending}>Cancel message</button>
 <p>{logged || "Press the button!"}</p>

sites/docs/package.json

@@ -48,7 +48,7 @@
 		"rehype-pretty-code": "^0.13.0",
 		"remark-gfm": "^4.0.0",
 		"shiki": "^1.1.3",
-		"svelte": "^5.0.0-next.130",
+		"svelte": "5.0.0-next.169",
 		"svelte-check": "^3.6.4",
 		"tailwind-merge": "^2.2.1",
 		"tailwind-variants": "^0.2.0",

sites/docs/src/lib/components/demos/pressed-keys.svelte

@@ -41,7 +41,8 @@
 			</div>
 		{/if}
 		{#each toPress as key}
-			<!-- svelte-ignore a11y_no_static_element_interactions a11y_click_events_have_key_events -->
+			<!-- svelte-ignore a11y_click_events_have_key_events -->
+			<!-- svelte-ignore a11y_no_static_element_interactions -->
 			<div
 				class="grid size-12 place-items-center rounded-lg border transition-all duration-200
 				{allPressed ? 'border-brand' : 'border-border'} bg-background"

sites/docs/src/lib/components/demos/use-debounce.svelte

@@ -1,34 +1,44 @@
 <script lang="ts">
 	import { useDebounce } from "runed";
+	import Input from "../ui/input/input.svelte";
+	import Label from "../ui/label/label.svelte";
 	import DemoContainer from "$lib/components/demo-container.svelte";
 	import { Button } from "$lib/components/ui/button";
 
 	let count = $state(0);
 	let logged = $state("");
 	let isFirstTime = $state(true);
+	let durationMs = $state(1000);
 
-	const logCount = useDebounce(() => {
-		if (isFirstTime) {
-			isFirstTime = false;
-			logged = `You pressed the button ${count} times!`;
-		} else {
-			logged = `You pressed the button ${count} times since last time!`;
-		}
-		count = 0;
-	}, 1000);
+	const logCount = useDebounce(
+		() => {
+			if (isFirstTime) {
+				isFirstTime = false;
+				logged = `You pressed the button ${count} times!`;
+			} else {
+				logged = `You pressed the button ${count} times since last time!`;
+			}
+			count = 0;
+		},
+		() => durationMs
+	);
 
 	function ding() {
 		count++;
 		logCount();
 	}
 </script>
 
-<DemoContainer>
+<DemoContainer class="flex flex-col gap-4">
+	<div class="flex flex-col gap-1.5">
+		<Label for="duration">Debounce duration (ms)</Label>
+		<Input id="duration" type="number" bind:value={durationMs} />
+	</div>
 	<div class="flex items-center gap-4">
 		<Button variant="brand" size="sm" onclick={ding}>DING DING DING</Button>
 		<Button variant="subtle" size="sm" onclick={logCount.cancel} disabled={!logCount.pending}
 			>Cancel message</Button
 		>
 	</div>
-	<p class="mt-4">{logged || "Press the button!"}</p>
+	<p class="mt-2">{logged || "Press the button!"}</p>
 </DemoContainer>

sites/docs/tailwind.config.js

@@ -40,7 +40,6 @@ const config = {
 					DEFAULT: "hsl(var(--destructive) / <alpha-value>)",
 					foreground: "hsl(var(--destructive-foreground) / <alpha-value>)",
 				},
-				success: "hsl(var(--success) / <alpha-value>)",
 				muted: {
 					DEFAULT: "hsl(var(--muted) / <alpha-value>)",
 					foreground: "hsl(var(--muted-foreground) / <alpha-value>)",