Input

        export function Root(props: InputRootProps) {
  const handleInput: JSX.EventHandler<HTMLInputElement, InputEvent> = (e) => {
    props.onValueChange?.(e.currentTarget.value)
    if (props.onInput) {
      ;(props.onInput as (e: InputEvent & { currentTarget: HTMLInputElement }) => void)(e)
    }
  }

  return (
    <input
      id={props.id}
      type={props.type ?? "text"}
      name={props.name}
      value={props.value ?? props.defaultValue ?? ""}
      placeholder={props.placeholder}
      disabled={props.disabled}
      readonly={props.readOnly}
      required={props.required}
      aria-invalid={props.invalid ? "true" : undefined}
      aria-required={props.required ? "true" : undefined}
      aria-disabled={props.disabled ? "true" : undefined}
      class={props.class}
      style={props.style}
      onInput={handleInput}
      onBlur={props.onBlur}
      onFocus={props.onFocus}
      {...applySemanticAttrs({
        scope: "input",
        part: "root",
        disabled: props.disabled,
        readonly: props.readOnly,
        required: props.required,
        invalid: props.invalid,
        placeholder: !props.value && !!props.placeholder,
      })}
    />
  )
}