stepper

1"use client";
2 
3import { mergeProps } from "@base-ui/react/merge-props";
4import { useRender } from "@base-ui/react/use-render";
5import { Check } from "lucide-react";
6import * as React from "react";
7import { cn } from "@/lib/utils";
8import { useAsRef } from "@/registry/bases/base/hooks/use-as-ref";
9import { useIsomorphicLayoutEffect } from "@/registry/bases/base/hooks/use-isomorphic-layout-effect";
10import { useLazyRef } from "@/registry/bases/base/hooks/use-lazy-ref";
11import { useComposedRefs } from "@/registry/bases/base/lib/compose-refs";
12import { useDirection } from "@/registry/bases/base/ui/direction";
13 
14const ROOT_NAME = "Stepper";
15const LIST_NAME = "StepperList";
16const ITEM_NAME = "StepperItem";
17const TRIGGER_NAME = "StepperTrigger";
18const INDICATOR_NAME = "StepperIndicator";
19const SEPARATOR_NAME = "StepperSeparator";
20const TITLE_NAME = "StepperTitle";
21const DESCRIPTION_NAME = "StepperDescription";
22const CONTENT_NAME = "StepperContent";
23const PREV_NAME = "StepperPrev";
24const NEXT_NAME = "StepperNext";
25 
26const ENTRY_FOCUS = "stepperFocusGroup.onEntryFocus";
27const EVENT_OPTIONS = { bubbles: false, cancelable: true };
28const ARROW_KEYS = ["ArrowUp", "ArrowDown", "ArrowLeft", "ArrowRight"];
29 
30type Direction = "ltr" | "rtl";
31type Orientation = "horizontal" | "vertical";
32type NavigationDirection = "next" | "prev";
33type ActivationMode = "automatic" | "manual";
34type DataState = "inactive" | "active" | "completed";
35 
36interface DivProps
37  extends React.ComponentProps<"div">,
38    useRender.ComponentProps<"div"> {}
39interface ButtonProps
40  extends React.ComponentProps<"button">,
41    useRender.ComponentProps<"button"> {}
42 
43type ListElement = HTMLDivElement;
44type TriggerElement = HTMLButtonElement;
45 
46function getId(
47  id: string,
48  variant: "trigger" | "content" | "title" | "description",
49  value: string,
50) {
51  return `${id}-${variant}-${value}`;
52}
53 
54type FocusIntent = "first" | "last" | "prev" | "next";
55 
56const MAP_KEY_TO_FOCUS_INTENT: Record<string, FocusIntent> = {
57  ArrowLeft: "prev",
58  ArrowUp: "prev",
59  ArrowRight: "next",
60  ArrowDown: "next",
61  PageUp: "first",
62  Home: "first",
63  PageDown: "last",
64  End: "last",
65};
66 
67function getDirectionAwareKey(key: string, dir?: Direction) {
68  if (dir !== "rtl") return key;
69  return key === "ArrowLeft"
70    ? "ArrowRight"
71    : key === "ArrowRight"
72      ? "ArrowLeft"
73      : key;
74}
75 
76function getFocusIntent(
77  event: React.KeyboardEvent<TriggerElement>,
78  dir?: Direction,
79  orientation?: Orientation,
80) {
81// … truncated