stack

1"use client";
2 
3import { mergeProps } from "@base-ui/react/merge-props";
4import { useRender } from "@base-ui/react/use-render";
5import { cva } from "class-variance-authority";
6import * as React from "react";
7import { cn } from "@/lib/utils";
8 
9interface ItemDimension {
10  itemId: number;
11  size: number;
12}
13 
14type Side = "top" | "bottom";
15 
16function getDataState(isExpanded: boolean) {
17  return isExpanded ? "expanded" : "collapsed";
18}
19 
20interface StackContextValue {
21  side: Side;
22  childrenCount: number;
23  itemCount: number;
24  expandedItemCount: number;
25  gap: number;
26  scale: number;
27  offset: number;
28  expandOnHover: boolean;
29  isExpanded: boolean;
30  isInteracting: boolean;
31  dimensions: ItemDimension[];
32  setDimensions: React.Dispatch<React.SetStateAction<ItemDimension[]>>;
33}
34 
35const StackContext = React.createContext<StackContextValue | null>(null);
36 
37function useStackContext(consumerName: string) {
38  const context = React.useContext(StackContext);
39  if (!context) {
40    throw new Error(`\`${consumerName}\` must be used within \`Stack\``);
41  }
42  return context;
43}
44 
45interface StackProps
46  extends React.ComponentProps<"div">,
47    useRender.ComponentProps<"div"> {
48  side?: Side;
49  itemCount?: number;
50  expandedItemCount?: number;
51  gap?: number;
52  scale?: number;
53  offset?: number;
54  expandOnHover?: boolean;
55}
56 
57function Stack(props: StackProps) {
58  const {
59    side = "bottom",
60    itemCount = 3,
61    expandedItemCount,
62    gap = 8,
63    scale = 0.05,
64    offset = 10,
65    className,
66    children,
67    style,
68    onMouseEnter: onMouseEnterProp,
69    onMouseLeave: onMouseLeaveProp,
70    onMouseMove: onMouseMoveProp,
71    onPointerDown: onPointerDownProp,
72    onPointerUp: onPointerUpProp,
73    expandOnHover = false,
74    render,
75    ...rootProps
76  } = props;
77 
78  const [isExpanded, setIsExpanded] = React.useState(false);
79  const [isInteracting, setIsInteracting] = React.useState(false);
80  const [dimensions, setDimensions] = React.useState<ItemDimension[]>([]);
81 
82  const childrenArray = React.Children.toArray(children).filter(
83    React.isValidElement,
84  );
85  const childrenCount = childrenArray.length;
86 
87  const effectiveExpandedItemCount = expandedItemCount ?? childrenCount;
88 
89  const onMouseEnter = React.useCallback(
90    (event: React.MouseEvent<HTMLDivElement>) => {
91      onMouseEnterProp?.(event);
92      if (event.defaultPrevented) return;
93 
94      if (expandOnHover) {
95        setIsExpanded(true);
96      }
97    },
98    [expandOnHover, onMouseEnterProp],
99  );
100 
101// … truncated