add docs page

sites/docs/content/functions/use-click-outside.md

@@ -0,0 +1,55 @@
+---
+title: useClickOutside
+description:
+  A function that calls a callback when a click event is triggered outside of a given container
+  element.
+category: Elements
+---
+
+<script>
+import Demo from '$lib/components/demos/use-click-outside.svelte';
+</script>
+
+## Demo
+
+<Demo />
+
+## Usage
+
+```svelte
+<script lang="ts">
+	import { box, useClickOutside } from "runed";
+
+	const container = box<HTMLDivElement | null>(null);
+
+	useClickOutside(container, () => {
+		console.log("clicked outside of container");
+	});
+</script>
+
+<main>
+	<div bind:this={container.value}>Container</div>
+	<button>Click Me</button>
+</main>
+```
+
+You can also programmatically pause and resume `useClickOutside` using the `start` and `stop`
+functiosn returned by `useClickOutside`.
+
+```svelte
+<script lang="ts">
+	import { box, useClickOutside } from "runed";
+
+	const container = box<HTMLDivElement | null>(null);
+
+	const outsideClick = useClickOutside(container, () => {
+		console.log("clicked outside of container");
+	});
+</script>
+
+<main>
+	<button onclick={outsideClick.stop}>Stop listening for outside clicks</button>
+	<button onclick={outsideClick.start}>Start listening again</button>
+	<div bind:this={container.value}></div>
+</main>
+```

sites/docs/src/lib/components/demos/use-click-outside.svelte

@@ -0,0 +1,35 @@
+<script lang="ts">
+	import { box, useClickOutside } from "runed";
+
+	let containerText = "Has not clicked yet";
+
+	const container = box<HTMLDivElement | null>(null);
+
+	useClickOutside(container, () => {
+		containerText = "Has clicked outside of container";
+	});
+</script>
+
+<main>
+	<div bind:this={container.value}>
+		<p>{containerText}</p>
+
+		<button onclick={() => (containerText = "Has clicked within container")}>
+			Button within container
+		</button>
+	</div>
+	<button>Button outside container</button>
+</main>
+
+<style>
+	div {
+		padding: 40px;
+		border: 1px solid;
+		margin-bottom: 16px;
+	}
+
+	button {
+		border: 1px solid;
+		padding-inline: 8px;
+	}
+</style>