fix(next): misplaced className in cn functions (#1585)

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.15.0",
+		"svelte": "^5.16.0",
 		"svelte-eslint-parser": "^0.42.0",
 		"typescript": "^5.6.3",
 		"typescript-eslint": "^8.10.0"

sites/docs/package.json

@@ -30,7 +30,7 @@
 		"@prettier/sync": "0.3.0",
 		"@sveltejs/adapter-cloudflare": "4.6.1",
 		"@sveltejs/enhanced-img": "^0.3.9",
-		"@sveltejs/kit": "^2.5.28",
+		"@sveltejs/kit": "^2.12.0",
 		"@sveltejs/vite-plugin-svelte": "^4.0.0",
 		"@tanstack/table-core": "^8.20.5",
 		"@types/d3-scale": "^4.0.8",
@@ -69,7 +69,7 @@
 		"remark-gfm": "^4.0.0",
 		"rimraf": "^4.4.1",
 		"shiki": "^1.2.1",
-		"svelte": "^5.15.0",
+		"svelte": "^5.16.0",
 		"svelte-check": "^4.0.5",
 		"svelte-local-storage-store": "^0.6.4",
 		"svelte-persisted-store": "^0.11.0",

sites/docs/src/lib/components/docs/docs-pager.svelte

@@ -2,7 +2,7 @@
 	import ChevronLeft from "lucide-svelte/icons/chevron-left";
 	import ChevronRight from "lucide-svelte/icons/chevron-right";
 	import type { NavItem, NavItemWithChildren } from "$lib/types/nav.js";
-	import { page } from "$app/stores";
+	import { page } from "$app/state";
 	import { Button } from "$lib/registry/new-york/ui/button/index.js";
 	import { docsConfig } from "$lib/config/docs.js";
 
@@ -32,7 +32,7 @@
 			.filter((link) => !link?.disabled);
 	}
 
-	const pager = $derived(getPagerForDoc($page.params.slug));
+	const pager = $derived(getPagerForDoc(page.params.slug));
 </script>
 
 <div class="flex flex-row items-center justify-between">

sites/docs/src/lib/components/docs/examples-nav/example-code-link.svelte

@@ -1,10 +1,10 @@
 <script lang="ts">
 	import ArrowRight from "lucide-svelte/icons/arrow-right";
-	import { page } from "$app/stores";
+	import { page } from "$app/state";
 	import { examples } from "$lib/config/docs.js";
 
 	const example = $derived(
-		examples.find((example) => $page.url.pathname.startsWith(example.href))
+		examples.find((example) => page.url.pathname.startsWith(example.href))
 	);
 </script>
 

sites/docs/src/lib/components/docs/examples-nav/examples-nav.svelte

@@ -2,7 +2,7 @@
 	import { cubicInOut } from "svelte/easing";
 	import { crossfade } from "svelte/transition";
 	import ExampleCodeLink from "./example-code-link.svelte";
-	import { page } from "$app/stores";
+	import { page } from "$app/state";
 	import { examples } from "$lib/config/docs.js";
 	import { type PrimitiveElementAttributes, cn } from "$lib/utils.js";
 	import { ScrollArea } from "$lib/registry/new-york/ui/scroll-area/index.js";
@@ -24,8 +24,8 @@
 			>
 				{#each examples as example, index (index)}
 					{@const isActive =
-						$page.url.pathname.startsWith(example.href) ||
-						($page.url.pathname === "/" && index === 0)}
+						page.url.pathname.startsWith(example.href) ||
+						(page.url.pathname === "/" && index === 0)}
 
 					<a
 						href={example.href}

sites/docs/src/lib/components/docs/metadata.svelte

@@ -1,10 +1,10 @@
 <script lang="ts">
 	import { dev } from "$app/environment";
-	import { page } from "$app/stores";
+	import { page } from "$app/state";
 	import { siteConfig } from "$lib/config/site.js";
 
 	const title = $derived(
-		$page.data?.title ? `${$page.data.title} - ${siteConfig.name}` : siteConfig.name
+		page.data?.title ? `${page.data.title} - ${siteConfig.name}` : siteConfig.name
 	);
 </script>
 
@@ -22,7 +22,7 @@
 	<meta name="twitter:creator" content="huntabyte" />
 	<meta property="og:title" content={title} />
 	<meta property="og:type" content="article" />
-	<meta property="og:url" content={siteConfig.url + $page.url.pathname} />
+	<meta property="og:url" content={siteConfig.url + page.url.pathname} />
 	<meta property="og:image" content={siteConfig.ogImage} />
 	<meta property="og:image:alt" content={siteConfig.name} />
 	<meta property="og:image:width" content="1200" />

sites/docs/src/lib/components/docs/nav/docs-sidebar-nav-items.svelte

@@ -1,6 +1,6 @@
 <script lang="ts">
 	import type { SidebarNavItem } from "$lib/types/nav.js";
-	import { page } from "$app/stores";
+	import { page } from "$app/state";
 	import { cn } from "$lib/utils.js";
 
 	let { items }: { items: SidebarNavItem[] } = $props();
@@ -15,7 +15,7 @@
 					class={cn(
 						"group flex w-full items-center rounded-md border border-transparent px-2 py-1 hover:underline",
 						item.disabled && "cursor-not-allowed opacity-60",
-						$page.url.pathname === item.href
+						page.url.pathname === item.href
 							? "text-foreground font-medium"
 							: "text-muted-foreground"
 					)}

sites/docs/src/lib/components/docs/nav/main-nav.svelte

@@ -1,6 +1,6 @@
 <script lang="ts">
 	import * as Icon from "../icons/index.js";
-	import { page } from "$app/stores";
+	import { page } from "$app/state";
 	import { siteConfig } from "$lib/config/site.js";
 	import { cn } from "$lib/utils.js";
 </script>
@@ -17,7 +17,7 @@
 			href="/docs"
 			class={cn(
 				"hover:text-foreground/80 transition-colors",
-				$page.url.pathname === "/docs" ? "text-foreground" : "text-foreground/60"
+				page.url.pathname === "/docs" ? "text-foreground" : "text-foreground/60"
 			)}
 		>
 			Docs
@@ -26,7 +26,7 @@
 			href="/docs/components"
 			class={cn(
 				"hover:text-foreground/80 transition-colors",
-				$page.url.pathname.startsWith("/docs/components")
+				page.url.pathname.startsWith("/docs/components")
 					? "text-foreground"
 					: "text-foreground/60"
 			)}
@@ -37,7 +37,7 @@
 			href="/blocks"
 			class={cn(
 				"hover:text-foreground/80 transition-colors",
-				$page.url.pathname.startsWith("/blocks") ? "text-foreground" : "text-foreground/60"
+				page.url.pathname.startsWith("/blocks") ? "text-foreground" : "text-foreground/60"
 			)}
 		>
 			Blocks
@@ -46,7 +46,7 @@
 			href="/themes"
 			class={cn(
 				"hover:text-foreground/80 transition-colors",
-				$page.url.pathname.startsWith("/themes") ? "text-foreground" : "text-foreground/60"
+				page.url.pathname.startsWith("/themes") ? "text-foreground" : "text-foreground/60"
 			)}
 		>
 			Themes
@@ -55,9 +55,7 @@
 			href="/examples"
 			class={cn(
 				"hover:text-foreground/80 transition-colors",
-				$page.url.pathname.startsWith("/examples")
-					? "text-foreground"
-					: "text-foreground/60"
+				page.url.pathname.startsWith("/examples") ? "text-foreground" : "text-foreground/60"
 			)}
 		>
 			Examples
@@ -67,7 +65,7 @@
 			href="/colors"
 			class={cn(
 				"hover:text-foreground/80 transition-colors",
-				$page.url.pathname.startsWith("/colors") ? "text-foreground" : "text-foreground/60"
+				page.url.pathname.startsWith("/colors") ? "text-foreground" : "text-foreground/60"
 			)}
 		>
 			Colors

sites/docs/src/lib/components/docs/nav/mobile-link.svelte

@@ -1,5 +1,5 @@
 <script lang="ts">
-	import { page } from "$app/stores";
+	import { page } from "$app/state";
 	import { type PrimitiveAnchorAttributes, cn } from "$lib/utils.js";
 
 	let {
@@ -17,7 +17,7 @@
 
 <a
 	{href}
-	class={cn($page.url.pathname === href ? "text-foreground" : "text-foreground/60", className)}
+	class={cn(page.url.pathname === href ? "text-foreground" : "text-foreground/60", className)}
 	onclick={handleClick}
 	{...restProps}
 >

sites/docs/src/lib/registry/default/example/checkbox-form-multiple.svelte

@@ -41,11 +41,11 @@
 	import { zodClient } from "sveltekit-superforms/adapters";
 	import { toast } from "svelte-sonner";
 	import { browser } from "$app/environment";
-	import { page } from "$app/stores";
+	import { page } from "$app/state";
 	import * as Form from "$lib/registry/default/ui/form/index.js";
 	import { Checkbox } from "$lib/registry/default/ui/checkbox/index.js";
 
-	let { form: data = $page.data.checkboxMultiple }: { form: SuperValidated<Infer<FormSchema>> } =
+	let { form: data = page.data.checkboxMultiple }: { form: SuperValidated<Infer<FormSchema>> } =
 		$props();
 
 	const form = superForm(data, {

sites/docs/src/lib/registry/default/example/combobox-form.svelte

@@ -33,13 +33,13 @@
 	import { toast } from "svelte-sonner";
 	import { useId } from "bits-ui";
 	import { browser } from "$app/environment";
-	import { page } from "$app/stores";
+	import { page } from "$app/state";
 	import * as Form from "$lib/registry/default/ui/form/index.js";
 	import * as Popover from "$lib/registry/default/ui/popover/index.js";
 	import * as Command from "$lib/registry/default/ui/command/index.js";
 	import { cn } from "$lib/utils.js";
 	import { buttonVariants } from "$lib/registry/default/ui/button/index.js";
-	let data: SuperValidated<Infer<FormSchema>> = $page.data.combobox;
+	let data: SuperValidated<Infer<FormSchema>> = page.data.combobox;
 	export { data as form };
 
 	const form = superForm(data, {

sites/docs/src/lib/registry/default/example/date-picker-form.svelte

@@ -23,13 +23,13 @@
 	import { zodClient } from "sveltekit-superforms/adapters";
 	import { toast } from "svelte-sonner";
 	import { browser } from "$app/environment";
-	import { page } from "$app/stores";
+	import { page } from "$app/state";
 	import { cn } from "$lib/utils.js";
 	import { Button, buttonVariants } from "$lib/registry/default/ui/button/index.js";
 	import { Calendar } from "$lib/registry/default/ui/calendar/index.js";
 	import * as Popover from "$lib/registry/default/ui/popover/index.js";
 	import * as Form from "$lib/registry/default/ui/form/index.js";
-	let data: SuperValidated<Infer<FormSchema>> = $page.data.datePicker;
+	let data: SuperValidated<Infer<FormSchema>> = page.data.datePicker;
 	export { data as form };
 
 	const form = superForm(data, {

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

@@ -14,10 +14,9 @@
 	import { browser } from "$app/environment";
 	import * as Form from "$lib/registry/default/ui/form/index.js";
 	import { Input } from "$lib/registry/default/ui/input/index.js";
-	import { page } from "$app/stores";
+	import { page } from "$app/state";
 
-	let { form: data = $page.data.username }: { form: SuperValidated<Infer<FormSchema>> } =
-		$props();
+	let { form: data = page.data.username }: { form: SuperValidated<Infer<FormSchema>> } = $props();
 
 	const form = superForm(data, {
 		validators: zodClient(formSchema),

sites/docs/src/lib/registry/default/example/input-otp-form.svelte

@@ -15,10 +15,9 @@
 	import { browser } from "$app/environment";
 	import * as InputOTP from "$lib/registry/default/ui/input-otp/index.js";
 	import * as Form from "$lib/registry/default/ui/form/index.js";
-	import { page } from "$app/stores";
+	import { page } from "$app/state";
 
-	let { form: data = $page.data.inputOtp }: { form: SuperValidated<Infer<FormSchema>> } =
-		$props();
+	let { form: data = page.data.inputOtp }: { form: SuperValidated<Infer<FormSchema>> } = $props();
 
 	const form = superForm(data, {
 		validators: zodClient(formSchema),

sites/docs/src/lib/registry/default/example/radio-group-form.svelte

@@ -14,11 +14,11 @@
 	import { zodClient } from "sveltekit-superforms/adapters";
 	import { toast } from "svelte-sonner";
 	import { browser } from "$app/environment";
-	import { page } from "$app/stores";
+	import { page } from "$app/state";
 	import * as Form from "$lib/registry/default/ui/form/index.js";
 	import * as RadioGroup from "$lib/registry/default/ui/radio-group/index.js";
 
-	let { form: data = $page.data.radioGroup }: { form: SuperValidated<Infer<FormSchema>> } =
+	let { form: data = page.data.radioGroup }: { form: SuperValidated<Infer<FormSchema>> } =
 		$props();
 
 	const form = superForm(data, {

sites/docs/src/lib/registry/default/example/select-form.svelte

@@ -13,11 +13,11 @@
 	import { zodClient } from "sveltekit-superforms/adapters";
 	import { toast } from "svelte-sonner";
 	import { browser } from "$app/environment";
-	import { page } from "$app/stores";
+	import { page } from "$app/state";
 	import * as Form from "$lib/registry/default/ui/form/index.js";
 	import * as Select from "$lib/registry/default/ui/select/index.js";
 
-	let { form: data = $page.data.select }: { form: SuperValidated<Infer<FormSchema>> } = $props();
+	let { form: data = page.data.select }: { form: SuperValidated<Infer<FormSchema>> } = $props();
 
 	const form = superForm(data, {
 		validators: zodClient(formSchema),

sites/docs/src/lib/registry/default/example/switch-form.svelte

@@ -12,11 +12,11 @@
 	import { zodClient } from "sveltekit-superforms/adapters";
 	import { toast } from "svelte-sonner";
 	import { browser } from "$app/environment";
-	import { page } from "$app/stores";
+	import { page } from "$app/state";
 	import * as Form from "$lib/registry/default/ui/form/index.js";
 	import { Switch } from "$lib/registry/default/ui/switch/index.js";
 
-	let { form: data = $page.data.switch }: { form: SuperValidated<Infer<FormSchema>> } = $props();
+	let { form: data = page.data.switch }: { form: SuperValidated<Infer<FormSchema>> } = $props();
 
 	const form = superForm(data, {
 		validators: zodClient(formSchema),

sites/docs/src/lib/registry/default/example/textarea-form.svelte

@@ -14,12 +14,11 @@
 	import { zodClient } from "sveltekit-superforms/adapters";
 	import { toast } from "svelte-sonner";
 	import { browser } from "$app/environment";
-	import { page } from "$app/stores";
+	import { page } from "$app/state";
 	import * as Form from "$lib/registry/default/ui/form/index.js";
 	import { Textarea } from "$lib/registry/default/ui/textarea/index.js";
 
-	let { form: data = $page.data.textarea }: { form: SuperValidated<Infer<FormSchema>> } =
-		$props();
+	let { form: data = page.data.textarea }: { form: SuperValidated<Infer<FormSchema>> } = $props();
 
 	const form = superForm(data, {
 		validators: zodClient(formSchema),

sites/docs/src/lib/registry/default/ui/badge/badge.svelte

@@ -43,7 +43,7 @@
 	this={href ? "a" : "span"}
 	bind:this={ref}
 	{href}
-	class={cn(badgeVariants({ variant, className }))}
+	class={cn(badgeVariants({ variant }), className)}
 	{...restProps}
 >
 	{@render children?.()}

sites/docs/src/lib/registry/default/ui/button/button.svelte

@@ -56,7 +56,7 @@
 {#if href}
 	<a
 		bind:this={ref}
-		class={cn(buttonVariants({ variant, size, className }))}
+		class={cn(buttonVariants({ variant, size }), className)}
 		{href}
 		{...restProps}
 	>
@@ -65,7 +65,7 @@
 {:else}
 	<button
 		bind:this={ref}
-		class={cn(buttonVariants({ variant, size, className }))}
+		class={cn(buttonVariants({ variant, size }), className)}
 		{type}
 		{...restProps}
 	>

sites/docs/src/lib/registry/default/ui/toggle/toggle.svelte

@@ -46,6 +46,6 @@
 <TogglePrimitive.Root
 	bind:ref
 	bind:pressed
-	class={cn(toggleVariants({ variant, size, className }))}
+	class={cn(toggleVariants({ variant, size }), className)}
 	{...restProps}
 />

sites/docs/src/lib/registry/new-york/example/checkbox-form-multiple.svelte

@@ -41,11 +41,11 @@
 	import { zodClient } from "sveltekit-superforms/adapters";
 	import { toast } from "svelte-sonner";
 	import { browser } from "$app/environment";
-	import { page } from "$app/stores";
+	import { page } from "$app/state";
 	import * as Form from "$lib/registry/new-york/ui/form/index.js";
 	import { Checkbox } from "$lib/registry/new-york/ui/checkbox/index.js";
 
-	let { form: data = $page.data.checkboxMultiple }: { form: SuperValidated<Infer<FormSchema>> } =
+	let { form: data = page.data.checkboxMultiple }: { form: SuperValidated<Infer<FormSchema>> } =
 		$props();
 
 	const form = superForm(data, {

sites/docs/src/lib/registry/new-york/example/combobox-form.svelte

@@ -33,15 +33,14 @@
 	import { toast } from "svelte-sonner";
 	import { useId } from "bits-ui";
 	import { browser } from "$app/environment";
-	import { page } from "$app/stores";
+	import { page } from "$app/state";
 	import * as Form from "$lib/registry/new-york/ui/form/index.js";
 	import * as Popover from "$lib/registry/new-york/ui/popover/index.js";
 	import * as Command from "$lib/registry/new-york/ui/command/index.js";
 	import { cn } from "$lib/utils.js";
 	import { buttonVariants } from "$lib/registry/new-york/ui/button/index.js";
 
-	let { form: data = $page.data.combobox }: { form: SuperValidated<Infer<FormSchema>> } =
-		$props();
+	let { form: data = page.data.combobox }: { form: SuperValidated<Infer<FormSchema>> } = $props();
 
 	const form = superForm(data, {
 		validators: zodClient(formSchema),