scroller

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