chore(next): runed MediaQuery -> svelte MediaQuery (#1569)

Author: ieedan

package.json

@@ -50,7 +50,7 @@
 		"prettier-plugin-svelte": "^3.2.7",
 		"prettier-plugin-tailwindcss": "^0.6.8",
 		"pretty-quick": "^4.0.0",
-		"svelte": "^5.0.0-next.264",
+		"svelte": "^5.15.0",
 		"svelte-eslint-parser": "^0.42.0",
 		"typescript": "^5.6.3",
 		"typescript-eslint": "^8.10.0"

pnpm-lock.yaml

@@ -68,9 +68,8 @@
 		"remark-code-import": "^1.2.0",
 		"remark-gfm": "^4.0.0",
 		"rimraf": "^4.4.1",
-		"runed": "^0.15.2",
 		"shiki": "^1.2.1",
-		"svelte": "^5.0.0",
+		"svelte": "^5.15.0",
 		"svelte-check": "^4.0.5",
 		"svelte-local-storage-store": "^0.6.4",
 		"svelte-persisted-store": "^0.11.0",

sites/docs/package.json

@@ -1,5 +1,5 @@
 <script lang="ts">
-	import { MediaQuery } from "runed";
+	import { MediaQuery } from "svelte/reactivity";
 	import * as Breadcrumb from "$lib/registry/default/ui/breadcrumb/index.js";
 	import * as Drawer from "$lib/registry/default/ui/drawer/index.js";
 	import * as DropdownMenu from "$lib/registry/default/ui/dropdown-menu/index.js";
@@ -30,7 +30,7 @@
 		<Breadcrumb.Separator />
 		{#if items.length > ITEMS_TO_DISPLAY}
 			<Breadcrumb.Item>
-				{#if isDesktop.matches}
+				{#if isDesktop.current}
 					<DropdownMenu.Root bind:open>
 						<DropdownMenu.Trigger
 							class="flex items-center gap-1"

sites/docs/src/lib/registry/default/example/breadcrumb-responsive.svelte

@@ -1,5 +1,5 @@
 <script lang="ts">
-	import { MediaQuery } from "runed";
+	import { MediaQuery } from "svelte/reactivity";
 	import * as Dialog from "$lib/registry/default/ui/dialog/index.js";
 	import * as Drawer from "$lib/registry/default/ui/drawer/index.js";
 	import { Input } from "$lib/registry/default/ui/input/index.js";
@@ -10,7 +10,7 @@
 	const isDesktop = new MediaQuery("(min-width: 768px)");
 </script>
 
-{#if isDesktop.matches}
+{#if isDesktop.current}
 	<Dialog.Root bind:open>
 		<Dialog.Trigger class={buttonVariants({ variant: "outline" })}>Edit Profile</Dialog.Trigger>
 		<Dialog.Content class="sm:max-w-[425px]">

sites/docs/src/lib/registry/default/example/drawer-dialog.svelte

@@ -1,15 +1,15 @@
 <script lang="ts">
 	import ChevronLeft from "lucide-svelte/icons/chevron-left";
 	import ChevronRight from "lucide-svelte/icons/chevron-right";
-	import { MediaQuery } from "runed";
+	import { MediaQuery } from "svelte/reactivity";
 	import * as Pagination from "$lib/registry/default/ui/pagination/index.js";
 
 	const isDesktop = new MediaQuery("(min-width: 768px)");
 
 	const count = 20;
 
-	const perPage = $derived(isDesktop.matches ? 3 : 8);
-	const siblingCount = $derived(isDesktop.matches ? 1 : 0);
+	const perPage = $derived(isDesktop.current ? 3 : 8);
+	const siblingCount = $derived(isDesktop.current ? 1 : 0);
 </script>
 
 <Pagination.Root {count} {perPage} {siblingCount}>

sites/docs/src/lib/registry/default/example/pagination-demo.svelte

@@ -1,5 +1,5 @@
 <script lang="ts">
-	import { MediaQuery } from "runed";
+	import { MediaQuery } from "svelte/reactivity";
 	import * as Breadcrumb from "$lib/registry/new-york/ui/breadcrumb/index.js";
 	import * as Drawer from "$lib/registry/new-york/ui/drawer/index.js";
 	import * as DropdownMenu from "$lib/registry/new-york/ui/dropdown-menu/index.js";
@@ -30,7 +30,7 @@
 		<Breadcrumb.Separator />
 		{#if items.length > ITEMS_TO_DISPLAY}
 			<Breadcrumb.Item>
-				{#if isDesktop.matches}
+				{#if isDesktop.current}
 					<DropdownMenu.Root bind:open>
 						<DropdownMenu.Trigger
 							class="flex items-center gap-1"

sites/docs/src/lib/registry/new-york/example/breadcrumb-responsive.svelte

@@ -1,5 +1,5 @@
 <script lang="ts">
-	import { MediaQuery } from "runed";
+	import { MediaQuery } from "svelte/reactivity";
 	import * as Dialog from "$lib/registry/new-york/ui/dialog/index.js";
 	import * as Drawer from "$lib/registry/new-york/ui/drawer/index.js";
 	import { Input } from "$lib/registry/new-york/ui/input/index.js";
@@ -10,7 +10,7 @@
 	const isDesktop = new MediaQuery("(min-width: 768px)");
 </script>
 
-{#if isDesktop.matches}
+{#if isDesktop.current}
 	<Dialog.Root bind:open>
 		<Dialog.Trigger class={buttonVariants({ variant: "outline" })}>Edit Profile</Dialog.Trigger>
 		<Dialog.Content class="sm:max-w-[425px]">

sites/docs/src/lib/registry/new-york/example/drawer-dialog.svelte

@@ -1,12 +1,12 @@
 <script lang="ts">
-	import { MediaQuery } from "runed";
+	import { MediaQuery } from "svelte/reactivity";
 	import * as Pagination from "$lib/registry/new-york/ui/pagination/index.js";
 
 	const isDesktop = new MediaQuery("(min-width: 768px)");
 
 	const count = 20;
-	const perPage = $derived(isDesktop.matches ? 3 : 8);
-	const siblingCount = $derived(isDesktop.matches ? 1 : 0);
+	const perPage = $derived(isDesktop.current ? 3 : 8);
+	const siblingCount = $derived(isDesktop.current ? 1 : 0);
 </script>
 
 <Pagination.Root {count} {perPage} {siblingCount}>