Scroll Area

1export { default as ScrollArea } from "./scroll-area.svelte";2export { default as ScrollBar } from "./scroll-bar.svelte";3

1<script lang="ts">
2import { ScrollArea as ScrollAreaPrimitive } from "@sprawlify/svelte/scroll-area"
3import { cn } from "@/lib/utils"
4import ScrollBar from "./scroll-bar.svelte"
5import type { ComponentProps } from "svelte"
6
7interface Props extends ComponentProps<typeof ScrollAreaPrimitive.Root> {}
8
9let { class: className, children, ...rest }: Props = $props()
10</script>
11
12<ScrollAreaPrimitive.Root
13  data-slot="scroll-area"
14  class={cn("relative", className)}
15  {...rest}
16>
17  <ScrollAreaPrimitive.Viewport
18    data-slot="scroll-area-viewport"
19    class="focus-visible:ring-ring/50 size-full rounded-[inherit] transition-[color,box-shadow] outline-none focus-visible:ring-[3px] focus-visible:outline-1 scrollbar-none"
20  >
21    {@render children?.()}
22  </ScrollAreaPrimitive.Viewport>
23  <ScrollBar />
24  <ScrollAreaPrimitive.Corner />
25</ScrollAreaPrimitive.Root>

1<script lang="ts">
2import { ScrollArea as ScrollAreaPrimitive } from "@sprawlify/svelte/scroll-area"
3import { cn } from "@/lib/utils"
4import type { ComponentProps } from "svelte"
5
6interface Props extends ComponentProps<typeof ScrollAreaPrimitive.Scrollbar> {}
7
8let { class: className, orientation = "vertical", ...rest }: Props = $props()
9</script>
10
11<ScrollAreaPrimitive.Scrollbar
12  data-slot="scroll-area-scrollbar"
13  data-orientation={orientation}
14  {orientation}
15  class={cn(
16    "data-[orientation=horizontal]:h-2.5 data-[orientation=horizontal]:flex-col data-[orientation=horizontal]:border-t data-[orientation=horizontal]:border-t-transparent data-[orientation=vertical]:h-full data-[orientation=vertical]:w-2.5 data-[orientation=vertical]:border-l data-[orientation=vertical]:border-l-transparent flex touch-none p-px transition-colors select-none",
17    className
18  )}
19  {...rest}
20>
21  <ScrollAreaPrimitive.Thumb
22    data-slot="scroll-area-thumb"
23    class="rounded-full bg-border relative flex-1"
24  />
25</ScrollAreaPrimitive.Scrollbar>