Input.tsx 809 B

1234567891011121314151617181920212223
  1. // Input: single-line text input atom (search boxes, inline forms). Composer
  2. // textareas are NOT this atom — they live with the conversation package.
  3. import type { InputHTMLAttributes, ReactNode } from 'react'
  4. import clsx from 'clsx'
  5. import css from './Input.module.css'
  6. /**
  7. * Render a text input with an optional leading icon.
  8. * @param props.icon - optional 16px leading icon node.
  9. * @returns wrapper span containing the native input; input attributes pass through.
  10. */
  11. export function Input({ icon, className, ...rest }: {
  12. icon?: ReactNode
  13. className?: string
  14. } & InputHTMLAttributes<HTMLInputElement>) {
  15. return (
  16. <span className={clsx(css.wrap, className)}>
  17. {icon != null && <span className={css.icon}>{icon}</span>}
  18. <input className={css.input} {...rest} />
  19. </span>
  20. )
  21. }