chore: update examples and docs with scroll area (#858)

apps/www/src/lib/components/docs/examples-nav/examples-nav.svelte

@@ -5,6 +5,7 @@
 	import { cubicInOut } from "svelte/easing";
 	import { crossfade } from "svelte/transition";
 	import ExampleCodeLink from "./example-code-link.svelte";
+	import { ScrollArea } from "@/registry/new-york/ui/scroll-area";
 
 	let className: string | undefined | null = undefined;
 	export { className as class };
@@ -17,44 +18,46 @@
 
 <div class="relative">
 	<div class="lg:max-w-none">
-		<!-- TODO: replace with srollarea component when it's ready -->
-		<div
-			class={cn("mb-4 flex items-center overflow-y-auto pb-3 md:pb-0", className)}
-			{...$$restProps}
-		>
-			{#each examples as example, index (index)}
-				{@const isActive =
-					$page.url.pathname.startsWith(example.href) ||
-					($page.url.pathname === "/" && index === 0)}
+		<ScrollArea orientation="both" scrollbarXClasses="invisible">
+			<div
+				class={cn("mb-4 flex items-center overflow-y-auto pb-3 md:pb-0", className)}
+				{...$$restProps}
+			>
+				{#each examples as example, index (index)}
+					{@const isActive =
+						$page.url.pathname.startsWith(example.href) ||
+						($page.url.pathname === "/" && index === 0)}
 
-				<a
-					href={example.href}
-					data-sveltekit-noscroll
-					class={cn(
-						"relative flex h-7 items-center justify-center rounded-full px-4 text-center text-sm transition-colors hover:text-primary",
-						isActive ? "font-medium text-primary" : "text-muted-foreground"
-					)}
-				>
-					{#if isActive}
-						<div
-							class="absolute inset-0 rounded-full bg-muted"
-							in:send={{ key: "activetab" }}
-							out:receive={{ key: "activetab" }}
-						/>
-					{/if}
-					<div class="relative">
-						{example.name}{" "}
-						{#if example.label}
-							<span
-								class="ml-2 rounded-md bg-[#adfa1d] px-1.5 py-0.5 text-xs font-medium leading-none text-[#000000] no-underline group-hover:no-underline"
-							>
-								{example.label}
-							</span>
+					<a
+						href={example.href}
+						data-sveltekit-noscroll
+						class={cn(
+							"relative flex h-7 items-center justify-center rounded-full px-4 text-center text-sm transition-colors hover:text-primary",
+							isActive ? "font-medium text-primary" : "text-muted-foreground"
+						)}
+					>
+						{#if isActive}
+							<div
+								class="absolute inset-0 rounded-full bg-muted"
+								in:send={{ key: "activetab" }}
+								out:receive={{ key: "activetab" }}
+							/>
 						{/if}
-					</div>
-				</a>
-			{/each}
-		</div>
+						<div class="relative">
+							{example.name}{" "}
+							{#if example.label}
+								<span
+									class="ml-2 rounded-md bg-[#adfa1d] px-1.5 py-0.5 text-xs font-medium leading-none text-[#000000] no-underline group-hover:no-underline"
+								>
+									{example.label}
+								</span>
+							{/if}
+						</div>
+					</a>
+				{/each}
+			</div>
+		</ScrollArea>
 	</div>
+
 	<ExampleCodeLink />
 </div>

apps/www/src/lib/components/docs/nav/mobile-nav.svelte

@@ -1,6 +1,7 @@
 <script lang="ts">
 	import * as Sheet from "@/registry/new-york/ui/sheet";
 	import { Button } from "@/registry/new-york/ui/button";
+	import { ScrollArea } from "@/registry/new-york/ui/scroll-area";
 	import { docsConfig } from "$lib/config/docs";
 	import { siteConfig } from "$lib/config/site";
 	import { Icons } from "../icons";
@@ -25,7 +26,7 @@
 			<Icons.logo class="mr-2 h-4 w-4" />
 			<span class="font-bold">{siteConfig.name}</span>
 		</MobileLink>
-		<div class="my-4 h-[calc(100vh-8rem)] overflow-auto pb-10 pl-6">
+		<ScrollArea orientation="both" class="my-4 h-[calc(100vh-8rem)] pb-10 pl-6">
 			<div class="flex flex-col space-y-3">
 				{#each docsConfig.mainNav as navItem, index (navItem + index.toString())}
 					{#if navItem.href}
@@ -58,6 +59,6 @@
 					</div>
 				{/each}
 			</div>
-		</div>
+		</ScrollArea>
 	</Sheet.Content>
 </Sheet.Root>

apps/www/src/lib/registry/default/ui/scroll-area/scroll-area.svelte

@@ -5,11 +5,15 @@
 
 	type $$Props = ScrollAreaPrimitive.Props & {
 		orientation?: "vertical" | "horizontal" | "both";
+		scrollbarXClasses?: string;
+		scrollbarYClasses?: string;
 	};
 
 	let className: $$Props["class"] = undefined;
 	export { className as class };
 	export let orientation = "vertical";
+	export let scrollbarXClasses: string = "";
+	export let scrollbarYClasses: string = "";
 </script>
 
 <ScrollAreaPrimitive.Root {...$$restProps} class={cn("relative overflow-hidden", className)}>
@@ -19,10 +23,10 @@
 		</ScrollAreaPrimitive.Content>
 	</ScrollAreaPrimitive.Viewport>
 	{#if orientation === "vertical" || orientation === "both"}
-		<Scrollbar orientation="vertical" />
+		<Scrollbar orientation="vertical" class={scrollbarYClasses} />
 	{/if}
 	{#if orientation === "horizontal" || orientation === "both"}
-		<Scrollbar orientation="horizontal" />
+		<Scrollbar orientation="horizontal" class={scrollbarXClasses} />
 	{/if}
 	<ScrollAreaPrimitive.Corner />
 </ScrollAreaPrimitive.Root>

apps/www/src/lib/registry/new-york/ui/scroll-area/scroll-area.svelte

@@ -5,11 +5,15 @@
 
 	type $$Props = ScrollAreaPrimitive.Props & {
 		orientation?: "vertical" | "horizontal" | "both";
+		scrollbarXClasses?: string;
+		scrollbarYClasses?: string;
 	};
 
 	let className: $$Props["class"] = undefined;
 	export { className as class };
 	export let orientation = "vertical";
+	export let scrollbarXClasses: string = "";
+	export let scrollbarYClasses: string = "";
 </script>
 
 <ScrollAreaPrimitive.Root {...$$restProps} class={cn("relative overflow-hidden", className)}>
@@ -19,10 +23,10 @@
 		</ScrollAreaPrimitive.Content>
 	</ScrollAreaPrimitive.Viewport>
 	{#if orientation === "vertical" || orientation === "both"}
-		<Scrollbar orientation="vertical" />
+		<Scrollbar orientation="vertical" class={scrollbarYClasses} />
 	{/if}
 	{#if orientation === "horizontal" || orientation === "both"}
-		<Scrollbar orientation="horizontal" />
+		<Scrollbar orientation="horizontal" class={scrollbarXClasses} />
 	{/if}
 	<ScrollAreaPrimitive.Corner />
 </ScrollAreaPrimitive.Root>

apps/www/src/routes/docs/+layout.svelte

@@ -1,4 +1,5 @@
 <script lang="ts">
+	import { ScrollArea } from "@/registry/new-york/ui/scroll-area";
 	import { DocsSidebarNav } from "$components/docs";
 	import { docsConfig } from "$lib/config/docs";
 </script>
@@ -8,11 +9,11 @@
 		class="container flex-1 items-start md:grid md:grid-cols-[220px_minmax(0,1fr)] md:gap-6 lg:grid-cols-[240px_minmax(0,1fr)] lg:gap-10"
 	>
 		<aside
-			class="fixed top-14 z-30 -ml-2 hidden h-[calc(100vh-3.5rem)] w-full shrink-0 overflow-y-auto md:sticky md:block"
+			class="fixed top-14 z-30 -ml-2 hidden h-[calc(100vh-3.5rem)] w-full shrink-0 md:sticky md:block"
 		>
-			<div class="h-full py-6 pr-6 lg:py-8">
+			<ScrollArea class="h-full py-6 pr-6 lg:py-8">
 				<DocsSidebarNav items={docsConfig.sidebarNav} />
-			</div>
+			</ScrollArea>
 		</aside>
 		<slot />
 	</div>

apps/www/src/routes/examples/mail/(components)/mail-list.svelte

@@ -3,6 +3,7 @@
 	import { mailStore } from "../store.js";
 	import type { Mail } from "../data.js";
 	import { Badge } from "@/registry/new-york/ui/badge";
+	import { ScrollArea } from "@/registry/new-york/ui/scroll-area";
 	import { formatTimeAgo } from "../utils.js";
 
 	export let items: Mail[];
@@ -20,8 +21,7 @@
 	}
 </script>
 
-<!-- TODO: Replace with a ScrollArea component; currently the hack is to set `overflow-hidden` to the body of the doc. -->
-<section id="mail-list" class="overflow-y-auto">
+<ScrollArea class="h-screen">
 	<div class="flex flex-col gap-2 p-4 pt-0">
 		{#each items as item}
 			<button
@@ -67,4 +67,4 @@
 			</button>
 		{/each}
 	</div>
-</section>
+</ScrollArea>

apps/www/src/routes/examples/mail/(components)/mail.svelte

@@ -82,7 +82,7 @@
 		</Resizable.Pane>
 		<Resizable.Handle withHandle />
 		<Resizable.Pane defaultSize={defaultLayout[1]} minSize={30}>
-			<Tabs.Root value="all" class="flex h-full flex-col">
+			<Tabs.Root value="all">
 				<div class="flex items-center px-4 py-2">
 					<h1 class="text-xl font-bold">Inbox</h1>
 					<Tabs.List class="ml-auto">
@@ -105,10 +105,10 @@
 						</div>
 					</form>
 				</div>
-				<Tabs.Content value="all" class="m-0 overflow-y-auto">
+				<Tabs.Content value="all" class="m-0">
 					<MailList items={mails} />
 				</Tabs.Content>
-				<Tabs.Content value="unread" class="m-0 overflow-y-auto">
+				<Tabs.Content value="unread" class="m-0">
 					<MailList items={mails.filter((item) => !item.read)} />
 				</Tabs.Content>
 			</Tabs.Root>

apps/www/src/routes/examples/music/(components)/sidebar.svelte

@@ -1,6 +1,7 @@
 <script lang="ts">
 	import { cn } from "@/utils";
 	import { Button } from "@/registry/new-york/ui/button";
+	import { ScrollArea } from "@/registry/new-york/ui/scroll-area";
 	import type { Playlist } from "../(data)/playlists";
 
 	let className: string | null | undefined = undefined;
@@ -160,7 +161,7 @@
 		</div>
 		<div class="py-2">
 			<h2 class="relative px-7 text-lg font-semibold tracking-tight">Playlists</h2>
-			<div class="h-[300px] overflow-y-auto px-1">
+			<ScrollArea class="h-[300px] px-1">
 				<div class="space-y-1 p-2">
 					{#each playlists as playlist}
 						<Button variant="ghost" class="w-full justify-start font-normal">
@@ -184,7 +185,7 @@
 						</Button>
 					{/each}
 				</div>
-			</div>
+			</ScrollArea>
 		</div>
 	</div>
 </div>

apps/www/src/routes/examples/music/+page.svelte

@@ -3,6 +3,7 @@
 	import { Button } from "@/registry/new-york/ui/button";
 	import { Separator } from "@/registry/new-york/ui/separator";
 	import * as Tabs from "@/registry/new-york/ui/tabs";
+	import { ScrollArea } from "@/registry/new-york/ui/scroll-area";
 	import { AlbumArtwork, Sidebar, Menu, PodcastEmptyPlaceholder } from "./(components)";
 	import { playlists } from "./(data)/playlists";
 	import { listenNowAlbums, madeForYouAlbums } from "./(data)/albums";
@@ -61,7 +62,7 @@
 								</div>
 								<Separator class="my-4" />
 								<div class="relative">
-									<div class="overflow-x-auto">
+									<ScrollArea orientation="both">
 										<div class="flex space-x-4 pb-4">
 											{#each listenNowAlbums as album}
 												<AlbumArtwork
@@ -73,7 +74,7 @@
 												/>
 											{/each}
 										</div>
-									</div>
+									</ScrollArea>
 								</div>
 								<div class="mt-6 space-y-1">
 									<h2 class="text-2xl font-semibold tracking-tight">
@@ -85,7 +86,7 @@
 								</div>
 								<Separator class="my-4" />
 								<div class="relative">
-									<div class="overflow-x-auto">
+									<ScrollArea orientation="both">
 										<div class="flex space-x-4 pb-4">
 											{#each madeForYouAlbums as album}
 												<AlbumArtwork
@@ -97,7 +98,7 @@
 												/>
 											{/each}
 										</div>
-									</div>
+									</ScrollArea>
 								</div>
 							</Tabs.Content>
 							<Tabs.Content

apps/www/static/registry/styles/default-js/scroll-area.json

@@ -11,7 +11,7 @@
 		},
 		{
 			"name": "scroll-area-scrollbar.svelte",
-			"content": "<script>\n\timport { ScrollArea as ScrollAreaPrimitive } from \"bits-ui\";\n\timport { cn } from \"$lib/utils.js\";\n\tlet className = undefined;\n\texport let orientation = \"vertical\";\n\texport { className as class };\n</script>\n\n<ScrollAreaPrimitive.Scrollbar\n\t{orientation}\n\tclass={cn(\n\t\t\"flex touch-none select-none transition-colors\",\n\t\torientation === \"vertical\" && \"h-full w-2.5 border-l border-l-transparent p-px\",\n\t\torientation === \"horizontal\" && \"h-2.5 w-full border-t border-t-transparent p-px\",\n\t\tclassName\n\t)}\n>\n\t<slot />\n\t<ScrollAreaPrimitive.Thumb\n\t\tclass={cn(\"bg-border relative rounded-full\", orientation === \"vertical\" && \"flex-1\")}\n\t/>\n</ScrollAreaPrimitive.Scrollbar>\n"
+			"content": "<script>\n\timport { ScrollArea as ScrollAreaPrimitive } from \"bits-ui\";\n\timport { cn } from \"$lib/utils.js\";\n\tlet className = undefined;\n\texport let orientation = \"vertical\";\n\texport { className as class };\n</script>\n\n<ScrollAreaPrimitive.Scrollbar\n\t{orientation}\n\tclass={cn(\n\t\t\"flex touch-none select-none transition-colors\",\n\t\torientation === \"vertical\" && \"h-full w-2.5 border-l border-l-transparent p-px\",\n\t\torientation === \"horizontal\" && \"h-2.5 w-full border-t border-t-transparent p-px\",\n\t\tclassName\n\t)}\n>\n\t<slot />\n\t<ScrollAreaPrimitive.Thumb\n\t\tclass={cn(\"relative rounded-full bg-border\", orientation === \"vertical\" && \"flex-1\")}\n\t/>\n</ScrollAreaPrimitive.Scrollbar>\n"
 		},
 		{
 			"name": "scroll-area.svelte",

apps/www/static/registry/styles/default/scroll-area.json

@@ -11,7 +11,7 @@
 		},
 		{
 			"name": "scroll-area-scrollbar.svelte",
-			"content": "<script lang=\"ts\">\n\timport { ScrollArea as ScrollAreaPrimitive } from \"bits-ui\";\n\timport { cn } from \"$lib/utils.js\";\n\n\ttype $$Props = ScrollAreaPrimitive.ScrollbarProps & {\n\t\torientation?: \"vertical\" | \"horizontal\";\n\t};\n\n\tlet className: $$Props[\"class\"] = undefined;\n\texport let orientation: $$Props[\"orientation\"] = \"vertical\";\n\texport { className as class };\n</script>\n\n<ScrollAreaPrimitive.Scrollbar\n\t{orientation}\n\tclass={cn(\n\t\t\"flex touch-none select-none transition-colors\",\n\t\torientation === \"vertical\" && \"h-full w-2.5 border-l border-l-transparent p-px\",\n\t\torientation === \"horizontal\" && \"h-2.5 w-full border-t border-t-transparent p-px\",\n\t\tclassName\n\t)}\n>\n\t<slot />\n\t<ScrollAreaPrimitive.Thumb\n\t\tclass={cn(\"bg-border relative rounded-full\", orientation === \"vertical\" && \"flex-1\")}\n\t/>\n</ScrollAreaPrimitive.Scrollbar>\n"
+			"content": "<script lang=\"ts\">\n\timport { ScrollArea as ScrollAreaPrimitive } from \"bits-ui\";\n\timport { cn } from \"$lib/utils.js\";\n\n\ttype $$Props = ScrollAreaPrimitive.ScrollbarProps & {\n\t\torientation?: \"vertical\" | \"horizontal\";\n\t};\n\n\tlet className: $$Props[\"class\"] = undefined;\n\texport let orientation: $$Props[\"orientation\"] = \"vertical\";\n\texport { className as class };\n</script>\n\n<ScrollAreaPrimitive.Scrollbar\n\t{orientation}\n\tclass={cn(\n\t\t\"flex touch-none select-none transition-colors\",\n\t\torientation === \"vertical\" && \"h-full w-2.5 border-l border-l-transparent p-px\",\n\t\torientation === \"horizontal\" && \"h-2.5 w-full border-t border-t-transparent p-px\",\n\t\tclassName\n\t)}\n>\n\t<slot />\n\t<ScrollAreaPrimitive.Thumb\n\t\tclass={cn(\"relative rounded-full bg-border\", orientation === \"vertical\" && \"flex-1\")}\n\t/>\n</ScrollAreaPrimitive.Scrollbar>\n"
 		},
 		{
 			"name": "scroll-area.svelte",

apps/www/static/registry/styles/new-york-js/scroll-area.json

@@ -11,7 +11,7 @@
 		},
 		{
 			"name": "scroll-area-scrollbar.svelte",
-			"content": "<script>\n\timport { ScrollArea as ScrollAreaPrimitive } from \"bits-ui\";\n\timport { cn } from \"$lib/utils.js\";\n\tlet className = undefined;\n\texport let orientation = \"vertical\";\n\texport { className as class };\n</script>\n\n<ScrollAreaPrimitive.Scrollbar\n\t{orientation}\n\tclass={cn(\n\t\t\"flex touch-none select-none transition-colors\",\n\t\torientation === \"vertical\" && \"h-full w-2.5 border-l border-l-transparent p-px\",\n\t\torientation === \"horizontal\" && \"h-2.5 w-full border-t border-t-transparent p-px\",\n\t\tclassName\n\t)}\n>\n\t<slot />\n\t<ScrollAreaPrimitive.Thumb\n\t\tclass={cn(\"bg-border relative rounded-full\", orientation === \"vertical\" && \"flex-1\")}\n\t/>\n</ScrollAreaPrimitive.Scrollbar>\n"
+			"content": "<script>\n\timport { ScrollArea as ScrollAreaPrimitive } from \"bits-ui\";\n\timport { cn } from \"$lib/utils.js\";\n\tlet className = undefined;\n\texport let orientation = \"vertical\";\n\texport { className as class };\n</script>\n\n<ScrollAreaPrimitive.Scrollbar\n\t{orientation}\n\tclass={cn(\n\t\t\"flex touch-none select-none transition-colors\",\n\t\torientation === \"vertical\" && \"h-full w-2.5 border-l border-l-transparent p-px\",\n\t\torientation === \"horizontal\" && \"h-2.5 w-full border-t border-t-transparent p-px\",\n\t\tclassName\n\t)}\n>\n\t<slot />\n\t<ScrollAreaPrimitive.Thumb\n\t\tclass={cn(\"relative rounded-full bg-border\", orientation === \"vertical\" && \"flex-1\")}\n\t/>\n</ScrollAreaPrimitive.Scrollbar>\n"
 		},
 		{
 			"name": "scroll-area.svelte",

apps/www/static/registry/styles/new-york/scroll-area.json

@@ -11,7 +11,7 @@
 		},
 		{
 			"name": "scroll-area-scrollbar.svelte",
-			"content": "<script lang=\"ts\">\n\timport { ScrollArea as ScrollAreaPrimitive } from \"bits-ui\";\n\timport { cn } from \"$lib/utils.js\";\n\n\ttype $$Props = ScrollAreaPrimitive.ScrollbarProps & {\n\t\torientation?: \"vertical\" | \"horizontal\";\n\t};\n\n\tlet className: $$Props[\"class\"] = undefined;\n\texport let orientation: $$Props[\"orientation\"] = \"vertical\";\n\texport { className as class };\n</script>\n\n<ScrollAreaPrimitive.Scrollbar\n\t{orientation}\n\tclass={cn(\n\t\t\"flex touch-none select-none transition-colors\",\n\t\torientation === \"vertical\" && \"h-full w-2.5 border-l border-l-transparent p-px\",\n\t\torientation === \"horizontal\" && \"h-2.5 w-full border-t border-t-transparent p-px\",\n\t\tclassName\n\t)}\n>\n\t<slot />\n\t<ScrollAreaPrimitive.Thumb\n\t\tclass={cn(\"bg-border relative rounded-full\", orientation === \"vertical\" && \"flex-1\")}\n\t/>\n</ScrollAreaPrimitive.Scrollbar>\n"
+			"content": "<script lang=\"ts\">\n\timport { ScrollArea as ScrollAreaPrimitive } from \"bits-ui\";\n\timport { cn } from \"$lib/utils.js\";\n\n\ttype $$Props = ScrollAreaPrimitive.ScrollbarProps & {\n\t\torientation?: \"vertical\" | \"horizontal\";\n\t};\n\n\tlet className: $$Props[\"class\"] = undefined;\n\texport let orientation: $$Props[\"orientation\"] = \"vertical\";\n\texport { className as class };\n</script>\n\n<ScrollAreaPrimitive.Scrollbar\n\t{orientation}\n\tclass={cn(\n\t\t\"flex touch-none select-none transition-colors\",\n\t\torientation === \"vertical\" && \"h-full w-2.5 border-l border-l-transparent p-px\",\n\t\torientation === \"horizontal\" && \"h-2.5 w-full border-t border-t-transparent p-px\",\n\t\tclassName\n\t)}\n>\n\t<slot />\n\t<ScrollAreaPrimitive.Thumb\n\t\tclass={cn(\"relative rounded-full bg-border\", orientation === \"vertical\" && \"flex-1\")}\n\t/>\n</ScrollAreaPrimitive.Scrollbar>\n"
 		},
 		{
 			"name": "scroll-area.svelte",