Input

1import { cva, type VariantProps } from "class-variance-authority";
2import {
3  Children,
4  cloneElement,
5  createContext,
6  isValidElement,
7  useCallback,
8  useContext,
9  useEffect,
10  useMemo,
11  useRef,
12  useState,
13} from "react";
14import {
15  type BlurEvent,
16  type FocusEvent,
17  Platform,
18  Pressable,
19  TextInput as RNTextInput,
20  View,
21} from "react-native";
22import Animated, {
23  interpolateColor,
24  useAnimatedStyle,
25  useSharedValue,
26  withTiming,
27} from "react-native-reanimated";
28import { useCSSVariable } from "uniwind";
29import { cn } from "../lib/utils";
30import { Button, ButtonIcon, type ButtonProps, ButtonText } from "./button";
31 
32// Constants
33const ANIMATION_DURATION = 120;
34const AnimatedPressable = Animated.createAnimatedComponent(Pressable);
35 
36// Types
37type InternalInputAddonButtonContextType = VariantProps<
38  typeof inputAddonButtonVariants
39> &
40  Pick<ButtonProps, "variant">;
41 
42export type InputProps = Omit<
43  React.ComponentPropsWithRef<typeof RNTextInput>,
44  "editable"
45> & {
46  disabled?: boolean;
47};
48 
49export type InputPressableProps = React.ComponentProps<typeof Pressable> & {
50  disabled?: boolean;
51  invalid?: boolean;
52  focused?: boolean;
53};
54 
55export type InputAddonProps = React.ComponentProps<typeof View> &
56  VariantProps<typeof inputAddonVariants> & {
57    children: React.ReactNode;
58  };
59 
60export type InputAddonChild =
61  | React.ReactElement<InputAddonProps>
62  | null
63  | false;
64export type InputAddonChildren = InputAddonChild | InputAddonChild[];
65 
66type InputAddonIconProps = {
67  children: React.ReactNode;
68  className?: string;
69};
70 
71type InputAddonButtonProps = Omit<React.ComponentProps<typeof Button>, "size"> &
72  VariantProps<typeof inputAddonButtonVariants>;
73 
74type UseInputFocusStateProps = {
75  onFocus?: (e: FocusEvent) => void;
76  onBlur?: (e: BlurEvent) => void;
77};
78 
79// Context
80const InputAddonButtonContext =
81  createContext<InternalInputAddonButtonContextType | null>(null);
82 
83const useInputAddonButtonContext = () => {
84  const context = useContext(InputAddonButtonContext);
85  if (!context) {
86    throw new Error(
87      "useInputAddonButtonContext must be used within a Button component"
88    );
89  }
90  return context;
91};
92 
93// Components
94export const Input = ({ className, disabled, ...props }: InputProps) => {
95  return (
96    <RNTextInput
97      className={cn(
98        "grow font-normal text-base text-foreground leading-tight",
99        className
100      )}
101      editable={!disabled}
102      placeholderTextColorClassName="accent-muted-foreground"
103      {...props}
104    />
105// … truncated