TextInput

1import { cn } from "@/lib/utils";
2import {
3  Input,
4  type InputAddonChildren,
5  InputPressable,
6  type InputProps,
7  useInputAddons,
8  useInputFocusState,
9} from "./input";
10 
11// Types
12export type TextInputProps = InputProps & {
13  onFocus?: () => void;
14  onBlur?: () => void;
15  disabled?: boolean;
16  invalid?: boolean;
17  children?: InputAddonChildren;
18};
19 
20// Components
21export const TextInput = ({
22  onFocus,
23  onBlur,
24  disabled,
25  invalid,
26  children,
27  ...props
28}: TextInputProps) => {
29  const { isFocused, internalRef, handleFocus, handleBlur, handlePress } =
30    useInputFocusState({ onBlur, onFocus });
31 
32  const { startAddons, endAddons, pressableClassName } =
33    useInputAddons(children);
34 
35  return (
36    <InputPressable
37      className={cn("h-12 android:py-0", pressableClassName)}
38      disabled={disabled}
39      focused={isFocused}
40      invalid={invalid}
41      onPress={handlePress}
42    >
43      {startAddons}
44 
45      <Input
46        {...props}
47        className={cn("h-12 shrink", props.className)}
48        disabled={disabled}
49        onBlur={handleBlur}
50        onFocus={handleFocus}
51        pointerEvents={isFocused ? undefined : "none"}
52        ref={internalRef}
53      />
54 
55      {endAddons}
56    </InputPressable>
57  );
58};