segmented-input

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