File name
Commit message
Commit date
File name
Commit message
Commit date
import type { ComponentProps } from "react";
type InputProps = ComponentProps<"input">;
/** 기본 텍스트 입력. `readOnly`일 때 배경 톤 + 기본 커서로 편집 불가 상태를 시각 구분한다. */
export function Input({ className, readOnly, ...props }: InputProps) {
return (
<input
readOnly={readOnly}
className={`h-10 w-full rounded-md border border-border px-3 text-body-md text-foreground placeholder:text-foreground-subtle focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary disabled:pointer-events-none disabled:opacity-50 ${
readOnly ? "cursor-default bg-surface-muted" : "bg-surface"
} ${className ?? ""}`}
{...props}
/>
);
}