feat: Add useBreakpoints utility

.changeset/ten-wasps-unite.md

@@ -0,0 +1,5 @@
+---
+"runed": minor
+---
+
+feat: Add `useBreakpoints` utility

packages/runed/src/lib/utilities/index.ts

@@ -19,11 +19,12 @@ export * from "./scroll-state/index.js";
 export * from "./state-history/index.js";
 export * from "./textarea-autosize/index.js";
 export * from "./throttled/index.js";
+export * from "./use-breakpoints/index.js";
 export * from "./use-debounce/index.js";
 export * from "./use-event-listener/index.js";
 export * from "./use-geolocation/index.js";
 export * from "./use-intersection-observer/index.js";
 export * from "./use-mutation-observer/index.js";
 export * from "./use-resize-observer/index.js";
 export * from "./use-throttle/index.js";
-export * from "./watch/index.js";
+export * from "./watch/index.js";

packages/runed/src/lib/utilities/use-breakpoints/index.ts

@@ -0,0 +1 @@
+export * from "./use-breakpoints.svelte";

packages/runed/src/lib/utilities/use-breakpoints/use-breakpoints.svelte.ts

@@ -0,0 +1,34 @@
+import { MediaQuery } from "svelte/reactivity";
+
+export type Breakpoints<K extends string> = Record<K, string>;
+
+/** Based on the default Tailwind CSS breakpoints https://tailwindcss.com/docs/responsive-design.
+ * A breakpoint is `true` when the width of the screen is greater than or equal to the breakpoint. */
+export const TAILWIND_BREAKPOINTS: Breakpoints<"sm" | "md" | "lg" | "xl" | "2xl"> = {
+	sm: "40rem",
+	md: "48rem",
+	lg: "64rem",
+	xl: "80rem",
+	"2xl": "96rem",
+};
+
+/** Dynamically creates media queries for the provided breakpoints allowing you to access them as `media.<name>`.
+ *
+ * @param breakpoints
+ * @returns
+ */
+export function useBreakpoints<K extends string = keyof typeof TAILWIND_BREAKPOINTS>(
+	breakpoints: Breakpoints<K> = TAILWIND_BREAKPOINTS as Breakpoints<K>
+): Record<K, boolean> {
+	const queries = {};
+
+	for (const [name, size] of Object.entries(breakpoints)) {
+		const query = new MediaQuery(`min-width: ${size}`);
+
+		Object.defineProperty(queries, name, {
+			get: () => query.current,
+		});
+	}
+
+	return queries as Record<K, boolean>;
+}

sites/docs/src/content/utilities/use-breakpoints.md

@@ -0,0 +1,54 @@
+---
+title: useBreakpoints
+description: React to changes in the viewport with custom defined breakpoints.
+category: Browser
+---
+
+<script>
+import Demo from '$lib/components/demos/use-breakpoints.svelte';
+</script>
+
+## Demo
+
+<Demo />
+
+## Overview
+
+`useBreakpoints` is a utility that allows you to react to changes in the viewport with custom
+defined breakpoints. By default, it uses the Tailwind CSS breakpoints.
+
+## Usage
+
+```svelte
+<script lang="ts">
+	import { useBreakpoints } from "runed";
+
+	const breakpoints = useBreakpoints();
+</script>
+
+{#if breakpoints.sm}
+	<p>Small screen</p>
+{/if}
+
+{#if breakpoints.md}
+	<p>Medium screen</p>
+{/if}
+```
+
+## Examples
+
+### Defining Custom Breakpoints
+
+```svelte
+<script lang="ts">
+	import { useBreakpoints } from "runed";
+
+	const breakpoints = useBreakpoints({
+		custom: "100rem"
+	});
+</script>
+
+{#if breakpoints.custom}
+	<p>Custom breakpoint</p>
+{/if}
+```

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

@@ -0,0 +1,34 @@
+<script lang="ts">
+	import { useBreakpoints } from "runed";
+	import { scale } from "svelte/transition";
+	import { DemoContainer } from "@svecodocs/kit";
+
+	const breakpoints = useBreakpoints();
+</script>
+
+<DemoContainer>
+	<div class="flex flex-col place-items-center justify-center gap-2 rounded-lg p-4">
+		{#if breakpoints["2xl"]}
+			{@render breakpoint({ name: "2xl" })}
+		{:else if breakpoints.xl}
+			{@render breakpoint({ name: "xl" })}
+		{:else if breakpoints.lg}
+			{@render breakpoint({ name: "lg" })}
+		{:else if breakpoints.md}
+			{@render breakpoint({ name: "md" })}
+		{:else if breakpoints.sm}
+			{@render breakpoint({ name: "sm" })}
+		{:else}
+			{@render breakpoint({ name: "-" })}
+		{/if}
+		<span class="text-muted-foreground text-center text-xs">
+			Resize the window to see the breakpoint change.
+		</span>
+	</div>
+</DemoContainer>
+
+{#snippet breakpoint({ name }: { name: string })}
+	<span in:scale={{ duration: 300 }} class="text-xl">
+		{name}
+	</span>
+{/snippet}