Input Group

1"use client";
2 
3import {
4  useRef,
5  useState,
6  useEffect,
7  useMemo,
8  createContext,
9  useContext,
10  forwardRef,
11  type ReactNode,
12  type HTMLAttributes,
13  type InputHTMLAttributes,
14} from "react";
15import { Field } from "@base-ui/react/field";
16import type { IconComponent } from "@/lib/icon-context";
17import { cn } from "@/lib/utils";
18import { fontWeights } from "@/lib/font-weight";
19import { useShape } from "@/lib/shape-context";
20import { useProximityHover } from "@/hooks/use-proximity-hover";
21 
22interface InputGroupContextValue {
23  registerItem: (index: number, element: HTMLElement | null) => void;
24  activeIndex: number | null;
25}
26 
27const InputGroupContext = createContext<InputGroupContextValue | null>(null);
28 
29function useInputGroup() {
30  const ctx = useContext(InputGroupContext);
31  if (!ctx)
32    throw new Error("useInputGroup must be used within an InputGroup");
33  return ctx;
34}
35 
36interface InputGroupProps extends HTMLAttributes<HTMLDivElement> {
37  children: ReactNode;
38}
39 
40const InputGroup = forwardRef<HTMLDivElement, InputGroupProps>(
41  ({ children, className, ...props }, ref) => {
42    const containerRef = useRef<HTMLDivElement>(null);
43 
44    const { activeIndex, handlers, registerItem, measureItems } =
45      useProximityHover(containerRef);
46 
47    useEffect(() => {
48      measureItems();
49    }, [measureItems, children]);
50 
51    const contextValue = useMemo(
52      () => ({ registerItem, activeIndex }),
53      [registerItem, activeIndex]
54    );
55 
56    return (
57      <InputGroupContext.Provider value={contextValue}>
58        <div
59          ref={(node) => {
60            (containerRef as React.MutableRefObject<HTMLDivElement | null>).current = node;
61            if (typeof ref === "function") ref(node);
62            else if (ref) (ref as React.MutableRefObject<HTMLDivElement | null>).current = node;
63          }}
64          onMouseEnter={handlers.onMouseEnter}
65          onMouseMove={handlers.onMouseMove}
66          onMouseLeave={handlers.onMouseLeave}
67          // `relative` makes this div the fields' offsetParent — the proximity
68          // hook measures items via offsetTop and compares against
69          // container-relative mouse coords, so the two coordinate spaces must
70          // share this origin (same as every other proximity consumer).
71          className={cn("relative flex flex-col gap-3 w-72 max-w-full", className)}
72          {...props}
73        >
74          {children}
75        </div>
76      </InputGroupContext.Provider>
77    );
78  }
79);
80 
81// … truncated