Scroll Area

1import { ScrollArea as ScrollAreaPrimitive } from "@sprawlify/solid/scroll-area";2import { cn } from "@/lib/utils";3import { type ComponentProps, splitProps } from "solid-js";45function ScrollArea(props: ComponentProps<typeof ScrollAreaPrimitive.Root>) {6  const [local, others] = splitProps(props, ["class", "children"]);78  return (9    <ScrollAreaPrimitive.Root10      data-slot="scroll-area"11      class={cn("relative", local.class)}12      {...others}13    >14      <ScrollAreaPrimitive.Viewport15        data-slot="scroll-area-viewport"16        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"17      >18        {local.children}19      </ScrollAreaPrimitive.Viewport>20      <ScrollBar />21      <ScrollAreaPrimitive.Corner />22    </ScrollAreaPrimitive.Root>23  );24}2526function ScrollBar(props: ComponentProps<typeof ScrollAreaPrimitive.Scrollbar>) {27  const [local, others] = splitProps(props, ["class", "orientation"]);28  const orientation = () => local.orientation ?? "vertical";2930  return (31    <ScrollAreaPrimitive.Scrollbar32      data-slot="scroll-area-scrollbar"33      data-orientation={orientation()}34      orientation={orientation()}35      class={cn(36        "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",37        local.class,38      )}39      {...others}40    >41      <ScrollAreaPrimitive.Thumb42        data-slot="scroll-area-thumb"43        class="rounded-full bg-border relative flex-1"44      />45    </ScrollAreaPrimitive.Scrollbar>46  );47}4849export { ScrollArea, ScrollBar };50