timeline

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";
8import { useIsomorphicLayoutEffect } from "@/registry/bases/base/hooks/use-isomorphic-layout-effect";
9import { useLazyRef } from "@/registry/bases/base/hooks/use-lazy-ref";
10import { useComposedRefs } from "@/registry/bases/base/lib/compose-refs";
11import { useDirection } from "@/registry/bases/base/ui/direction";
12 
13type Direction = "ltr" | "rtl";
14type Orientation = "vertical" | "horizontal";
15type Variant = "default" | "alternate";
16type Status = "completed" | "active" | "pending";
17 
18type ItemElement = HTMLDivElement;
19 
20const ROOT_NAME = "Timeline";
21const ITEM_NAME = "TimelineItem";
22const DOT_NAME = "TimelineDot";
23const CONNECTOR_NAME = "TimelineConnector";
24const CONTENT_NAME = "TimelineContent";
25 
26function getItemStatus(itemIndex: number, activeIndex?: number): Status {
27  if (activeIndex === undefined) return "pending";
28  if (itemIndex < activeIndex) return "completed";
29  if (itemIndex === activeIndex) return "active";
30  return "pending";
31}
32 
33function getSortedEntries(
34  entries: [string, React.RefObject<ItemElement | null>][],
35) {
36  return entries.sort((a, b) => {
37    const elementA = a[1].current;
38    const elementB = b[1].current;
39    if (!elementA || !elementB) return 0;
40    const position = elementA.compareDocumentPosition(elementB);
41    if (position & Node.DOCUMENT_POSITION_FOLLOWING) return -1;
42    if (position & Node.DOCUMENT_POSITION_PRECEDING) return 1;
43    return 0;
44  });
45}
46 
47function useStore<T>(selector: (store: Store) => T): T {
48  const store = React.useContext(StoreContext);
49  if (!store) {
50    throw new Error(`\`useStore\` must be used within \`${ROOT_NAME}\``);
51  }
52 
53  const getSnapshot = React.useCallback(
54    () => selector(store),
55    [store, selector],
56  );
57 
58  return React.useSyncExternalStore(store.subscribe, getSnapshot, getSnapshot);
59}
60 
61interface StoreState {
62  items: Map<string, React.RefObject<ItemElement | null>>;
63}
64 
65interface Store {
66  subscribe: (callback: () => void) => () => void;
67  getState: () => StoreState;
68  notify: () => void;
69  onItemRegister: (
70    id: string,
71    ref: React.RefObject<ItemElement | null>,
72  ) => void;
73  onItemUnregister: (id: string) => void;
74  getNextItemStatus: (id: string, activeIndex?: number) => Status | undefined;
75  getItemIndex: (id: string) => number;
76}
77 
78// … truncated