scroller

1"use client";
2 
3import { cva, type VariantProps } from "class-variance-authority";
4import {
5  ChevronDown,
6  ChevronLeft,
7  ChevronRight,
8  ChevronUp,
9} from "lucide-react";
10import { Slot as SlotPrimitive } from "radix-ui";
11import * as React from "react";
12import { useComposedRefs } from "@/lib/compose-refs";
13import { cn } from "@/lib/utils";
14 
15const DATA_TOP_SCROLL = "data-top-scroll";
16const DATA_BOTTOM_SCROLL = "data-bottom-scroll";
17const DATA_LEFT_SCROLL = "data-left-scroll";
18const DATA_RIGHT_SCROLL = "data-right-scroll";
19const DATA_TOP_BOTTOM_SCROLL = "data-top-bottom-scroll";
20const DATA_LEFT_RIGHT_SCROLL = "data-left-right-scroll";
21 
22const scrollerVariants = cva("", {
23  variants: {
24    orientation: {
25      vertical: [
26        "overflow-y-auto",
27        "data-[top-scroll=true]:[mask-image:linear-gradient(0deg,#000_calc(100%_-_var(--scroll-shadow-size)),transparent)]",
28        "data-[bottom-scroll=true]:[mask-image:linear-gradient(180deg,#000_calc(100%_-_var(--scroll-shadow-size)),transparent)]",
29        "data-[top-bottom-scroll=true]:[mask-image:linear-gradient(#000,#000,transparent_0,#000_var(--scroll-shadow-size),#000_calc(100%_-_var(--scroll-shadow-size)),transparent)]",
30      ],
31      horizontal: [
32        "overflow-x-auto",
33        "data-[left-scroll=true]:[mask-image:linear-gradient(270deg,#000_calc(100%_-_var(--scroll-shadow-size)),transparent)]",
34        "data-[right-scroll=true]:[mask-image:linear-gradient(90deg,#000_calc(100%_-_var(--scroll-shadow-size)),transparent)]",
35        "data-[left-right-scroll=true]:[mask-image:linear-gradient(to_right,#000,#000,transparent_0,#000_var(--scroll-shadow-size),#000_calc(100%_-_var(--scroll-shadow-size)),transparent)]",
36      ],
37    },
38    hideScrollbar: {
39      true: "[-ms-overflow-style:none] [scrollbar-width:none] [&::-webkit-scrollbar]:hidden",
40      false: "",
41    },
42  },
43  defaultVariants: {
44    orientation: "vertical",
45    hideScrollbar: false,
46  },
47});
48 
49type ScrollDirection = "up" | "down" | "left" | "right";
50 
51type ScrollVisibility = {
52  [key in ScrollDirection]: boolean;
53};
54 
55interface ScrollerProps
56  extends VariantProps<typeof scrollerVariants>,
57    React.ComponentProps<"div"> {
58  size?: number;
59  offset?: number;
60  asChild?: boolean;
61  withNavigation?: boolean;
62  scrollStep?: number;
63  scrollTriggerMode?: "press" | "hover" | "click";
64}
65 
66function Scroller(props: ScrollerProps) {
67  const {
68    orientation = "vertical",
69    hideScrollbar,
70    className,
71    size = 40,
72    offset = 0,
73// … truncated