stepper

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