46 lines
1.1 KiB
TypeScript
Executable File
46 lines
1.1 KiB
TypeScript
Executable File
import {FocusScope} from '@react-aria/focus';
|
|
import React, {ComponentPropsWithoutRef, CSSProperties, ReactNode} from 'react';
|
|
import clsx from 'clsx';
|
|
|
|
interface InputProps {
|
|
className?: string;
|
|
children: ReactNode;
|
|
autoFocus?: boolean;
|
|
disabled?: boolean;
|
|
style?: CSSProperties;
|
|
inputProps?: ComponentPropsWithoutRef<'div'>;
|
|
wrapperProps?: ComponentPropsWithoutRef<'div'>;
|
|
onClick?: React.MouseEventHandler<HTMLDivElement>;
|
|
}
|
|
|
|
export const Input = React.forwardRef<HTMLDivElement, InputProps>(
|
|
(props, ref) => {
|
|
const {
|
|
children,
|
|
inputProps,
|
|
wrapperProps,
|
|
className,
|
|
autoFocus,
|
|
style,
|
|
onClick,
|
|
} = props;
|
|
|
|
return (
|
|
<div {...wrapperProps} onClick={onClick}>
|
|
<div
|
|
{...inputProps}
|
|
role="group"
|
|
className={clsx(
|
|
className,
|
|
'flex items-center focus-within:ring focus-within:ring-primary/focus focus-within:border-primary/60'
|
|
)}
|
|
ref={ref}
|
|
style={style}
|
|
>
|
|
<FocusScope autoFocus={autoFocus}>{children}</FocusScope>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|
|
);
|