segmented-input

1"use client";
2 
3import { mergeProps } from "@base-ui/react/merge-props";
4import { useRender } from "@base-ui/react/use-render";
5import { cva, type VariantProps } from "class-variance-authority";
6import * as React from "react";
7import { cn } from "@/lib/utils";
8import { useDirection } from "@/registry/bases/base/ui/direction";
9import { Input } from "@/registry/bases/base/ui/input";
10 
11const ROOT_NAME = "SegmentedInput";
12const ITEM_NAME = "SegmentedInputItem";
13 
14type Direction = "ltr" | "rtl";
15type Orientation = "horizontal" | "vertical";
16type Size = "default" | "sm" | "lg";
17type Position = "isolated" | "first" | "middle" | "last";
18 
19interface SegmentedInputContextValue {
20  dir?: Direction;
21  orientation?: Orientation;
22  size?: Size;
23  disabled?: boolean;
24  invalid?: boolean;
25  required?: boolean;
26}
27 
28const SegmentedInputContext =
29  React.createContext<SegmentedInputContextValue | null>(null);
30 
31function useSegmentedInputContext(consumerName: string) {
32  const context = React.useContext(SegmentedInputContext);
33  if (!context) {
34    throw new Error(`\`${consumerName}\` must be used within \`${ROOT_NAME}\``);
35  }
36  return context;
37}
38 
39interface SegmentedInputProps
40  extends React.ComponentProps<"div">,
41    useRender.ComponentProps<"div"> {
42  dir?: Direction;
43  orientation?: Orientation;
44  size?: Size;
45  disabled?: boolean;
46  invalid?: boolean;
47  required?: boolean;
48}
49 
50function SegmentedInput(props: SegmentedInputProps) {
51  const {
52    size = "default",
53    dir: dirProp,
54    orientation = "horizontal",
55    children,
56    className,
57    render,
58    disabled,
59    invalid,
60    required,
61    ...rootProps
62  } = props;
63 
64  const contextDir = useDirection();
65  const dir = dirProp ?? contextDir;
66 
67  const contextValue = React.useMemo<SegmentedInputContextValue>(
68    () => ({
69      dir,
70      orientation,
71      size,
72      disabled,
73      invalid,
74      required,
75    }),
76    [dir, orientation, size, disabled, invalid, required],
77  );
78 
79  const childrenArray = React.Children.toArray(children);
80  const childrenCount = childrenArray.length;
81 
82  const segmentedInputItems = React.Children.map(children, (child, index) => {
83    if (React.isValidElement<SegmentedInputItemProps>(child)) {
84      if (!child.props.position) {
85        let position: Position;
86 
87        if (childrenCount === 1) {
88          position = "isolated";
89        } else if (index === 0) {
90          position = "first";
91        } else if (index === childrenCount - 1) {
92          position = "last";
93        } else {
94// … truncated