| 42 | } |
| 43 | |
| 44 | export const InputBase = ({ |
| 45 | ref, |
| 46 | tooltip, |
| 47 | shortcut, |
| 48 | groupRef, |
| 49 | size = "md", |
| 50 | isInvalid, |
| 51 | isDisabled, |
| 52 | isRequired, |
| 53 | icon: Icon, |
| 54 | placeholder, |
| 55 | wrapperClassName, |
| 56 | tooltipClassName, |
| 57 | inputClassName, |
| 58 | iconClassName, |
| 59 | type = "text", |
| 60 | ...inputProps |
| 61 | }: InputBaseProps) => { |
| 62 | const [isPasswordVisible, setIsPasswordVisible] = useState(false); |
| 63 | |
| 64 | // Check if the input has a leading icon or tooltip |
| 65 | const hasTrailingIcon = tooltip || isInvalid; |
| 66 | const hasLeadingIcon = Icon; |
| 67 | |
| 68 | // If the input is inside a `TextFieldContext`, use its context to simplify applying styles |
| 69 | const context = useContext(TextFieldContext); |
| 70 | |
| 71 | const inputSize = context?.size || size; |
| 72 | |
| 73 | const sizes = sortCx({ |
| 74 | sm: { |
| 75 | root: cx("px-3 py-2 text-sm", hasLeadingIcon && "pl-9", hasTrailingIcon && "pr-9"), |
| 76 | iconLeading: "left-3 size-4 stroke-[2.25px]", |
| 77 | iconTrailing: "right-3", |
| 78 | shortcut: "pr-1.5", |
| 79 | }, |
| 80 | md: { |
| 81 | root: cx("px-3 py-2 text-md", hasLeadingIcon && "pl-10", hasTrailingIcon && "pr-9"), |
| 82 | iconLeading: "left-3 size-5", |
| 83 | iconTrailing: "right-3", |
| 84 | shortcut: "pr-2", |
| 85 | }, |
| 86 | lg: { |
| 87 | root: cx("px-3.5 py-2.5 text-md", hasLeadingIcon && "pl-10.5", hasTrailingIcon && "pr-9.5"), |
| 88 | iconLeading: "left-3.5 size-5", |
| 89 | iconTrailing: "right-3.5", |
| 90 | shortcut: "pr-2.5", |
| 91 | }, |
| 92 | }); |
| 93 | |
| 94 | return ( |
| 95 | <AriaGroup |
| 96 | {...{ isDisabled, isInvalid }} |
| 97 | ref={groupRef} |
| 98 | className={({ isFocusWithin, isDisabled, isInvalid }) => |
| 99 | cx( |
| 100 | "group/input relative flex w-full flex-row place-content-center place-items-center rounded-lg bg-primary shadow-xs ring-1 ring-primary transition-shadow duration-100 ease-linear ring-inset", |
| 101 | |